Generated file uses skipToken import incorrectly in Next.js App Router

Question

I’m using Apollo Client v4 (4.0.5) with Next.js App Router and GraphQL Code Generator (typescript-react-apollo) to generate TypeScript types and hooks for my GraphQL API.

Everything was working fine until I recently added some queries/mutations on the backend and regenerated my GraphQL types. Now, the generated code fails to compile with the following error:

Export skipToken doesn't exist in target module
  1 | import { gql } from '@apollo/client';
> 2 | import * as Apollo from '@apollo/client';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | export type Maybe<T> = T | null;
  4 | export type InputMaybe<T> = Maybe<T>;

The export skipToken was not found in module .../@apollo/client/core/index.js [app-client] (ecmascript).

If I manually edit the file after generation to destructure skipToken like this, it works fine:

import * as Apollo from '@apollo/client/react';
const { skipToken } = Apollo;

here is my codegen config:

overwrite: true
schema: 'http://localhost:5000/graphql'
documents: 'src/graphql/**/*.graphql'
generates:
  src/graphql/generated/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'
    config:
      withHooks: true
      withComponent: false
      withHOC: false
      skipTypename: false
      # Tried disabling but didn't help:
      # withSkipToken: false
      # reactApolloVersion: 3

So why does GraphQL Codegen generate a broken skipToken import when using Apollo v4 in Next.js App Router and how can I configure typescript-react-apollo so it does not generate skipToken imports at all (or generates them in a working way)?

Apollo Client v4 had various breaking changes, and skipToken is now exported from @apollo/client/react. The codegen and plugins may or may not have been updated yet -- what versions are you using? See also the warnings at the-guild.dev/graphql/codegen/plugins/typescript/… — agilgur5
– agilgur5, Commented Sep 27 at 19:04
im using Apollo client v4.0.5, also these "@graphql-codegen/cli": "^6.0.0", "@graphql-codegen/typescript": "^5.0.0", "@graphql-codegen/typescript-operations": "^5.0.0", "@graphql-codegen/typescript-react-apollo": "^4.3.3", and as i said, manually changing the import to @apollo/client/react didnt change a thing. — kslmn
– kslmn, Commented Sep 27 at 21:13
Please edit that into a code block in the question. You said that manually changing it works in your question, "If I manually edit the file after generation to destructure skipToken like this, it works fine", but now you are saying it "didn't change a thing" -- which one is it? — agilgur5
– agilgur5, Commented Sep 27 at 21:29
sorry if my wording was confusing. what i meant was only changing the import from @apollo/client to @apollo/client/react didnt change a thing. what actually worked was doing const { skipToken } = Apollo; and using skipToken everywhere instead of the generated Apollo.skipToken. and since we'll have to regenerate each time there's a schema change, it'd be tiresome to do this always. — kslmn
– kslmn, Commented Sep 28 at 0:02
I confirm this is apollo client v4 breaking change. "The following is a list of exports available in @apollo/client that should now import from @apollo/client/react." github.com/apollographql/apollo-client/blob/main/CHANGELOG.md This is a confidentiality loss as I'm using this codegen (GraphQL Code Generator) for last 4 years without issue, I hope they will still maintain this, and I expected them to keep up-to-date with @apollo/client (v4). For solution, I just added a custom script that loads generated file, edits it to fix imports and is run as part of my (yarn gen) script. — justdvl
– justdvl, Commented Oct 1 at 12:52

agilgur5 · Accepted Answer · 2025-10-11 13:58:04Z

3

I'm also waiting for a fix. I have the following afterAllFileWrite hook to fixup my output file as a workaround:

hooks:
  afterAllFileWrite:
    - sed -i "s|Apollo from '@apollo/client'|Apollo from '@apollo/client/react'|g"

This rewrites

import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';

to

import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client/react';

edited Oct 11 at 13:58

agilgur5

2,0464 gold badges49 silver badges70 bronze badges

answered Oct 6 at 8:25

digitalacorn

2243 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generated file uses skipToken import incorrectly in Next.js App Router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related