useQuery typing not working without @graphql-typed-document-node

Client SDKs
1

I followed various tutorials to setup generating types using codegen, such as TypeScript with Apollo Client - Apollo GraphQL Docs. Everything was working great.

Then, I noticed that @graphql-typed-document-node/core was marked as deprecated. I did some research and found that @graphql-codegen/client-preset now covered the necessary functionality, as long as you are not using the component <Query>.

I uninstalled @graphql-typed-document-node/core and then the typing of the variable data returned by useQuery was no longer working. Even in the Apollo Odyssey instructions for setting up codegen, @graphql-typed-document-node/core is not a listed dependency. Codegen with GraphQL, Typescript, and Apollo.

Is there some other configuration value I need to add for preset for this to work? I am using NextJS 15 and @apollo/client-integration-nextjs. Maybe that is part of the problem?

Here are the packages I am using for my application:

  "dependencies": {
    "@apollo/client": "^3.13.8",
    "@apollo/client-integration-nextjs": "^0.12.2",
    "graphql": "^16.11.0",
    "next": "^15.3.3",
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^5.0.7",
    "@graphql-codegen/client-preset": "^4.8.2",
    "@parcel/watcher": "^2.5.1",
    "@types/node": "22.15.30",
    "@types/react": "19.1.7",
    "eslint": "^9.28.0",
    "eslint-config-next": "15.3.3",
    "typescript": "5.8.3"
  }

Any help would be greatly appreciated!

2

Hey @JakeOTooleDev :waving_hand:

Would you mind going into more detail on what you mean by “not working”? Is the type incorrect? Is TypeScript giving you errors? Any more detail including a sample query how you’re passing around types would help. Thanks!

3

Ah yes, that would probably help haha.

Here is a query:

import { gql } from "@/__generated__";

export const ListFeedsQuery = gql(`
  query ListFeedsQuery {
    listFeeds {
      feeds {
        id
        activeRevisionID
      }
    }
  }
`);

Here is a component:

"use client";
import { ListFeedsQuery } from "@/graphql/ListFeedsQuery";
import { useQuery } from "@apollo/client";

export const Feeds = () => {
  const { data, loading, error } = useQuery(ListFeedsQuery);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <ul>
        {data?.listFeeds.feeds.map((feed) => (
          <li>{feed.id}</li>
        ))}
      </ul>
    </div>
  );
};

When @graphql-typed-document-node/core is installed, the TS Server recognizes that data has the type ListFeedsQueryQuery | undefined. When the package is not installed, the TS Server is showing data as type any.

For example, feed is being highlighted as a TS error because it has type any. If I have the package installed, feed has proper typing.

In both cases, TS registers that ListFeedsQuery has the type TypedDocumentNode<ListFeedsQueryQuery, Exact<{[key: string]: never; }>>. Something with how the returned values of useQuery being typed is messed up. I can import ListFeedsQueryQuery and do useQuery<ListFeedsQueryQuery>(ListFeedsQuery) to get the same result. It just seems like that shouldn’t be necessary, based on the examples I’ve seen.

4

Ok so it looks like currently Apollo Client relies on TypedDocumentNode from @graphql-typed-document-node/core as well: apollo-client/src/core/types.ts at cacb4e11c2c5b873510f66926cfe4e15ccfd3fb5 · apollographql/apollo-client · GitHub. If this is deprecated, then… thats not good.

Do you mind showing me where you see it deprecated? I don’t see it as such in npm, but perhaps I’m looking in the wrong place.

That TypedDocumentNode type is what useQuery uses to infer TData, so if that generated gql function is returning something not compatible with TypedDocumentNode, then it won’t be able to infer correctly.

I don’t recall having issues with this at any point in the past, but I also haven’t tried the client preset recently. By chance can you put this in a runnable reproduction for us? I’d like to dig in a little further.

5

Digging a little deeper, it looks like the client preset uses the @graphql-codegen/typed-document-node plugin (ref) which looks like it imports from @graphql-typed-document-node/core.

This seems to be a dependency of the client preset already so its strange to me its not working on your end. Can you double check your node_modules to see if that package is there at all? Perhaps by uninstalling it you’re removing it entirely?

6

First, thanks for doing all this digging @jerelmiller. I went down a similar path yesterday. I went to go build my Next app and got a failure because it couldn’t find the node module @graphql-codegen/typed-document-node. I looked into @graphql-codegen/client-present and found that document-node is a dependency. I’m guessing that’s more what other spots on the internet are referring to, that you no longer need to install it because its a dependency. Even @apollo/client has it as a dependency.

I’m starting to wonder if my issue is something with my package manager. I’m using pnpm and I’ve tried:

  • deleting the node_module directory and pnpm i
  • deleting pnpm-lock.yaml and running pnpm i
  • running the pnpm upgrade command

It is an older version and I have it lower to run another application of ours. I’m going to try to update my version of pnpm and see if the resulting node modules shake out correctly.

Sorry for the confusing bug chasing.

7

No worries! I hope you figure it out!