graphql/codegen/docs/guides/react-vue

[giscus[bot]]

graphql/codegen/docs/guides/react-vue

GraphQL Code Generator: documentation

https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue

[reinaldomendes]

It doesn't works with <script setup>

[@vue/compiler-sfc] Unresolvable type: TSConditionalType

src/gql/fragment-masking.ts
4 |
5 |
6 | export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 | infer TType,
| ^^^^^^^^^^^^^^
8 | any
| ^^^^^
9 | >
| ^
10 | ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 | ? TKey extends string
| ^^^^^^^^^^^^^^^^^^^^^^^^^
12 | ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | : never
| ^^^^^^^^^^^^^
14 | : never
| ^^^^^^^^^^^
15 | : never;
| ^^^^^^^^^

[reinaldomendes]

It doesn't works with <script setup>

[@vue/compiler-sfc] Unresolvable type: TSConditionalType

src/gql/fragment-masking.ts
4 |
5 |
6 | export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 | infer TType,
| ^^^^^^^^^^^^^^
8 | any
| ^^^^^
9 | >
| ^
10 | ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 | ? TKey extends string
| ^^^^^^^^^^^^^^^^^^^^^^^^^
12 | ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | : never
| ^^^^^^^^^^^^^
14 | : never
| ^^^^^^^^^^^
15 | : never;
| ^^^^^^^^^

[raphaeltm]

To get the best GraphQL development experience, we recommend installing the GraphQLSP package to get:

• syntax highlighting
• autocomplete suggestions
• validation against schema
• quick-info on hover

At the moment it looks like GraphQL SP doesn't seem to support syntax highlighting? I'm getting all the other functionality (autocomplete, hover info, validation), but no syntax highlighting. Syntax highlighting also doesn't seem to be listed in the current version of their readme.

[maslade]

unlike most GraphQL Client setups, you don't need to append the Fragment definition document to the related Query

Could this feature be elaborated upon? I have one fragment that can be referenced anywhere by this feature, and another fragment that produces not found errors. I'm sure something is misconfigured, but without understanding how this feature works I'm at a loss to troubleshoot and fix it myself.

[maslade]

Elaborating. What I experience is that fragments in .gql files are picked up by this feature and can be referenced anywhere. But I can't use FragmentType<X> on the contents of a GQL file, since it's not a static string, so this can't be right.

If I switch the fragment definition to a .ts module and try to export it as graphql(...), codegen lights up with "Unknown fragment" errors for this fragment.