"The query argument is unknown error" for query types generated by graphql-codegen

Question

I'm using Pothos to build a graphql schema and graphql-codegen to generate types based on this schema. The server runs via graphql-yoga and nextjs and the actual query works fine when run via the graphiql interface. I've been trying to set this up so my gql schema is typed properly with apollo client based on this article.

Snipped of the schema builder:

builder.queryType({
  fields: t => ({
    greetings: t.string({
      resolve: (root, args, context) => `Welcome ${context.session?.user?.nickname}`
    })
  })
})

graphql-codegen generates the following type in the written .ts file so I know it's seeing the right schema.

export type Query = {
  __typename?: 'Query';
  greetings: Scalars['String'];
}

However, when I import the gql file per the codegen docs, it returns unknown and VSCode's hover window says "The query argument is unknown! Please regenerate the types." I've tried regenerating and rebooting VSCode and nothing changes.

import { gql } from '@/gql/gql'

const query = gql('query { greetings }')

Swartz

Answer 1

Yes, as others mentioned, it was a problem with documents path in codegen.ts. I had my queries in .ts files, so I had to change my documents glob pattern to

documents: ["src/**/*.ts?(x)"],

And it's better to remove ignoreNoDocuments: true as it can mislead you.

Christcross

Answer 2

The issue for me was also where I specifying for codegen to look for my documents. The apollo documentation has you use

ignoreNoDocuments: true

in the codegen config which allows codegen to not-exit if it finds no documents. If you remove that config and run codegen you'll see Unable to find any GraphQL type definitions for the following pointers: - src/**/*.tsx

I couldn't figure out how to get codegen to find the queries I defined at the top of my component .tsx files but was able to get it to work by defining them in .graphql files and then pointing codegen to that directory using

documents: ["./graphql/**/*.graphql"],

This article has an explanation for how to do this -> https://novu.co/blog/making-graphql-codegen-work-for-you-graphql-integration-with-react-and-typescript/

Meras

Answer 3

What solved it for me was the documents setting in codegen.ts. I'm in a nextjs app with code in the pages folder but the example codegen.ts used src. After updating

  documents: ["src/**/*.tsx"],

to

  documents: ["pages/**/*.tsx"],

and regenerating I stopped getting the error.

Bourguiba

Answer 4

As other answers stated, this is definitely an issue with the supplied document paths. I want to share a misunderstanding I had about which documents to supply

I was supplying: documents: ["path/to/my/schema/and/resolver/definitions.ts"]

What codegen actually needs is: documents: ["path/to/files/acting/as/clients.ts"]

In other words, the file you supply should be the one that has this query:

'query { hello }'

NOT the one that has the query definition:

type Query {
  hello: String!
}

Sobriquet