Error: Cannot use GraphQLObjectType "__Directive" from another module or realm

Question

I am trying to query data from GraphQL using Gatsby. I followed Gatsby's instructions on querying data in pages with GraphQL but, I keep getting an error.

Error (this is what I need to fix more than the example below):

Error: Cannot use GraphQLObjectType "__Directive" from another module or realm . Ensure that there is only one instance of "graphql" in the node_modules directory. If different versions of "graphql" are the dependencies of other relied on modules, use "resolutions" to ensure only one version is installed.
https://yarnpkg.com/en/docs/selective-version-resolutions Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one version used in the function from another could produce confusing and spurious results.

Any idea why this is happening? I only have one graphql instance in my node_modules folder

Example of what I am working with:

I am going to be importing my own data from GraphQL but for now as a proof of concept I am working on this Gatsby Rick and Morty Example (link above - I didnt bother with the axios demo yet).

index.js code:

import React, { Component } from 'react'
import { graphql } from 'gatsby'

// This query is executed at build time by Gatsby.
export const GatsbyQuery = graphql`
  {
    rickAndMorty {
      character(id: 1) {
        name
        image
      }
    }
  }
`

class ClientFetchingExample extends Component {
  render() {
    const {
      rickAndMorty: { character },
    } = this.props.data

    return (
      <div style={{ textAlign: "center", width: "600px", margin: "50px auto" }}>
        <h1>{character.name} With His Pupper</h1>
        <p>Rick & Morty API data loads at build time.</p>
        <div>
          <img
            src={character.image}
            alt={character.name}
            style={{ width: 300 }}
          />
        </div>
        <h2>Image of Rick's pupper</h2>
        <p>This will come from a request on the client</p>
      </div>
    )
  }
}

export default ClientFetchingExample

gatsby-config.js:

plugins: [
  {
    resolve: "gatsby-source-graphql",
    options: {
      typeName: "RMAPI",
      fieldName: "rickAndMorty",
      url: "https://rickandmortyapi-gql.now.sh/",
    },
  },
...

Answer 1

My question was about the error and not the code (I added the code upon request for context). The error has been solved and instructions are included below.

I started by checking my yarn.lock for graphql instances. (I had two versions of graphql). The error says there should only be one.

To fix it:

1) I added the following to my package.json:

"resolutions": {
  "graphql": "^14.1.0"
}

2) I ran npm install

This fixed the error for me and hopefully will help someone else.

---

Side note: An alternative way to find what versions you may have in your node_modules run find node_modules -name graphql in the terminal.

For me it returned the two instances (not sure where the gatsby one came from):

node_modules/graphql
node_modules/gatsby/node_modules/graphql

To find versions use grep version node_modules/graphql/package.json

That's how I found I was running GraphQL 14.1.0

Answer 2

I checked https://rickandmortyapi-gql.now.sh/ and found, that you have error in your query. It should be like that:

export const GatsbyQuery = graphql`
  query rickAndMorty {
    character(id: 1) {
      name
      image
    }
  }
`

I guess you tried to make named query, but created that wrong.

plugins: [
  {
    resolve: "gatsby-source-graphql",
    options: {
      typeName: "RMAPI",
      fieldName: "character",
      url: "https://rickandmortyapi-gql.now.sh/",
    },
  },

...