在 GraphQL 中获取动态区域类型

Question

我将 Strapi 设置为前端的无头 CMS 和 Gatsby。在 Strapi 中，我设置了一个带有动态区域的“单一”类型，用户可以使用该区域向其中插入各种组件。

直接从 Strapi GraphQL 查询时，可以得到组件类型，像这样：

{
  inicio {
    componentes {
      __typename
    }
  }
}

返回：

{
  "data": {
    "inicio": {
      "componentes": [
        {
          "__typename": "ComponentPaginasCitaBiblica"
        },
        {
          "__typename": "ComponentPaginasAlerta"
        },
        {
          "__typename": "ComponentPaginasTexto"
        }
      ]
    }
  }
}

但是在盖茨比中，我得到了不同的结果：

query MyQuery {
  strapiInicio {
    componentes {
      __typename
    }
  }
}

{
  "data": {
    "strapiInicio": {
      "componentes": [
        {
          "__typename": "StrapiInicioComponentes"
        },
        {
          "__typename": "StrapiInicioComponentes"
        },
        {
          "__typename": "StrapiInicioComponentes"
        }
      ]
    }
  },
  "extensions": {}
}

我需要根据组件类型选择不同的字段并能够在页面上正确显示它们，但是，__typename 始终设置为StrapiInicioComponentes。还有其他方法可以从 Gatsby 那里得到这个吗？

GraphiQL 浏览器不显示任何其他内容：

Answer 1

关于这个有一个open bug。 The fix 已被合并，但在撰写本文时，它仅被添加到 alpha 版本中，因此使用风险自负。

要使用 npm 安装最新的 alpha 版本的 gatsby-source-strapi，请执行：

npm i gatsby-source-strapi@alpha

这会将组件类型添加到 GraphQL 中的 strapi_component。

或者作为替代方案，您可以尝试gatsby-source-rest-api，它在_xcomponent 下公开组件类型。