Support graphql-request v7 for @graphql-codegen/typescript-graphql-request

[Cretezy]

Is your feature request related to a problem? Please describe.

@graphql-codegen/typescript-graphql-request requires graphql-request @ ^6.0.0.

Describe the solution you'd like

Support for v7: https://github.com/jasonkuhrt/graphql-request/releases/tag/7.0.0

Describe alternatives you've considered

Downgraded to v6 of graphql-request for now.

[magidandrew]

This is still an issue for me

[Danielvandervelden]

Still an issue

[AlanBreck]

Issue for me too.

[maxpain]

and for me

[MoscoviumAlchemist]

bump

[nrutman]

@dotansimha (or other core contributors), this issue has now been open for almost a year. Are there any plans to upgrade the code generator to use the most recent major release of graphql-request? Or are there known blockers so that others can try to contribute?

These code generator packages are fantastic…I'd love to see them embrace the latest version of their main dependencies.

[eddeee888]

Hi all 👋 I'm from the Codegen team, and looking into this now. Could you please let me know what is not working? I've tried using this plugin with graphql-request v7 and it works fine.

The only thing that was a warning for me is the peerDep warning, but didn't stop me from installing using yarn. Is there something I'm missing? Keen to understand the requirements to fix it in one go 🙂

[nrutman]

@eddeee888 I have not come up against any errors simply because of the peer dependency. I consider a package outside of its stated peer dependencies as "unsupported" since the package owners are telling us it has a certain dependency.

If updating that field in package.json is all it takes, great! I just assumed that the package owners would want to run it through some tests or something. 🤷

[ldrick]

I am using in our projects also latest version right now with npm by overriding in package.json:

{
    "devDependencies": {
        "graphql-request": "^7.1.2",
    },
    "overrides": {
        "@graphql-codegen/typescript-graphql-request": {
            "graphql-request": "$graphql-request"
        }
    }
}

until now, I didn't discover any issues. I would still love to see official support by being within proper peer-deps range and without overrides.

[MoscoviumAlchemist]

I'm not sure if this is related, but when I try to use preset: "client", and the "@graphql-codegen/typescript-graphql-request" plugin, I end up with all kinds of duplicated types and errors. Has anyone been able to get the sdk working alongside preset: "client"? Can you share your codegen.ts configuration?

[eddeee888]

Thanks for sharing your workaround @nrutman @ldrick !

I'm very close to finalising the update here. Hopefully we will release this week!

---

Hi @MoscoviumAlchemist , If you use preset: "client", you won't need to use @graphql-codegen/typescript-graphql-request.

Here's the codegen setup:

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

const config: CodegenConfig = {
  schema: "src/**/*.graphqls",
  documents: "src/**/*.ts",
  ignoreNoDocuments: true,
  generates: {
    "./src/gql/": {
      preset: "client",
    },
  },
};

export default config;

And here's an example integration:

import { GraphQLClient } from "graphql-request";
import { graphql } from "./gql";

const doc = graphql(/* GraphQL */ `
  query Test {
    book(id: "2") {
      id
    }
  }
`);

const client = new GraphQLClient("http://localhost:4488/graphql");

client
  .request(doc)
  .then((response) => {     // response is fully typed!
    console.log(response);
  })
  .catch(console.error);

[MoscoviumAlchemist]

@eddeee888 but just to clarify, your example is how I see the client preset working without the SDK. The SDK has a completely different API. So for instance, with the SDK, the query is defined in a *.graphql file and I can load up a client and use it with minimal code, like this:

const client = getClientWithSdk();
const res = client.Test({id: "2"});
console.log(res?.id); // also typed

[eddeee888]

Yes, that's correct @MoscoviumAlchemist. The client preset is designed to have GraphQL operations and fragments in .ts files, instead of .graphql file. Is using .graphql be a blocker for you to switch over to client preset?

[MoscoviumAlchemist]

My question was whether the SDK can be used with client preset, or whether they are considered completely different paradigms. I tried to play around with fragment masking but I don't want to abandon the SDK.

But yes, I definitely prefer to have operations and fragments within a separate .graphql file or files. GraphQL queries and mutations are most definitely not Typescript :)

Maybe there's something about these configurations that I'm just not understanding.

[eddeee888]

I tried to play around with fragment masking but I don't want to abandon the SDK. But yes, I definitely prefer to have operations and fragments within a separate .graphql file or files. GraphQL queries and mutations are most definitely not Typescript :)

I see, thanks for the feedback and sharing your preferences @MoscoviumAlchemist ! I'll bring this back to the team.

My question was whether the SDK can be used with client preset, or whether they are considered completely different paradigms

Client Preset and SDK currently follow different approaches on where the GraphQL doc should live (and the implementation follows)

[eddeee888]

Good news! @graphql-codegen/[email protected] is released with correct peerDeps!

Also, [email protected] is released to be backwards compatible with graphql@15

I'll close this now. Thank you everyone for reporting and helping me understand the issue!

[nrutman]

This is fantastic, @eddeee888. Thank you so much!