Urql generation

[arcanis]

I currently write my queries under the form of "detached gql tags", using the urql plugin:

import {gql} from '@my-app/data';
import {useFooQuery} from '@my-app/graphql-generated';

gql`
  query Foo {
    pages {
      __typename
      uid
      name
    }
  }
`;

export function Pages() {
  const [result] = useFooQuery();
  return /*...*/;
}

I have two questions:

• Is there a way to make the __typename and uid fields implicit in my Foo query? More generally, is there a way to instruct graphql-code-generator to add these fields to all entity-like objects, so that I don't have to duplicate it everywhere?
• Even though I'm using the suspense mode, the result.data object in useFooQuery is typed as optional. Shouldn't graphql-code-generator be able to remove the | null (perhaps with an option)?

[dotansimha]

Hi @arcanis ! I can recommend you to use typed-document-node (see https://the-guild.dev/blog/typed-document-node). It supported natively by urql and you should get a better type-safety and clean bundle. Also, result.data will be the same one from Urql, because we don't need a wrapper. I think Urql consider data to be nullable because it follows the signature of graphql - where it can return errors: [ ... ], data: null in some cases.

Regarding __typename - By default, the typescript-operations adds __typename to each level, it should be there.
We currently don't have a built-in solution for adding new fields, but you can use custom documents loader (https://graphql-code-generator.com/docs/getting-started/documents-field#custom-document-loader) to create custom loader that transforms your operations before feeding it to codegen - and you can combine it with @graphql-tools/ loaders and utils, and visit the operations and add the needed fields.