Question

我正在尝试使用Gatsby从GraphQL查询数据。我遵循了Gatsby's的说明，使用GraphQL查询页面中的数据，但是，我一直遇到错误。

错误（除了下面的示例，这是我需要解决的更多问题）：

错误：无法从另一个模块使用GraphQLObjectType“ __Directive”   或境界。确保仅存在一个“ graphql”实例   node_modules目录。如果不同版本的“ graphql”是   其他依赖模块的依赖关系，请使用“分辨率”   确保仅安装一个版本。
  https://yarnpkg.com/en/docs/selective-version-resolutions重复   由于不同，“ graphql”模块不能同时使用
  版本可能具有不同的功能和行为。来自的数据   一个函数使用的另一个版本可能会产生   令人困惑和虚假的结果。

知道为什么会这样吗？我的node_modules文件夹中只有一个graphql实例

我正在使用的示例：

我将从GraphQL导入我自己的数据，但现在作为概念验证，我正在研究此Gatsby Rick and Morty示例（上面的链接-我还没有为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

gatsby-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的方式

错误：无法从另一个模块或领域使用GraphQLObjectType“ __Directive”

2 个答案: