Gatsby Remark plugin: Created nodes visible to GraphIQL but queries on Gatsby pages return null

Question

I'm working on a plugin for gatsby-transformer-remark. In my plugin, I take data from the Remark transformer and create a graphql node of a new type. When I start the site and open GraphIQL at http://localhost:8000/___graphql, I can see my plugin's new node and its data. However, when I try to access that node's data in a Gatsby page component, the graphql query returns null for that node type. Why does the data not appear in the graphql query on my page? Can I not create new graphql nodes in Remark plugins? The Remark gatsby plugin API provides the necessary methods for creating nodes.

I have a minimal reproduction repo at this link. Instructions for running it and seeing the issue are in the readme.

https://github.com/timothymcmackin/test-create-nodes

I create the graphQL node in plugins/gatsby-remark-internal-toc/index.js by using the createNode method:

  if (headings.length > 0) {
    const { createNode } = actions;

    const headingNode = {
      headings: headings,
      path: markdownNode.frontmatter.path,
      id: createNodeId(`${markdownNode.frontmatter.path}.${markdownNode.frontmatter.title}`),
      children: [],
      internal: {
        description: `Headings and links for ${markdownNode.fileAbsolutePath}`,
        type: "topicInternalHeadings",
        contentDigest: createContentDigest(headings),
        content: JSON.stringify(headings),
      }
    };

    await createNode(headingNode);
  }

I start the site with the Gatsby develop command. Then I open graphIQL and run this query:

query MyQuery {
  topicInternalHeadings(path: {eq: "/mypage.html"}) {
    headings {
      level
      path
      text
    }
  }
}

The query returns data for the topicInternalHeadings node.

Then I open http://localhost:8000/myPage.html which has a similar query on it. However, the results of its query are:

{markdownRemark: {…}, topicInternalHeadings: null}

Expected result

The graphql node data that I create in the plugin is available to both graphiql and graphql queries on Gatsby pages.

Actual result

The node data is available to graphiql but graphql queries on Gatsby pages return null.

Thanks for taking the time to put together a reproduction repo! Unfortunately I can't reproduce, topicInternalQuery is also null in GraphiQL for me. It could be a cache issue, can you try gatsby clean and let me know if this solves it? — Robin Métral
Strange -- I ran gatsby clean and then gatsby develop and I see the data in GraphiQL. Not sure what could be happening that we see different results. Different versions of Gatsby? I've updated to gatsby to 2.19.12 and gatsby-transformer-remark 2.6.50. I committed my yarn.lock file, so maybe try using that. — Tim McMackin

Cesar Varela Cesar Varela · Accepted Answer · 2021-07-31T04:01:53

In my case it was that the query in my page had no name, so instead of this:

 query {
   allMdx(sort: {fields: frontmatter___date, order: DESC}, limit: 6) {
  edges {
.....

Do this:

query SomeMeaningFulName {
   allMdx(sort: {fields: frontmatter___date, order: DESC}, limit: 6) {
  edges {

Gatsby Remark plugin: Created nodes visible to GraphIQL but queries on Gatsby pages return null

Expected result

Actual result

1 Answers