graphql/codegen/plugins/presets/preset-client

[giscus[bot]]

graphql/codegen/plugins/presets/preset-client

GraphQL Code Generator Documentation

https://the-guild.dev/graphql/codegen/plugins/presets/preset-client

[paul-vd]

Can you nested fragments on the same type as the parent? example here: charlypoly/codegen-repros#1

[wolffparkinson]

how to use client preset in server components ?

[2coo]

How to refetch a specific fragment based on user interaction?

[reinaldomendes]

Conditional and infer types doesn't working with vue and typescript, vite-vue-plugin.

[vite] Internal server error: [@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;
   |  ^^^^^^^^^

[charlieforward9]

Is there potential for an Amplify AppSync connection?

[AndreasBBS]

I'd like to be able to separate the destination folder of the graphql.ts file with the type definitions to be a different folder from the rest of the files. This to be able to bundle the types alongside my React components library while keeping the gql.ts and the fragment-masking.ts files in my App repo.
Right now I'm generating the types twice with the following strategy:

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  overwrite: true,
  schema: process.env.GRAPHQL_ENDPOINT,
  documents: "src/**/*.{ts,tsx}",
  generates: {
    "src/components/types/gql/graphql.ts": {
      plugins: [
        'typescript',
        'typescript-operations'
      ]
    },
    "src/lib/gql/": {
      preset: 'client',
    }
  },
};

export default config;

But ideally I would have only one graphql.ts file with the types in src/components/types/gql/graphql.ts and the gql.ts and fragment-masking.ts would use that file for the types.

NOTE: src/components is a git submodule for my React components library

[ZeldaIV]

I really like the idea of fragment masking. Using Apollo's useFragment-hook, it triggers a rerender of the component whenever the cache changes in such a way that the fragment changes. I cannot see that this will do that, since it´s not a hook as you state: useFragment() is not a React hook. How do we go about achieving the same behaviour?