client-preset: Plugin page with advanced doc on Fragment Masking + …

…testing helper (#8657)

Co-authored-by: Saihajpreet Singh <saihajpreet.singh@gmail.com>

.changeset/funny-keys-sin.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/client-preset': minor
+---
+
+Export a testing helper: `makeFragmentData(data, fragment)`

dev-test/gql-tag-operations/graphql/fragment-masking.ts

@@ -1,4 +1,4 @@
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { TypedDocumentNode as DocumentNode, ResultOf } from '@graphql-typed-document-node/core';
 
 export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
   infer TType,
@@ -41,3 +41,10 @@ export function useFragment<TType>(
 ): TType | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any;
 }
+
+export function makeFragmentData<F extends DocumentNode, FT extends ResultOf<F>>(
+  data: FT,
+  _fragment: F
+): FragmentType<F> {
+  return data as FragmentType<F>;
+}

packages/presets/client/src/fragment-masking-plugin.ts

@@ -12,6 +12,14 @@ export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocume
     : never
   : never;`;
 
+const makeFragmentDataHelper = `
+export function makeFragmentData<
+  F extends DocumentNode,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}`;
+
 const defaultUnmaskFunctionName = 'useFragment';
 
 const modifyType = (rawType: string, opts: { nullable: boolean; list: 'with-list' | 'only-list' | false }) =>
@@ -67,10 +75,18 @@ export const plugin: PluginFunction<{
 }> = (_, __, { useTypeImports, augmentedModuleName, unmaskFunctionName }, _info) => {
   const documentNodeImport = `${
     useTypeImports ? 'import type' : 'import'
-  } { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n`;
+  } { TypedDocumentNode as DocumentNode, ResultOf } from '@graphql-typed-document-node/core';\n`;
 
   if (augmentedModuleName == null) {
-    return [documentNodeImport, `\n`, fragmentTypeHelper, `\n`, createUnmaskFunction(unmaskFunctionName)].join(``);
+    return [
+      documentNodeImport,
+      `\n`,
+      fragmentTypeHelper,
+      `\n`,
+      createUnmaskFunction(unmaskFunctionName),
+      `\n`,
+      makeFragmentDataHelper,
+    ].join(``);
   }
 
   return [
@@ -80,6 +96,8 @@ export const plugin: PluginFunction<{
       ...fragmentTypeHelper.split(`\n`),
       `\n`,
       ...createUnmaskFunctionTypeDefinitions(unmaskFunctionName).join('\n').split('\n'),
+      `\n`,
+      makeFragmentDataHelper,
     ]
       .map(line => (line === `\n` || line === '' ? line : `  ${line}`))
       .join(`\n`),

packages/presets/client/tests/client-preset.spec.ts

@@ -633,7 +633,7 @@ export * from "./fragment-masking"`);
       expect(result).toHaveLength(4);
       const gqlFile = result.find(file => file.filename === 'out1/fragment-masking.ts');
       expect(gqlFile.content).toMatchInlineSnapshot(`
-        "import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+        "import { TypedDocumentNode as DocumentNode, ResultOf } from '@graphql-typed-document-node/core';
 
 
         export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
@@ -673,7 +673,14 @@ export * from "./fragment-masking"`);
         ): TType | ReadonlyArray<TType> | null | undefined {
           return fragmentType as any
         }
-        "
+
+
+        export function makeFragmentData<
+          F extends DocumentNode,
+          FT extends ResultOf<F>
+        >(data: FT, _fragment: F): FragmentType<F> {
+          return data as FragmentType<F>;
+        }"
       `);
 
       expect(gqlFile.content).toBeSimilarStringTo(`

website/src/category-to-packages.mjs

@@ -16,7 +16,13 @@ export const CategoryToPackages = {
     'fragment-matcher',
     'add',
   ],
-  presets: ['near-operation-file-preset', 'import-types-preset', 'graphql-modules-preset', 'gql-tag-operations-preset'],
+  presets: [
+    'near-operation-file-preset',
+    'import-types-preset',
+    'graphql-modules-preset',
+    'gql-tag-operations-preset',
+    'preset-client',
+  ],
   typescript: [
     'named-operations-object',
     'relay-operation-optimizer',

website/src/lib/plugins.ts

@@ -165,6 +165,12 @@ export const PACKAGES: Record<
     icon: 'codegen',
     tags: ['preset', 'utilities'],
   },
+  'preset-client': {
+    title: 'Client preset',
+    npmPackage: '@graphql-codegen/client-preset',
+    icon: 'codegen',
+    tags: ['preset', 'next', 'react', 'urql', 'typescript', 'vue'],
+  },
   introspection: {
     title: 'Introspection',
     npmPackage: '@graphql-codegen/introspection',

website/src/pages/docs/guides/react-vue.mdx

@@ -581,8 +581,8 @@ GraphQL Code Generator `client` preset (`@graphql-codegen/client-preset`) is com
   - `@urql/preact` (since `1.4.0`)
   - `urql` (since `1.11.0`)
   - `graphql-request` (since `5.0.0`)
-  - `react-query` (with `graphql-request@5.0.0`)
-  - `swr` (with `graphql-request@5.0.0`)
+  - `react-query` (with `graphql-request@5.x`)
+  - `swr` (with `graphql-request@5.x`)
 
 - **Vue**
   - `@vue/apollo-composable` (since `4.0.0-alpha.13`)

website/src/pages/plugins/presets/_meta.json

@@ -2,5 +2,6 @@
   "gql-tag-operations-preset": "gql-tag-operations",
   "graphql-modules-preset": "graphql-modules",
   "import-types-preset": "import-types",
-  "near-operation-file-preset": "near-operation-file"
+  "near-operation-file-preset": "near-operation-file",
+  "preset-client": "client-preset"
 }