How to get Apollo gql codgen to work with frontend nextJS

Question

I am using nextJS, I want my front end react queries with apollo to be typed out, but no configuration is working. I get an unknown error on my query when I use import {gql} from src/__generated__/gql and the following message when I hover over gql():

The query argument is unknown! Please regenerate the types

My question is do I need to do something different because I am using nextJS? I want to be able to use TypeScript with Apollo Client code gendocs so my gql queries will be typed

My entire pothos schema is in my pages/api/index.ts file (I do not yet know how to spread this code out into multiple files)

Example Query:

const CREATED_EVENT_QUERY = gql(`
    query EventById($id: mongoId!) {
        eventById(id: $id) {
            _id
            name
            description
            location{
              coordinates
            }
            date
            eventApplicants{
            name
            userId
            weight
          }
        link
        weights{
          weight
          spotsAvailable{
            name
            userId
          }
        }
        }
    }
            `);

// Apollo Query

    const { loading, error, data } = useQuery(CREATED_EVENT_QUERY, {
        variables: {
            id: params.id
        }
    });

I have tried the following configurations:

Apollos recommendation

Link Above

import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
    schema: 'http://localhost:3000/api',
    documents: ['*.ts'],
    generates: {
        './src/__generated__/': {
            preset: 'client',
            plugins: [],
            presetConfig: {
                gqlTagName: 'gql',
            }
        }
    },
    ignoreNoDocuments: true,
};

export default config;

the guilds nextJS recomendation

import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
 // ...
 generates: {
 'path/to/file.ts': {
 plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
 config: {
 reactApolloVersion: 3
 }
 }
 }
}
export default config

combination of the two

import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
    schema: 'http://localhost:3000/api',
    documents: ['*.ts'],
    generates: {
        'pages/api/index.ts': {
            plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
            config: {
                reactApolloVersion: 3
            }
        }
    },
    ignoreNoDocuments: true,
};

export default config;

Sorry @StephenFong forgot to post the solution sooner. I posted answer below please lmk if that works for you — Wayne, Apr 27 '23 at 17:57

Stephen Fong · Answer 1 · 2023-05-06T05:30:27.293

I found out the reason why I was facing the problem. This was my previous configuration object.

const config: CodegenConfig = {
  schema: 'http://localhost:3000/bff/graphql',
  documents: ['src/**/*.tsx'],
  generates: {
    './src/__generated__/': {
      preset: 'client',
      plugins: [],
      presetConfig: {
        gqlTagName: 'gql',
      },
    },
  },
  ignoreNoDocuments: true,
};

This is the configuration object that works. The reason for that is I was writing custom React hooks and I included the code in *.ts files. However, I wasn't including *.ts files in the config file. That's why it's not working even if I tried recompiling.

const config: CodegenConfig = {
  schema: 'http://localhost:3000/bff/graphql',
  documents: ['src/**/*.ts', 'src/**/*.tsx'],
  generates: {
    './src/__generated__/': {
      preset: 'client',
      plugins: [],
      presetConfig: {
        gqlTagName: 'gql',
      },
    },
  },
  ignoreNoDocuments: true,
};

Wayne · Accepted Answer · 2023-04-27T21:21:20.360

Your config file should look as follows:

This assumes that your graphql server is at api/index.ts

// in the root of your project

import { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: "http://localhost:3000/api",
  documents: ["app/**/*.tsx", "!pages/api/index.ts"],
  generates: {
    "./src/__generated__/": {
      preset: "client",
      plugins: [],
      presetConfig: {
        gqlTagName: "gql",
      },
    },
  },
  ignoreNoDocuments: true,
};

export default config;

Then you should add the following to your package.json:

  "scripts": {
       "compile": "graphql-codegen",
    "watch": "graphql-codegen --w"
  },

Then to to use the typed gql query object import it as follows:

Please note that you must update the import so that your path to the src folder is correct

import {gql} from "src/__generated__"