Category: JavaScript

This one had me stumped. And it may be because I’m using GraphQL wrong. But here goes:

I set up a Gatsby site, along with Postgres and Postgraphile to expose GraphQL over my database. This is frankly amazing, and achieves in about 5 minutes what would realistically take weeks to months to code myself.

So far, so good.

In order to get Gatsby to talk to Postgraphile / GraphQL, I needed this bit of config inside gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-graphql",
      options: {
        // Arbitrary name for the remote schema Query type
        typeName: "segments",
        // Field under which the remote schema will be accessible. You'll use this in your Gatsby query
        fieldName: "segments",
        // Url to query from
        url: "http://0.0.0.0:5000/graphql",
      },
    },
  ],
}

There’s nothing special about this, I just copy / pasted from the docs, and set my typeName and fieldName accordingly.

The typeName and fieldName are important though. And my lack of use are what caused my problem.

Inside my gatsby-node.js file I had a query like:

const result = await graphql(
  `
    {
      segments {
        findUniqueCountries {
          edges {
            node {
              country
              count
              slug
            }
          }
        }
      }
    }
  `
)

This worked fine, and got me back the data I wanted and expected. All good.

Then I moved on, got interrupted, and came back a while later.

I crafted up a new query using the GraphiQL GUI, and had a working result set. All good. Let’s copy / paste that right into the code and carry on, right?

For simplicity, let’s just re-use the query above, but inside GraphiQL:

query MyQuery {
  findUniqueCountries {
    edges {
      node {
        country
        count
        slug
      }
    }
  }
}

That works.

But if you copy / paste it into your code:

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "findUniqueCountries" on type "query".

If you don't expect "findUniqueCountries" to exist on the type "query" it is most likely a typo.
However, if you expect "findUniqueCountries" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "findUniqueCountries" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: gatsby-node.js:108:24

This confused me no end.

Well, there may be different reasons for why this happens, but in my case it was because in copy / pasting, I was no longer wrapping in the segments type name like in my original working example. Whoops.

Worth a check at your end all the same, as it may be the cause of your problems, too.

Edit: The reason for my confusion, in part, stems from having two GraphiQL instances running. I had one available on port 5000, provided by postgraphile, and another on Gatsby’s default port. If using the GraphiQL provided by Gatsby, there is an extra nested layer (for segments in my case), which does make it easy to copy / paste the query out from the GUI.