未捕获的不变违规：需要查询选项。您必须在查询选项中指定您的 GraphQL 文档

Question

我正在尝试从我的 React 应用程序中的 graphql 服务器获取国家/地区列表。 getAllCountry 查询在 playground 上运行良好，但每当我在应用程序上调用相同的查询时，我都会收到以下 errors:

"query option is required. You must specify your GraphQL document in the query option" (error as seen on screen),

"Uncaught Invariant Violation: query option is required. You must specify your GraphQL document in the query option." (error on console)

我的代码如下所示：

// gql query inside gqlQueries.js

export const GET_ALL_COUNTRIES = gql`
  query getAllCountry {
    getAllCountry {
      name
      id
      countryCode
      currencyCode
    }
  }
`;

// calling the query

 import { queries as gql } from "./gqlQueries";

 const getAllCountries = () => {
    client
      .query({
        query: gql.GET_ALL_COUNTRIES
      })
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => console.log(err));
  };

我非常确定我的客户端配置正确，因为我的 gqlQueries.js 文件中还有其他查询，除了这个特定的查询 (getAllCountry)，它们都工作正常。

Answer 1

您是否尝试过直接导入查询？例如


 import { GET_ALL_COUNTRIES } from "./gqlQueries";

 const getAllCountries = () => {
    client
      .query({
        query: GET_ALL_COUNTRIES
      })
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => console.log(err));
  };

我有一个类似的问题，它是 .query 方法中的语法。不确定您导入它的方式是否导致了问题（尽管如果您对其他查询执行了相同的操作，则可能不会）。

Answer 2

我认为问题是这里的 gql:

.query({
    query: gql.GET_ALL_COUNTRIES
  })

应该是这样的：

.query({
    query: GET_ALL_COUNTRIES
  })

gql 已经在 const 中：

export const GET_ALL_COUNTRIES = gql`
  query getAllCountry {
    getAllCountry {
      name
      id
      countryCode
      currencyCode
    }
  }`;

未捕获的不变违规：需要查询选项。您必须在查询选项中指定您的 GraphQL 文档

Uncaught Invariant Violation: query option is required. You must specify your GraphQL document in the query option

apollo

reactjs

graphql

react-apollo

apollo-client