gql-tag-operations-preset and vscode typescript

[ryanto]

Hi there!

I'm using the gql-tag-operations-preset preset and it's working great!

However, one small thing I noticed is that when codegen updates the gql.ts file VSCode does not pick up the new types.

In order to get VSCode to see the new types I have to either....

• Open the gql.ts file
• Cmd+P + > restart typescript server.

Is there any recommended way to have VSCode detect the new types?

Fwiw, I looked into how prisma does this, and they have a plugin that watches the generated typescript file and restarts the tsserver whenever it changes: https://github.com/prisma/language-tools/blob/main/packages/vscode/src/plugins/prisma-language-server/index.ts#L59-L80

[charlypoly]

Hi @ryanto,

You are right, and this behavior is valid for all existing codegen plugins.
We don't have an existing solution or workaround for it, however, we will definitely look into providing a VSCode extension (or similar solution), and I added your request in the v3 roadmap: #8296.

[nandorojo]

Code.-.page.tsx.beatgig-v3.-.1.November.2022.mp4

I just fixed it by doing this.

1. Open VSCode settings.json and add the following:

  "typescript.tsserver.watchOptions": {
    "watchDirectory": "useFsEvents",
    "fallbackPolling": "dynamicPriorityPolling",
    "watchFile": "useFsEventsOnParentDirectory",
    "synchronousWatchDirectory": true,
    "excludeDirectories": ["**/node_modules/**/*"]
  }

I think you can exclude other directories there. I didn't do a big deep-dive into the significance of these settings, so maybe there is a better configuration. But this led to graphql-codegen --watch correctly updating in semi-realtime, and is faster than restarting the TS server.

If you have suggestions for improving the JSON settings here, let me know. I think that what I picked there may be slightly aggressive with polling. I still have to play with it.

excludeDirectories might belong in tsconfig.json's watchOptions too.

The TypeScript docs are here: https://www.typescriptlang.org/docs/handbook/configuring-watch.html

[charlypoly]

@nandorojo, I'll conduct some tests on this topic.

This config might work on your side because:

• you recently opened the generated files
• the generated files folder shares the same parent as your current component file

After testing this on my side, we'll move forward with documenting it and, if possible, automating it via the codegen cli.

[ryanto]

Just wanted to follow up on this, it seems to be working! Thanks @nandorojo you rock!