GraphQL：Client简单示例根据上次笔记设置的graphql server，设置一个前端获取：代码示例： Gr

根据上次笔记设置的graphql server，设置一个前端获取：

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GraphQL Client</title>
  </head>
  <body>
    <h1>GraphQL Client</h1>
    <p>
      <strong id="graphqlData">Loading... </strong>
    </p>
    <script src="app.js"></script>
  </body>
</html>

const title = "The Awakening";
//
async function fetchGreeting(title) {
  const res = await fetch("http://localhost:9000/", {
    method: "POST",
    headers: {
      "Content-type": "application/json",
    },
    // 在上次的笔记中，通过f12打开开发工具，查看网络控制台。查看localhost的request和respose
    //发现请求的payload中的query  （也就是graphql的query语句） 如下：  
    body: JSON.stringify({
      query: `#graphql
       query fetchBookData($title:String!){
        books {
            title
            author
        }
        book(title:$title){
            title
            author
        }
       } 
        
      `,
      //这里的variables: { title } 是 GraphQL特有的处理方式
      variables: { title },
    }),
  });
  return await res.json();
}
//
fetchGreeting(title).then(({ data }) => {
  document.getElementById("graphqlData").innerHTML = `
    <h1>Title:</h1>
      <p>${data.book.title}</p>
    <h1>author:</h1>
      <p>${data.book.author}</p>
  `;
});

GraphQL特有的处理方式：

使用variables对象来传递查询变量是GraphQL特有的处理方式。它不是通用的HTTP请求处理方式，而是专门为满足GraphQL查询的灵活性和动态性设计的。
在非GraphQL的普通HTTP请求中，你通常会直接在URL中通过查询字符串或在请求体中以不同的格式（如JSON、表单数据等）发送数据。