"Error: Query cannot be executed. The request does not include a query neither in the body nor in the query string"

[sandervspl]

Strange issue. Can't find anything with google so I will try here. The following setup throws the error in the title. I have tested the query, it works just fine in Postman and GraphiQL

operations.graphql

query getAllUsers {
  userCollection {
    items {
      name
      birthdate
    }
  }
}

codegen.yml

schema:
  - https://graphql.contentful.com/content/v1/spaces/<id>:
      headers:
        Authorization: 'Bearer <token>'
documents: './src/**/*.graphql'
generates:
  ./src/queries/generated.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-query
    config:
      exposeFetcher: true
      exposeQueryKeys: true
      fetcher:
        endpoint: 'https://graphql.contentful.com/content/v1/spaces/<id>'
        fetchParams:
          headers:
            Authorization: 'Bearer <token>'

In the component:

const Page: i.NextPageComponent = () => {
  const { data } = useGetAllUsersQuery();
  ...
}

This is the request payload that I can see in my browser terminal. Is this right?

{"query":"\n    query getAllUsers {\n  userCollection {\n    items {\n      name\n      birthdate\n    }\n  }\n}\n    "}

[sandervspl]

I found the issue, and I will leave this discussion for anyone else experiencing this issue in the future.

I forgot to add the content-type header.

With this codegen file it works

schema:
  - https://graphql.contentful.com/content/v1/spaces/<id>:
      headers:
        Authorization: 'Bearer <token>'
documents: './src/**/*.graphql'
generates:
  ./src/queries/generated.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-query
    config:
      exposeFetcher: true
      exposeQueryKeys: true
      fetcher:
        endpoint: 'https://graphql.contentful.com/content/v1/spaces/<id>'
        fetchParams:
          headers:
            Content-Type: 'application/json'
            Authorization: 'Bearer <token>'

[Urigo]

@sandervspl do you think we should mention something about it in the docs for others who might follow the same path?

[sandervspl]

With the increasing popularity of Contentful, that might be useful yes!

[Urigo]

@sandervspl are you up to create a Pull Request to improve our docs on that matter?

[MarcoFernandesApside]

Had too many problems configuring this, here it is what I've done:

1. Install all of those libs:
   npm install graphql
   npm install dotenv
   npm install -D @graphql-codegen/cli
   npm install -D @graphql-codegen/typescript-react-query
   npm install @graphql-codegen/typescript
   npm install @graphql-codegen/typescript-operations

Create file 'codegen.yaml' with this config:

overwrite: true
schema: 
  - https://graphql.contentful.com/content/v1/spaces/(Space ID)/environments/(Environment):
      headers:
        Authorization: 'Bearer (Content Delivery API - Access token)'
documents: './src/queries/*.graphql'
generates:
  ./src/graphql/generated.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-query
    config:
      addInfiniteQuery: true
      exposeFetcher: true
      exposeQueryKeys: true
      fetcher:
        endpoint: https://graphql.contentful.com/content/v1/spaces/(Space ID)/environments/(Environment)
        fetchParams:
          headers:
            Content-Type: 'application/json'
            Authorization: 'Bearer (Content Delivery API - Access token)'

Add this script to 'package.json':

"scripts": {
    "gen": "graphql-codegen --config codegen.yaml --require dotenv/config"
  }

Finally:
npm run gen

Hope this helps someone.