Next.js结合Strapi+GraphQL开发博客时getStaticProps序列化报错如何解决

• client.query是异步返回Promise的方法，你的代码没有加await关键字，导致getData拿到的是Pending状态的Promise实例，不是实际的查询结果，getData.blogs自然是undefined，符合报错提示里的received: [object Undefined]
• ApolloClient初始化参数错误：官方要求的接口地址字段是uri不是url，同时你写的地址http:/localhost:1337/graphql少了一个斜杠，正确应为http://localhost:1337/graphql
• GraphQL查询语句语法错误：查询字段后不需要加类型声明，id: string、title: string的写法是错误的，直接写字段名即可
• 返回的props结构不规范：即使查询成功，你返回的是{ props: getData.blogs }，不符合Next.js要求的{ props: { 字段名: 值 } }的结构要求
• 你怀疑的依赖冲突并不存在，问题完全由代码写法错误导致

直接替换你的getStaticProps代码为以下内容即可：

export async function getStaticProps() {
  const client = new ApolloClient({
    uri: "http://localhost:1337/graphql", // 修正字段名和请求地址
    cache: new InMemoryCache(),
  });

  const GET_BLOGS = gql`
    query getBlogs {
      blogs {
        id
        title
      }
    }
  `;
  // 加await获取实际查询结果，Apollo返回的结果存储在data字段下
  const { data } = await client.query({ query: GET_BLOGS });
  console.log(data.blogs);

  // 按照Next.js要求返回规范的props结构
  return { props: { blogs: data.blogs } };
}

如果修复后还是拿不到数据，可以检查Strapi侧的Blog内容类型是否开启了GraphQL公开访问权限，在Strapi后台的角色权限设置里给Public角色勾选blogs的find权限即可。

内容的提问来源于stack exchange，提问作者Santosh