在GraphQL查询中无法找到Strapi嵌套组件Item的问题排查

问题描述 #

我是Strapi和GraphQL的新手，在Strapi中创建了Navbar的嵌套数据结构（Category包含Name和同级的Item组件），但通过Gatsby的GraphQL查询时，只能看到children字段，看不到预期的Item字段，且返回的children为空数组。

当前查询代码：

query MyQuery {
  allStrapiNavbar {
    nodes {
      Category {
        Name
        children {
          id
        }
      }
    }
  }
}

查询返回结果：

{
  "data": {
    "allStrapiNavbar": {
      "nodes": [
        {
          "Category": [
            {
              "Name": "Community",
              "children": []
            },
            {
              "Name": "Modules",
              "children": []
            },
            {
              "Name": "Company",
              "children": []
            },
            {
              "Name": "Pricing",
              "children": []
            }
          ]
        }
      ]
    }
  },
  "extensions": {}
}

gatsby-config.ts相关配置：

{
    resolve: "gatsby-source-strapi",
    options: {
      apiURL: process.env.STRAPI_API_URL || "http://localhost:1337",
      queryLimit: 1000, // Default to 100
      accessToken: process.env.STRAPI_TOKEN,
      collectionTypes:[ 'faq', 'doc', 'docCategory', 'faqCategory', 'release', 'userType' ],
      singleTypes: [ 'navbar' ],
    },
}

我需要让Item字段和Name同级显示在GraphQL查询结果中，而非在children里，请问该如何调整？

解决方案 #

1. 检查Strapi端的数据与配置 #

• 确认Strapi中Category组件已正确添加Item字段（注意字段名称的大小写，Strapi默认保留字段名，但gatsby-source-strapi可能会转换为小写开头格式）。
• 确保Navbar条目已填充Item数据，并且发布了该内容（Strapi未发布的内容不会通过API返回）。
• 直接访问Strapi的API端点（如http://localhost:1337/api/navbar），查看返回的JSON数据中是否包含Category下的Item字段。如果API返回中没有，优先修复Strapi的字段配置或数据填充。

2. 调整GraphQL查询的字段名称 #

gatsby-source-strapi会将Strapi中的字段名转换为小写开头的驼峰格式，如果Strapi中字段名为Item，尝试在查询中使用item：

query MyQuery {
  allStrapiNavbar {
    nodes {
      Category {
        Name
        item {
          # 这里添加Item组件的具体字段，比如名称、链接等
          id
          title
          url
        }
      }
    }
  }
}

3. 清理Gatsby缓存并重新构建 #

Gatsby可能缓存了旧的数据结构，执行以下命令强制刷新：

gatsby clean && gatsby develop

4. 确认gatsby-source-strapi版本与配置 #

• 若使用v4版本的gatsby-source-strapi，确保singleTypes和collectionTypes的命名符合要求（单类型用单数，集合类型用复数），你当前的navbar单类型配置是正确的。
• Item作为嵌套组件无需额外添加到collectionTypes或singleTypes，插件会自动关联抓取嵌套组件。

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