This is a TypeScript LSP Plugin that will recognise documents in your TypeScript code and help you out with hover-information, diagnostics, auto-complete and automatically generating Typed-Document-nodes
- 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
- When you save it will generate
typed-document-nodes
for your documents and cast them to the correct type - 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 like the VSCode/... plugin
npm install -D @0no-co/graphqlsp
Go to your tsconfig.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 the workspace version of TypeScript. In VSCode you can do so by clicking the bottom right when on a TypeScript file or adding a file like this.
If you are using VSCode ensure that your editor is using the Workspace Version of TypeScript this 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 introspection you can opt into the object notation i.e.{ "schema": { "url": "x", "headers": { "Authorization": "y" } }}
Optional
template
the shape of your template, by defaultgql
templateIsCallExpression
this tells our client that you are usinggraphql('doc')
disableTypegen
disables type-generation in general, this could be needed if offset bugs are introducedscalars
allows you to pass an object of scalars that we'll feed intographql-code-generator
extraTypes
allows you to specify imports or declare types to help withscalar
definitionsshouldCheckForColocatedFragments
when turned on, this will scan your imports to find unused fragments and provide a message notifying you about them
For folks using the client-preset
you can ues the following config
{
"compilerOptions": {
"plugins": [
{
"name": "@0no-co/graphqlsp",
"schema": "./schema.graphql",
"disableTypegen": true,
"templateIsCallExpression": true,
"template": "graphql"
}
]
}
}
When we use a useQuery
that supports TypedDocumentNode
it will automatically pick up the typings
from the query
you provide it. However for fragments this could become a bit more troublesome, the
minimal way of providing typings for a fragment would be the following:
import { TypedDocumentNode } from '@graphql-typed-document-node/core';
export const PokemonFields = gql`
fragment pokemonFields on Pokemon {
id
name
}
` as typeof import('./Pokemon.generated').PokemonFieldsFragmentDoc;
export const Pokemon = props => {
const pokemon = useFragment(props.pokemon, PokemonFields);
};
export function useFragment<Type>(
data: any,
_fragment: TypedDocumentNode<Type>
): Type {
return data;
}
This is mainly needed in cases where this isn't supported out of the box and mainly serves as a way for you to case your types.
Run pnpm i
at the root. Open packages/example
by running code packages/example
or if you want to leverage
breakpoints do it with the TSS_DEBUG_BRK=9559
prefix. When you make changes in packages/graphqlsp
all you need
to do is run pnpm i
in your other editor and restart the TypeScript server
for the changes to apply.
Ensure that both instances of your editor are using the Workspace Version of TypeScript