commit 55b09ff4871506f56ea9caa5e9cb64565f8d6573 · kitten.sh/graphqlsp

+73 -1
README.md
···

       35
       35
        
       }

     

       36
       36
        
       ```

     

       37
       37
        
       

     

       38
       38
       -
       now restart your TS-server and you should be good to go

     

       38
       38
       +
       now restart your TS-server and you should be good to go, ensure you are using the

     

       39
       39
       +
       workspace version of TypeScript. In VSCode you can do so by clicking the bottom right

     

       40
       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
       41
       +
       

     

       42
       42
       +
       > If you are using VSCode ensure that your editor is using the Workspace Version of TypeScript

     

       43
       43
       +
       

     

       44
       44
       +
       ### Configuration

     

       45
       45
       +
       

     

       46
       46
       +
       **Required**

     

       47
       47
       +
       

     

       48
       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
       49
       +
         you can opt into the object notation i.e. `{ "schema": { "url": "x", "headers": { "Authorization": "y" } }}`

     

       50
       50
       +
       

     

       51
       51
       +
       **Optional**

     

       52
       52
       +
       

     

       53
       53
       +
       - `template` the shape of your template, by default `gql`

     

       54
       54
       +
       - `templateIsCallExpression` this tells our client that you are using `graphql('doc')`

     

       55
       55
       +
       - `disableTypegen` disables type-generation in general, this could be needed if offset bugs are introduced

     

       56
       56
       +
       - `scalars` allows you to pass an object of scalars that we'll feed into `graphql-code-generator`

     

       57
       57
       +
       - `extraTypes` allows you to specify imports or declare types to help with `scalar` definitions

     

       58
       58
       +
       - `shouldCheckForColocatedFragments` when turned on, this will scan your imports to find

     

       59
       59
       +
         unused fragments and provide a message notifying you about them

     

       60
       60
       +
       

     

       61
       61
       +
       ### GraphQL Code Generator client-preset

     

       62
       62
       +
       

     

       63
       63
       +
       For folks using the `client-preset` you can ues the following config

     

       64
       64
       +
       

     

       65
       65
       +
       ```json

     

       66
       66
       +
       {

     

       67
       67
       +
         "compilerOptions": {

     

       68
       68
       +
           "plugins": [

     

       69
       69
       +
             {

     

       70
       70
       +
               "name": "@0no-co/graphqlsp",

     

       71
       71
       +
               "schema": "./schema.graphql",

     

       72
       72
       +
               "disableTypegen": true,

     

       73
       73
       +
               "templateIsCallExpression": true,

     

       74
       74
       +
               "template": "graphql"

     

       75
       75
       +
             }

     

       76
       76
       +
           ]

     

       77
       77
       +
         }

     

       78
       78
       +
       }

     

       79
       79
       +
       ```

     

       80
       80
       +
       

     

       81
       81
       +
       ## Fragment masking

     

       82
       82
       +
       

     

       83
       83
       +
       When we use a `useQuery` that supports `TypedDocumentNode` it will automatically pick up the typings

     

       84
       84
       +
       from the `query` you provide it. However for fragments this could become a bit more troublesome, the

     

       85
       85
       +
       minimal way of providing typings for a fragment would be the following:

     

       86
       86
       +
       

     

       87
       87
       +
       ```tsx

     

       88
       88
       +
       import { TypedDocumentNode } from '@graphql-typed-document-node/core';

     

       89
       89
       +
       

     

       90
       90
       +
       export const PokemonFields = gql`

     

       91
       91
       +
         fragment pokemonFields on Pokemon {

     

       92
       92
       +
           id

     

       93
       93
       +
           name

     

       94
       94
       +
         }

     

       95
       95
       +
       ` as typeof import('./Pokemon.generated').PokemonFieldsFragmentDoc;

     

       96
       96
       +
       

     

       97
       97
       +
       export const Pokemon = props => {

     

       98
       98
       +
         const pokemon = useFragment(props.pokemon, PokemonFields);

     

       99
       99
       +
       };

     

       100
       100
       +
       

     

       101
       101
       +
       export function useFragment<Type>(

     

       102
       102
       +
         data: any,

     

       103
       103
       +
         _fragment: TypedDocumentNode<Type>

     

       104
       104
       +
       ): Type {

     

       105
       105
       +
         return data;

     

       106
       106
       +
       }

     

       107
       107
       +
       ```

     

       108
       108
       +
       

     

       109
       109
       +
       This is mainly needed in cases where this isn't supported out of the box and mainly serves as a way

     

       110
       110
       +
       for you to case your types.

     

       39
       111
        
       

     

       40
       112
        
       ## Local development

     

       41
       113