使用Next.js+Strapi时GraphQL返回空数组且报解构错误是什么原因？

报错及返回空的原因 #

1. "cannot destructure property of intermediate value"报错 #

• 核心原因是GraphQL请求失败时返回值为undefined，你直接对返回结果解构data属性触发报错，建议加异常捕获逻辑处理请求失败的场景。
• 次要原因是你组件内直接对posts调用map方法：Strapi v4的GraphQL接口返回的posts是对象，实际存储内容的数组在posts.data字段下，对对象调用数组方法会触发运行时错误。
• 你的代码里还存在遍历取值的笔误：map回调内误写为posts.heading，应该取当前遍历项post的属性。

2. GraphQL返回空数组 #

• Strapi默认接口没有开放公共访问权限，需要进入Strapi后台设置 -> 用户及权限插件 -> 角色 -> Public，勾选Post内容类型的find权限，否则匿名请求拿不到任何数据。
• 你可以直接打开http://localhost:1337/graphql进入GraphQL调试面板，运行你写的查询语句验证返回结果，如果这里也返回空，说明是后端配置问题，和前端代码无关。
• 检查你Strapi后台创建的Post内容类型是否有heading字段，字段名大小写是否和查询语句完全一致，确认已创建的Post内容都已经发布，未发布的内容不会通过接口返回。

修复后参考代码 #

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'

export default function Blog({ posts }) {
  console.log('posts', posts)
  return (
    <div>
      {/* 可选链兼容空值场景，遍历posts下的data数组 */}
      {posts?.data?.map(post => {
        return (
          <div key={post.id}>
            {/* 取当前遍历项的attributes下的heading，修正原代码笔误 */}
            <p>{post.attributes.heading}</p>
          </div>
        )
      })}
    </div>
  )
}

export async function getStaticProps() {
  const client = new ApolloClient({
    url: 'http://localhost:1337/graphql/',
    cache: new InMemoryCache(),
  })

  // 加try catch捕获请求异常，避免解构报错
  try {
    const { data } = await client.query({
      query: gql`
        query {
          posts {
            data {
              id
              attributes {
                heading
              }
            }
          }
        }
      `,
    })

    return {
      props: {
        posts: data.posts,
      },
      revalidate: 10
    }
  } catch (err) {
    console.error('GraphQL请求失败：', err)
    // 请求失败时返回空数组结构，避免组件报错
    return {
      props: {
        posts: { data: [] }
      }
    }
  }
}

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