Type file not being generated

[WonderPanda]

I've previously played around with @0no-co/graphqlsp on a project in order to get type checking through the TS language server, which worked great!

I'm really excited to play around with gql.tada now as the promise of type safe GQL without codegen has been something I've dreamed of for years! Incredible work you've been doing here 🙏

Following through the installation instructions though I can't seem to get the types to be generated using tadaOutputLocation

    "plugins": [
      {
        "name": "@0no-co/graphqlsp",
        "schema": {
          "url": "http://localhost:41182/v1/graphql",
          "headers": { "x-hasura-admin-secret": "secret" }
        },
        "tadaOutputLocation": "./src/graphql-env.d.ts"
      }
    ]

My GraphQL server is definitely up and running and other than the tadaOutputLocation this configuration has worked for me.

I've tried fully closing and restarting VsCode multiple times but still no luck

Are there any diagnostics or anything that I can review to try and figure out why the types file isn't being generated?

[JoviDeCroock]

Have you ensured that your VSCode is using the workspace TSVersion? If so you can enable TSLogging and open the TSServer log, there you can look for [GraphQLSP] and it should give you sufficient debug information, if you don't find any occurrences then that means you aren't using the workspace TypeScript version in your VSCode.

[WonderPanda]

I have a single library in my monorepo for which I actually configure the codegen tadaOutputLocation. I called that library @my-workspace/gql.tada and it exports the graphql function to be used by all other libraries.

The other libraries do need to configure the plugin in there tsconfig.lib.json but they do not need to specificy a tada output location or do any codegen. It is purely to get integration with the Typescript Language Server for autocomplete when authoring GQL.

[anirudhsama]

Hi @WonderPanda

Does auto complete work when you configure it this way? I'm getting errors and warnings, but none of the auto complete features seem to be working. I'm assuming the graphql.env.d.ts file is saved in the @my-workspace/gql.tada package?

[anirudhsama]

Hey, got it working, it was some configuration issue on my end.

[itsboogie]

so just to be clear, all you include in the consuming libraries tsconfig.lib.json is:

    "plugins": [
      {
        "name": "@0no-co/graphqlsp"
      }
    ]

because this is not working for me (auto complete works in the "providing" library [@my-workspace/gql.tada] but not in consuming libraries that only have the snippet above in their tsconfig :/

strangely enough the resulting types are correct, so i can technically use it and be typesafe, im just not getting autocomplete 😅

[kitten]

@itsboogie The config you've got in tsconfig is basically there to tell GraphQLSP how to interpret the queries (besides the CLI also using it)

So if you don't hoist the config to a tsconfig.json you extend from or duplicate it, then GraphQLSP won't (for example) have any information about your schema to actually function outside of your subpackage 👀

[igortas]

I'm having similar problem in monorepo, .env.d.ts file is not generated.

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

    "plugins": [
      {
        "name": "@0no-co/graphqlsp",
        "schema": "./schema.graphql",
        "tadaOutputLocation": "./src/graphql-env.d.ts"
      }
    ]

[kitten]

The plugin isn't loaded in your editor. If you have VSCode, make sure to follow the instructions in the note here: https://gql-tada.0no.co/get-started/installation#step-1-%E2%80%94-installing-packages

VSCode won't load any TypeScript plugins unless it's set to use "the workspace version of TypeScript" (fancy phrase they use to say, the local TypeScript installation in your node_modules folder)

Without the tsconfig.json being set up (which gql-tada doctor can check for you) and without VSCode (or another editor with TypeScript support) having loaded the plugin, no auto-completions, diagnostics, or hover info will show up for GraphQL strings.

[Mingyang-Li]

I did follow the steps and ran npx gql-tada doctor, here's the output:

C:\Users\FOLDER\my_monorepo\packages\frontend>npx gql-tada doctor
┏  Doctor 
┃ Detects problems with your setup
┃
┣ ✔ Checking TypeScript version
┃
┣ ✔ Checking installed dependencies
┃
┣ ✔ Checking tsconfig.json
┃
┗ ✔ Checking schema

 Done  You are all set and ready to go.

I my .vscode/ folder (root folder, not the client app folder), I have this in my settings.json:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

My /packages/frontend/tsconfig.json:

{
  "extends": "tsconfig/base.json",
  "compilerOptions": {
    //vite config
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "module": "ES2022",
    "moduleResolution": "Node",

    "sourceMap": true,
    "inlineSources": true,

    // gql.tada config
    "plugins": [
      {
        "name": "@0no-co/graphqlsp",
        "schema": "../backend/src/schema.graphql",
        "tadaOutputLocation": "./src/graphql-env.d.ts"
      }
    ],

    // Standard project config
    "declaration": false,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

What do you see I'm doing wrong?

[kitten]

@Mingyang-Li: Most likely, seeing that only /packages/frontend/tsconfig.json has been edited, could it be that you're opening your editor in the root of your workspace and only the root tsconfig.json is being picked up by your editor?

[Mingyang-Li]

Potentially... lemme try only opening the project folder in my editor and see if autocompletion comes up.

[Mingyang-Li]

Here' s my root tsconfig.json:

{
  "compilerOptions": {
    // gql.tada config
    "plugins": [
      {
        "name": "@0no-co/graphqlsp",
        "schema": "./packages/backend/src/schema.graphql",
        "tadaOutputLocation": "./packages/frontend/src/graphql-env.d.ts"
      }
    ],
  }
}

I've kept my frontend tsconfig file as it was.

No autocompletion.

I also tried only opening the frontend project folder just to see if my editor picks up the frontend tsconfig file, it didn't. I'm still not getting syntax highlighting nor am I getting autocomplete