Client preset doesn't generate React hooks for Apollo Client

[wujekbogdan]

I'm trying to migrate my old config to client preset

Old config:

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

const cfg: CodegenConfig = {
  schema: 'http://my.schema',
  generates: {
    "generated/graphql.ts": {
      documents: ["pages/**/*.graphql"],
      plugins: ["typescript", "typescript-operations", "typescript-graphql-request", "typescript-react-apollo"],
    },
  },
};

export default cfg;

New config:

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

const cfg: CodegenConfig = {
  schema: 'http://my.schema',
  generates: {
    "generated/": {
      preset: 'client',
      documents: ["pages/**/*.graphql"],
    },
  },
};

export default cfg;

The docs for @graphql-codegen/typescript-react-apollo say that:

We now recommend using the client-preset package for a better developer experience and smaller impact on bundle size.

So I assumed that the client preset will generate React hooks, out of the box, but it doesn't work this way. Hooks are not generated even if I force withHooks: true via config (even though it should be true by default).

[javiercr]

Got the exact same issue today! The docs are not clear on whether it is possible to generate Apollo client hooks with the new client-preset

[Urigo]

Why do you need to generate hooks and not use client-preset's TypedDocumentNode?

[araphiel-nf]

@Urigo @charlypoly

It's really hard to find any chatter (docs, blog, twitter) about why the client-preset is considered better DX.
Can you or anyone share any insights on what DX gains can be gained by adopting it?

[araphiel-nf]

cc @n1ru4l

[n1ru4l]

Maybe this helps? https://m.youtube.com/watch?v=BpbkFr2udAY

[jbcrestot]

I found a way to make the latest version of codegen work as before.

It's kind of stupid but, if you just ignore client preset and transpose the config like that :

generates: {
    "./types/graphql.ts": {
      plugins: ["typescript", "typescript-operations", "typescript-react-apollo"],
    },
  },

it works like a charm.

[wujekbogdan]

Yeah, plugins work as expected. The issue I'm talking about here is that with the client preset, it's not possible to replicate the same functionality, even though the docs suggest that the client preset should be used by default rather than plugins.

[Urigo]

Why do you need to generate hooks and not use client-preset's TypedDocumentNode?

[wujekbogdan]

I don't because I encountered issues described in this thread. But that was the first thing I tried, as the docs explicitly say that client-preset is the recommended way:

We recommend using a client preset that has a recommended configuration for the client applications. It's included in the @graphql-codegen/cli package by default. Follow one of the following guides to learn more