Repository files navigation

This is a TypeScript LSP Plugin that will recognise documents in yourTypeScript code and help you out with hover-information, diagnostics andauto-complete.

• Hover information showing the decriptions of fields
• Diagnostics for adding fields that don't exist, are deprecated, missmatched argument types, ...
• Auto-complete inside your editor for fields
• Will warn you when you are importing from a file that is exporting fragments that you're not using

Note that this plugin does not do syntax highlighting, for that you still need something likethe VSCode/... plugin

npm install -D @0no-co/graphqlsp

Go to yourtsconfig.json and add

{"compilerOptions": {"plugins": [      {"name":"@0no-co/graphqlsp","schema":"./schema.graphql"      }    ]  }}

now restart your TS-server and you should be good to go, ensure you are using theworkspace version of TypeScript. In VSCode you can do so by clicking the bottom rightwhen on a TypeScript file or adding a file likethis.

If you are using VSCode ensure that your editor is usingthe Workspace Version of TypeScriptthis can be done by manually selecting it or adding a.vscode/config.json with the contents of

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

Required

• schema allows you to specify a url,.json or.graphql file as your schema. If you need to specify headers for your introspectionyou can opt into the object notation i.e.{ "schema": { "url": "x", "headers": { "Authorization": "y" } }}

Optional

• template add an additional template to the defaultsgql andgraphql
• templateIsCallExpression this tells our client that you are usinggraphql('doc') (default: true)when usingfalse it will look for tagged template literals
• shouldCheckForColocatedFragments when turned on, this will scan your imports to findunused fragments and provide a message notifying you about them (only works with call-expressions, default: true)
• trackFieldUsage this only works with the client-preset, when turned on it will warn you aboutunused fields within the same file. (only works with call-expressions, default: true)
• tadaOutputLocation when usinggql.tada this can be convenient as it automatically generatesanintrospection.ts file for you, just give it the directory to output to and you're done
• tadaDisablePreprocessing this setting disables the optimisation oftadaOutput to a pre-processed TypeScript type, this is off by default.
• clientDirectives this setting allows you to specify additionalclientDirectives which won't be seen as a missing schema-directive.

Currently the tracking unused fields feature has a few caveats with regards to tracking, first and foremostit will only track the result and the accessed properties in the same file to encouragefragment co-location.

Secondly, we don't track mutations/subscriptions as some folks will add additional fields to properly supportnormalised cache updates.

When we use auseQuery that supportsTypedDocumentNode it will automatically pick up the typingsfrom thequery you provide it. However for fragments this could become a bit more troublesome, theminimal way of providing typings for a fragment would be the following:

import{TypedDocumentNode}from'@graphql-typed-document-node/core';exportconstPokemonFields=gql`  fragment pokemonFields on Pokemon {    id    name  }`astypeofimport('./Pokemon.generated').PokemonFieldsFragmentDoc;exportconstPokemon=props=>{constpokemon=useFragment(props.pokemon,PokemonFields);};exportfunctionuseFragment<Type>(data:any,_fragment:TypedDocumentNode<Type>):Type{returndata;}

This is mainly needed in cases where this isn't supported out of the box and mainly serves as a wayfor you to case your types.

BigCommerce

WunderGraph

The Guild

BeatGig

Runpnpm i at the root. Openpackages/example by runningcode packages/example or if you want to leveragebreakpoints do it with theTSS_DEBUG_BRK=9559 prefix. When you make changes inpackages/graphqlsp all you needto do is runpnpm i in your other editor and restart theTypeScript server for the changes to apply.

Ensure that both instances of your editor are using the Workspace Version of TypeScript