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

Question

I'm trying to get a list of countries from a graphql server in my react app. The getAllCountry query works fine on playground but whenever I call the same query on the app, I get the following 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)

Here's what my code looks like:

// 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));
  };

I'm very sure my client is configured correctly because I have other queries in my gqlQueries.js file and they all work fine except this particular one (getAllCountry).

You mean I should post the how the network request body looks like? — Kadet

cattre cattre · Accepted Answer · 2021-03-04T21:51:30

Have you tried importing the query directly? e.g.


 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));
  };

I had a similar issue and it was the syntax within the .query method. Not sure if the way you're importing it is causing an issue (although maybe not if you've done the same for your other queries).

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

1 Answers