Gridsome对接Strapi v3正常 升级v4报data不可迭代错误

Strapi v4 对 REST API 响应结构做了不兼容升级：

• v3 版本接口直接返回数据数组，可直接遍历
• v4 版本所有响应统一包裹为 { data: 实际返回内容, meta: 分页等元信息 } 结构，单条/多条数据的自定义字段全部存放在条目的 attributes 字段下，不再直接挂载在条目根节点

你之前的代码直接遍历 axios 返回的响应体data，但这个值是包含data、meta属性的对象，不是可遍历的数组，因此抛出data is not iterable错误。另外你之前写的populate=参数为空，实际不会拉取任何关联字段。

修改逻辑分三点：

• 接口路径补全v4要求的/api前缀，需要关联数据时传populate=*参数
• 从响应体中取出真正的事件数组，也就是响应体的data字段
• 遍历条目时，将id和attributes下的业务字段合并，关联字段也做同样的扁平化处理即可

api.loadSource(async actions => {
  // 替换为v4正确接口地址，populate=*表示拉取所有关联字段，不需要可删除该参数
  const { data: strapiResponse } = await axios.get('http://localhost:1337/api/events?populate=*')

  const collection = actions.addCollection({
    typeName: 'Event',
    path: '/events/:id'
  })

  // 遍历Strapi返回的实际数据数组
  for (const event of strapiResponse.data) {
    collection.addNode({
      id: event.id,
      // 展开所有普通业务字段
      ...event.attributes,
      // 扁平化处理关联字段（以categories为例，不需要可删除）
      categories: event.attributes.categories?.data.map(category => ({
        id: category.id,
        ...category.attributes
      }))
    })
  }
})

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