Search code examples
reactjsgatsbycontentfulgatsby-plugin

No reference fields in the node object that Contentful Rich Text receives from Gatsby and GraphQL


I'm using Gatsby 5 and contentful/rich-text-react-renderer.

I have a ContentfulPost type that has some links to related types within the rich text.

I'm following the docs (from Gatsby and Contentful), that say that I need to query them in GraphQL:

query MyQuery {
  allContentfulPost {
    nodes {
      body {
        references {
          ... on ContentfulAlbum {
            node_locale
            contentful_id
            __typename
            id
            slug
          }
        }
      }
    }
  }
}

And that works fine:

 "nodes": [
        {
          "body": {
            "references": [
              {},
              {
                "contentful_id": "2P4r0pD6zphEIiOaKEaprO",
                "__typename": "ContentfulAlbum",
                "id": "06305ddb-a3fa-5265-9a2a-3e43524d351e",
                "slug": "disorders"
              }
            ]
          }
        },
]

The docs then state that I should create a custom renderer and use some properties within node.data.target (see "references" section). These are the options I use:


const options2 = {
    renderNode: {
        [INLINES.ENTRY_HYPERLINK]: (node) => {
            console.log(node);

            return <></>;
        },
    },
};

However, the only fields I get in the logs are:

​
data: Object { target: {…} }
​​
target: Object { sys: {…} }
​​​
sys: Object { id: "2P4r0pD6zphEIiOaKEaprO", type: "Link", linkType: "Entry" }

So, no slug that I can use.

I've seen everywhere (https://stackoverflow.com/a/55769299 or https://stackoverflow.com/a/55998008 ) that the solution is to clear the cache (using gatsby clear, for example). However, that doesn't work in my case.

My goal is to render links with a dynamic url (${locale}/music/${slug})


Solution

  • I've found the problem: the plugin itself.

    Instead of using contentful/rich-text-react-renderer I should use gatsby-source-contentful/rich-text. That one does indeed populate the node object with the query from GraphQL