Integration between gatsby-source-datocms and renderMetaTags from react-datocms

🆘 Support
1

Hello,

We are working with Gatsby and DatoCMS. We are trying to get the benefits from renderMetaTags function and the new Gatsby Head API. The issue is that renderMetaTags expects TitleMetaLinkTag or SeoOrFaviconTag. For example from DatoCMS API Explorer:

{"_seoMetaTags": [
        {
          "attributes": null,
          "content": "Gatsby DatoCMS Homepage Starter",
          "tag": "title"
        }
}

While gatsby-source-datocms change the shape of the Gatsby nodes to:

"seoMetaTags": {
        "tags": [
          {
            "tagName": "title",
            "content": "Gatsby DatoCMS Homepage Starter"
          }]
}

Is there out of the box integration to this? Or do we need to transform the result from gatsby-source-datocms to meet renderMetaTags needs, or even create a custom renderMetaTags?

2

Sorry for the late reply @dmv, but have you seen the documentation here: GitHub - datocms/gatsby-source-datocms: Official GatsbyJS source plugin to pull content from DatoCMS ?

The idea is that you use it like this:

<HelmetDatoCms seo={data.datoCmsAboutPage.seoMetaTags} />

without our React component.

The issue is that Gatsby is not using our GraphQL API, it’s getting data via the REST API which is then translated into the Gatsby-specific GraphQL, so the format might differ.

Let me know if you need any help on this