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:

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

2. "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).

Donnydonnybrook

network request body? – Crossquestion

You mean I should post the how the network request body looks like? – Donnydonnybrook

You can rename the export, but you need to remove the part of accessing the query through the gql. variable. Like import { GET_ALL_COUNTRIES as query } from ... and use just query – Blest

Answer 1

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).

Logue

Yes, after a lot of googling and asking for help, I tried importing the query directly and surprisingly, it worked. Thanks! – Donnydonnybrook

Answer 2

I think the problem is the gql here:

.query({
    query: gql.GET_ALL_COUNTRIES
  })

It should be like this:

.query({
    query: GET_ALL_COUNTRIES
  })

gql is already inside the const:

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

Ajaajaccio

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Pigeonhearted