Gatsby结合Strapi使用GraphQL的new_students关联数据不显示

最常见触发原因：关联返回值为数组，非单对象 #

Strapi 的关联字段在 Gatsby GraphQL schema 中，只要配置的是一对多、多对多关系，返回的都是对象数组，不会返回单个关联对象。
你当前代码直接写 classdesc.new_students.firstname，相当于在数组上取 firstname 属性，拿到的结果是 undefined，自然无法在页面渲染。
验证方式：在本地 Gatsby GraphQL Playground（___graphql 路径）执行你现有编写的查询，查看 new_students 的实际返回结构，90%的场景会看到类似结构：

{
  "new_students": [
    {
      "firstname": "学生名称",
      "student_img": {}
    }
  ]
}

对应修正操作 #

调整渲染代码适配数组结构 #

• 若业务仅需展示单条关联学生，取数组首位数据并做空值兜底，修改页面代码：

  {/* 原错误写法 */}
  <p>{classdesc.new_students.firstname}</p>
  
  {/* 修正后写法，避免空值导致页面崩溃 */}
  <p>{classdesc.new_students?.[0]?.firstname || '暂未关联学生'}</p>
  

• 若需要展示全部关联学生，循环遍历数组渲染即可：

  <div>
    {classdesc.new_students?.map((student, index) => (
      <p key={index}>{student.firstname}</p>
    )) ?? '暂未关联学生'}
  </div>
  

校验关联配置与权限 #

如果执行查询后发现 new_students 返回空数组，依次排查：

• Strapi 后台权限设置：确认当前网站使用的 Strapi 角色，对关联的学生数据表开放了查询、读取权限，未授权的关联数据会被Strapi接口过滤为空
• 后台数据绑定：确认当前对应的班级条目，已在后台实际关联了学生数据，不存在空关联配置

清理本地缓存解决Schema同步问题 #

如果上述配置全部正确但关联依然返回空，大概率是Gatsby本地缓存了旧的数据结构：

1. 停止本地开发服务
2. 删除本地缓存目录：.cache、public
3. 重新启动开发服务，重新同步最新的Strapi关联数据

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