Ошибка: невозможно использовать GraphQLObjectType "__Directive" из другого модуля или области

Question

Я пытаюсь запросить данные из GraphQL с помощью Gatsby. Я следовал инструкциям Гэтсби при запросе данных на страницах с помощью GraphQL, но получаю сообщение об ошибке.

Ошибка (это то, что мне нужно исправить больше, чем в примере ниже):

Ошибка: невозможно использовать GraphQLObjectType "__Directive" из другого модуля или царство. Убедитесь, что есть только один экземпляр «graphql» в каталог node_modules. Если разные версии "graphql" зависимости других полагаются на модули, используйте «разрешения» для убедитесь, что установлена ​​только одна версия.
https://yarnpkg.com/en/docs/selective-version-resolutions Дубликат Модули "graphql" не могут использоваться одновременно, поскольку разные
версии могут иметь разные возможности и поведение. Данные из одна версия, используемая в функции из другой, может производить сбивающие с толку и ложные результаты.

Есть идеи, почему это происходит? У меня есть только один экземпляр graphql в моей папке node_modules

Пример того, с чем я работаю:

Я собираюсь импортировать свои собственные данные из GraphQL, но пока в качестве подтверждения концепции я работаю над этим примером Гэтсби Рика и Морти (ссылка выше - я еще не удосужился с демонстрацией axios).

index.js код:

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

Гэтсби-config.js:

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

Answer 1

Я проверил https://rickandmortyapi -gql.now.sh / и обнаружил, что в вашем запросе есть ошибка. Должно быть так:

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

Полагаю, вы пытались сделать именованный запрос, но создали это неправильно.

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

...

Answer 2

Мой вопрос касался ошибки , а не кода (я добавил код по запросу для контекста). Ошибка была устранена, и инструкции приведены ниже.

Я начал с проверки yarn.lock на graphql экземпляров. (У меня было две версии graphql). Ошибка говорит, что должен быть только один.

Чтобы исправить это:

1) Я добавил следующее в свой package.json:

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

2) Я бегал npm install

Это исправило ошибку для меня и, надеюсь, поможет кому-то еще.

---

Примечание: Альтернативный способ узнать, какие версии у вас могут быть в ваших node_modules, запустить find node_modules -name graphql в терминале.

Для меня он вернул два экземпляра (не уверен, откуда взялся Гэтсби):

node_modules/graphql
node_modules/gatsby/node_modules/graphql

Для поиска версий используйте grep version node_modules/graphql/package.json

Вот так я обнаружил, что запускаю GraphQL 14.1.0