如何在Next.js应用中使用SWR请求Apollo Server GraphQL数据并正常渲染

问题原因&修改方案 #

• 核心错误1：GraphQL查询语句缺少query关键字，服务端无法解析请求结构，直接返回400状态码。
  原错误写法：

  const Query = `
    books {
      title
    }
  `;
  

  修正后写法：

  const Query = `
    query {
      books {
        title
      }
    }
  `;
  

• 核心错误2：fetcher没有做请求错误判断，400请求被当做正常返回处理，导致SWR始终处于加载状态，不会走到错误分支。
  修正后fetcher逻辑：

  const fetcher = async () => {
    const response = await fetch("/api/graphql", {
      body: JSON.stringify({ query: Query }),
      headers: { "Content-type": "application/json" },
      method: "POST"
    });
    if (!response.ok) {
      throw new Error('接口请求异常')
    }
    const { data } = await response.json();
    return data;
  };
  

• 核心错误3：渲染逻辑不符合返回数据结构，resolver返回的books是数组，无法直接读取title属性，需要遍历输出。
  原错误渲染写法：

  return (
    <div>
      <div>hello {data?.books?.title}</div>
    </div>
  );
  

  修正后渲染写法：

  return (
    <div>
      <div>书籍列表：</div>
      {data?.books?.map((book, idx) => (
        <div key={idx}>{book.title}</div>
      ))}
    </div>
  );
  

• 可选优化：SWR的请求key直接使用查询字符串即可，不需要包裹成数组：

  const { data, error } = useSWR(Query, fetcher);
  

内容的提问来源于stack exchange，提问作者WΔ_