The query argument is unknown! Please regenerate the types.

[kaliaparijat]

Hello, I am trying to leverage GraphQL code-gen for my React application (typescript, apollo). This is what the config object looks like in my codegen file:

const config: CodegenConfig = {
  overwrite: true,
  schema: path.join(__dirname, "./schema.graphql"),
  documents: ["src/**/*.tsx", "src/**/*.ts"], // All queries are under "src/queries/*.ts". 
  generates: {
    "src/queries/__generated__/": {
      preset: "client",
      plugins: ["typescript"],
    },
    "./graphql.schema.json": {
      plugins: ["introspection"],
    },
  },
};

This generates the anticipated files including the gql file. There are 14 queries in total, and thus the gql file has 14 overloads for the generated graphql function. However, the very first graphql function definition looks like this:

 * @example
 * ```ts
 * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
 * ```
 *
 * The query argument is unknown!
 * Please regenerate the types.
 */
export function graphql(source: string): unknown;

{...14 other graphql function overloads }

As the comment indicates, the original has a type unknown. I am not able to use this, because Apollo's useQuery hooks complain about a type mismatch and suggest:
Argument of type 'unknown' is not assignable to parameter of type 'DocumentNode | TypedDocumentNode<any, {...queryVariables }>'..

What am I doing wrong here? An arbitrary example of how my queries have been written is listed below:

import { graphql } from "./__generated__"; 
export const GET_DATA = graphql(`
  query getData($Criteria: CriteriaInputType) {
    dataSet(criteria: $Criteria) {
          pagedResult {
              ...FragmentTypeA
              ...FragmentTypeB
          }
    },
    validations {
      key
      value
    }
  }
  ...FragmentTypeA,
  ...FragmentTypeB
`);

[Mohamedemad4]

I ran into this issue this morning.
After some time with it I figured there are things that codegen looks for like:

• Using `` around your gql queries.
• A comment with the text GraphQL.
  /* GraphQL */ `your gql here`

A useful tip for debugging is to set ignoreNoDocuments to false in the codegen config.
This will make it crash if it can't find your queries in your documents.

Cheers!