Mirror: TypeScript LSP plugin that finds GraphQL documents in your code and provides diagnostics, auto-complete and hover-information.
Update README.md (#115)
authored by
Fernando Rojo
and committed by
GitHub
55b09ff4
9b5a1d39
+73
-1
+73
-1
README.md
+73
-1
README.md
···
35
35
}
36
36
```
37
37
38
-
now restart your TS-server and you should be good to go
38
+
now restart your TS-server and you should be good to go, ensure you are using the
39
+
workspace version of TypeScript. In VSCode you can do so by clicking the bottom right
40
+
when on a TypeScript file or adding a file like [this](https://github.com/0no-co/GraphQLSP/blob/main/packages/example/.vscode/settings.json).
41
+
42
+
> If you are using VSCode ensure that your editor is using the Workspace Version of TypeScript
43
+
44
+
### Configuration
45
+
46
+
**Required**
47
+
48
+
- `schema` allows you to specify a url, `.json` or `.graphql` file as your schema. If you need to specify headers for your introspection
49
+
you can opt into the object notation i.e. `{ "schema": { "url": "x", "headers": { "Authorization": "y" } }}`
50
+
51
+
**Optional**
52
+
53
+
- `template` the shape of your template, by default `gql`
54
+
- `templateIsCallExpression` this tells our client that you are using `graphql('doc')`
55
+
- `disableTypegen` disables type-generation in general, this could be needed if offset bugs are introduced
56
+
- `scalars` allows you to pass an object of scalars that we'll feed into `graphql-code-generator`
57
+
- `extraTypes` allows you to specify imports or declare types to help with `scalar` definitions
58
+
- `shouldCheckForColocatedFragments` when turned on, this will scan your imports to find
59
+
unused fragments and provide a message notifying you about them
60
+
61
+
### GraphQL Code Generator client-preset
62
+
63
+
For folks using the `client-preset` you can ues the following config
64
+
65
+
```json
66
+
{
67
+
"compilerOptions": {
68
+
"plugins": [
69
+
{
70
+
"name": "@0no-co/graphqlsp",
71
+
"schema": "./schema.graphql",
72
+
"disableTypegen": true,
73
+
"templateIsCallExpression": true,
74
+
"template": "graphql"
75
+
}
76
+
]
77
+
}
78
+
}
79
+
```
80
+
81
+
## Fragment masking
82
+
83
+
When we use a `useQuery` that supports `TypedDocumentNode` it will automatically pick up the typings
84
+
from the `query` you provide it. However for fragments this could become a bit more troublesome, the
85
+
minimal way of providing typings for a fragment would be the following:
86
+
87
+
```tsx
88
+
import { TypedDocumentNode } from '@graphql-typed-document-node/core';
89
+
90
+
export const PokemonFields = gql`
91
+
fragment pokemonFields on Pokemon {
92
+
id
93
+
name
94
+
}
95
+
` as typeof import('./Pokemon.generated').PokemonFieldsFragmentDoc;
96
+
97
+
export const Pokemon = props => {
98
+
const pokemon = useFragment(props.pokemon, PokemonFields);
99
+
};
100
+
101
+
export function useFragment<Type>(
102
+
data: any,
103
+
_fragment: TypedDocumentNode<Type>
104
+
): Type {
105
+
return data;
106
+
}
107
+
```
108
+
109
+
This is mainly needed in cases where this isn't supported out of the box and mainly serves as a way
110
+
for you to case your types.
39
111
40
112
## Local development
41
113