"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 }')

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.

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/