search

dotansimha / graphql-code-generator

A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.
https://the-guild.dev/graphql/codegen/
MIT License
10.82k stars 1.33k forks source link

Graphql codegen client preset not working with pnpm. #8601

Closed xoldd closed 1 year ago

xoldd commented 1 year ago

Which packages are impacted by your issue?

No response

Describe the bug

I followed the instructions on official graphql codegen website to set it up client side with next.js and urql. But the types don't seem to be generated properly or work.

Your Example Website or App

https://github.com/xoldyckk/graphql_codegen_urql

Steps to Reproduce the Bug or Issue

  1. Go to this link and fork the project.
  2. Change directory into the forked folder. There are two folders client and server.
  3. Install their dependencies and run the dev command for server.
  4. Go to client folder and run the generate npm script to generate graphql codegen types for client.
  5. Go to pages/index.tsx and checkout the helloQueryDocument implementation and its usage with urql's useQuery hook. The type definitions are not inferred.

Expected behavior

Expected behaviour is to have full type safety with the query variables and the expected type of fetched data.

Screenshots or Videos

server codegen incorrect_types

Platform

Codegen Config File

![Uploading codegen.png…]()

Additional context

The generated code was using a package named @graphql-typed-document-node/core which was showing an error because the package was not installed. Cannot find module '@graphql-typed-document-node/core' or its corresponding type declarations. When I installed the package manually the typings started to work. Though this is a nice hack I'd like it if that package was downloaded by itself with graphql codegen package or it should be listed in the documentation to install that package. Thanks.

charlypoly commented 1 year ago

Hi @xoldyckk,

Thank you for your spotting this! 🦅 You are right; it seems that pnpm only resolves types from direct dependencies, so you will need to add @graphql-typed-document-node/core as a dependency of your client/ project.

I'm opening a follow-up issue to update the documentation on this matter.

xoldd commented 1 year ago

That's good.