GraphQL Code Generator v3: client-preset (#8302)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/@graphql-codegen_cli-8302-dependencies.md

@@ -0,0 +1,11 @@
+---
+"@graphql-codegen/cli": patch
+---
+dependencies updates:
+  - Updated dependency [`@graphql-codegen/plugin-helpers@^2.6.2` ↗︎](https://www.npmjs.com/package/@graphql-codegen/plugin-helpers/v/2.6.2) (from `^2.7.1`, in `dependencies`)
+  - Updated dependency [`@whatwg-node/fetch@^0.3.0` ↗︎](https://www.npmjs.com/package/@whatwg-node/fetch/v/0.3.0) (from `^0.4.0`, in `dependencies`)
+  - Updated dependency [`[email protected]` ↗︎](https://www.npmjs.com/package/cosmiconfig-typescript-loader/v/4.0.0) (from `^4.0.0`, in `dependencies`)
+  - Added dependency [`@babel/generator@^7.18.13` ↗︎](https://www.npmjs.com/package/@babel/generator/v/7.18.13) (to `dependencies`)
+  - Added dependency [`@babel/template@^7.18.10` ↗︎](https://www.npmjs.com/package/@babel/template/v/7.18.10) (to `dependencies`)
+  - Added dependency [`@babel/types@^7.18.13` ↗︎](https://www.npmjs.com/package/@babel/types/v/7.18.13) (to `dependencies`)
+  - Added dependency [`@graphql-codegen/[email protected]` ↗︎](https://www.npmjs.com/package/@graphql-codegen/client-preset/v/1.0.1) (to `dependencies`)

.changeset/orange-hornets-thank.md

@@ -0,0 +1,23 @@
+---
+'@graphql-codegen/gql-tag-operations': minor
+'@graphql-codegen/gql-tag-operations-preset': minor
+"@graphql-codegen/cli": minor
+'@graphql-codegen/client-preset': patch
+---
+
+**`@graphql-codegen/gql-tag-operations` and `@graphql-codegen/gql-tag-operations-preset`**
+
+Introduce a `gqlTagName` configuration option
+
+-----
+
+**`@graphql-codegen/client-preset`**
+
+New preset for GraphQL Code Generator v3, more information on the RFC: https://github.com/dotansimha/graphql-code-generator/issues/8296
+
+
+-----
+
+**`@graphql-codegen/cli`**
+
+Update init wizard with 3.0 recommendations (`codegen.ts`, `client` preset)

dev-test/codegen.yml

@@ -422,6 +422,10 @@ generates:
     schema: ./dev-test/gql-tag-operations/schema.graphql
     documents: './dev-test/gql-tag-operations/src/**/*.ts'
     preset: gql-tag-operations-preset
+  ./dev-test/gql-tag-operations/graphql:
+    schema: ./dev-test/gql-tag-operations/schema.graphql
+    documents: './dev-test/gql-tag-operations/src/**/*.ts'
+    preset: client
   ./dev-test/gql-tag-operations-urql/gql:
     schema: ./dev-test/gql-tag-operations-urql/schema.graphql
     documents: './dev-test/gql-tag-operations-urql/src/**/*.ts'

dev-test/gql-tag-operations-masking-star-wars/gql/gql.ts

@@ -1,12 +1,12 @@
 /* eslint-disable */
-import * as graphql from './graphql.js';
+import * as types from './graphql.js';
 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
 const documents = {
   '\n  query HeroDetailsWithFragment($episode: Episode) {\n    hero(episode: $episode) {\n      ...HeroDetails\n    }\n  }\n':
-    graphql.HeroDetailsWithFragmentDocument,
+    types.HeroDetailsWithFragmentDocument,
   '\n  fragment HeroDetails on Character {\n    __typename\n    name\n    ... on Human {\n      height\n    }\n    ... on Droid {\n      primaryFunction\n    }\n  }\n':
-    graphql.HeroDetailsFragmentDoc,
+    types.HeroDetailsFragmentDoc,
 };
 
 export function gql(

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

@@ -1,15 +1,15 @@
 /* eslint-disable */
-import * as graphql from './graphql.js';
+import * as types from './graphql.js';
 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
 const documents = {
   '\n  fragment TweetFragment on Tweet {\n    id\n    body\n    ...TweetAuthorFragment\n  }\n':
-    graphql.TweetFragmentFragmentDoc,
+    types.TweetFragmentFragmentDoc,
   '\n  fragment TweetAuthorFragment on Tweet {\n    id\n    author {\n      id\n      username\n    }\n  }\n':
-    graphql.TweetAuthorFragmentFragmentDoc,
+    types.TweetAuthorFragmentFragmentDoc,
   '\n  fragment TweetsFragment on Query {\n    Tweets {\n      id\n      ...TweetFragment\n    }\n  }\n':
-    graphql.TweetsFragmentFragmentDoc,
-  '\n  query TweetAppQuery {\n    ...TweetsFragment\n  }\n': graphql.TweetAppQueryDocument,
+    types.TweetsFragmentFragmentDoc,
+  '\n  query TweetAppQuery {\n    ...TweetsFragment\n  }\n': types.TweetAppQueryDocument,
 };
 
 export function gql(

dev-test/gql-tag-operations/gql/gql.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
-import * as graphql from './graphql.js';
+import * as types from './graphql.js';
 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
 const documents = {
-  '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n': graphql.FooDocument,
-  '\n  fragment Lel on Tweet {\n    id\n    body\n  }\n': graphql.LelFragmentDoc,
-  '\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n': graphql.BarDocument,
+  '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n': types.FooDocument,
+  '\n  fragment Lel on Tweet {\n    id\n    body\n  }\n': types.LelFragmentDoc,
+  '\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n': types.BarDocument,
 };
 
 export function gql(

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

@@ -0,0 +1,43 @@
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
+  infer TType,
+  any
+>
+  ? TType extends { ' $fragmentName': infer TKey }
+    ? TKey extends string
+      ? { ' $fragmentRefs': { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType:
+    | FragmentType<DocumentNode<TType, any>>
+    | ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
+    | null
+    | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}

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

@@ -0,0 +1,31 @@
+/* eslint-disable */
+import * as types from './graphql.js';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+const documents = {
+  '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n': types.FooDocument,
+  '\n  fragment Lel on Tweet {\n    id\n    body\n  }\n': types.LelFragmentDoc,
+  '\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n': types.BarDocument,
+};
+
+export function graphql(
+  source: '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n'
+): typeof documents['\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n'];
+export function graphql(
+  source: '\n  fragment Lel on Tweet {\n    id\n    body\n  }\n'
+): typeof documents['\n  fragment Lel on Tweet {\n    id\n    body\n  }\n'];
+export function graphql(
+  source: '\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n'
+): typeof documents['\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n'];
+
+export function graphql(source: string): unknown;
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<
+  infer TType,
+  any
+>
+  ? TType
+  : never;

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

@@ -0,0 +1,186 @@
+/* eslint-disable */
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  Date: any;
+  Url: any;
+};
+
+export type Meta = {
+  __typename?: 'Meta';
+  count?: Maybe<Scalars['Int']>;
+};
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  createTweet?: Maybe<Tweet>;
+  deleteTweet?: Maybe<Tweet>;
+  markTweetRead?: Maybe<Scalars['Boolean']>;
+};
+
+export type MutationCreateTweetArgs = {
+  body?: InputMaybe<Scalars['String']>;
+};
+
+export type MutationDeleteTweetArgs = {
+  id: Scalars['ID'];
+};
+
+export type MutationMarkTweetReadArgs = {
+  id: Scalars['ID'];
+};
+
+export type Notification = {
+  __typename?: 'Notification';
+  date?: Maybe<Scalars['Date']>;
+  id?: Maybe<Scalars['ID']>;
+  type?: Maybe<Scalars['String']>;
+};
+
+export type Query = {
+  __typename?: 'Query';
+  Notifications?: Maybe<Array<Maybe<Notification>>>;
+  NotificationsMeta?: Maybe<Meta>;
+  Tweet?: Maybe<Tweet>;
+  Tweets?: Maybe<Array<Maybe<Tweet>>>;
+  TweetsMeta?: Maybe<Meta>;
+  User?: Maybe<User>;
+};
+
+export type QueryNotificationsArgs = {
+  limit?: InputMaybe<Scalars['Int']>;
+};
+
+export type QueryTweetArgs = {
+  id: Scalars['ID'];
+};
+
+export type QueryTweetsArgs = {
+  limit?: InputMaybe<Scalars['Int']>;
+  skip?: InputMaybe<Scalars['Int']>;
+  sort_field?: InputMaybe<Scalars['String']>;
+  sort_order?: InputMaybe<Scalars['String']>;
+};
+
+export type QueryUserArgs = {
+  id: Scalars['ID'];
+};
+
+export type Stat = {
+  __typename?: 'Stat';
+  likes?: Maybe<Scalars['Int']>;
+  responses?: Maybe<Scalars['Int']>;
+  retweets?: Maybe<Scalars['Int']>;
+  views?: Maybe<Scalars['Int']>;
+};
+
+export type Tweet = {
+  __typename?: 'Tweet';
+  Author?: Maybe<User>;
+  Stats?: Maybe<Stat>;
+  body?: Maybe<Scalars['String']>;
+  date?: Maybe<Scalars['Date']>;
+  id: Scalars['ID'];
+};
+
+export type User = {
+  __typename?: 'User';
+  avatar_url?: Maybe<Scalars['Url']>;
+  first_name?: Maybe<Scalars['String']>;
+  full_name?: Maybe<Scalars['String']>;
+  id: Scalars['ID'];
+  last_name?: Maybe<Scalars['String']>;
+  /** @deprecated Field no longer supported */
+  name?: Maybe<Scalars['String']>;
+  username?: Maybe<Scalars['String']>;
+};
+
+export type FooQueryVariables = Exact<{ [key: string]: never }>;
+
+export type FooQuery = { __typename?: 'Query'; Tweets?: Array<{ __typename?: 'Tweet'; id: string } | null> | null };
+
+export type LelFragment = { __typename?: 'Tweet'; id: string; body?: string | null } & {
+  ' $fragmentName': 'LelFragment';
+};
+
+export type BarQueryVariables = Exact<{ [key: string]: never }>;
+
+export type BarQuery = {
+  __typename?: 'Query';
+  Tweets?: Array<({ __typename?: 'Tweet' } & { ' $fragmentRefs': { LelFragment: LelFragment } }) | null> | null;
+};
+
+export const LelFragmentDoc = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'FragmentDefinition',
+      name: { kind: 'Name', value: 'Lel' },
+      typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Tweet' } },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'body' } },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<LelFragment, unknown>;
+export const FooDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'Foo' },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'Tweets' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [{ kind: 'Field', name: { kind: 'Name', value: 'id' } }],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<FooQuery, FooQueryVariables>;
+export const BarDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'Bar' },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'Tweets' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'Lel' } }],
+            },
+          },
+        ],
+      },
+    },
+    ...LelFragmentDoc.definitions,
+  ],
+} as unknown as DocumentNode<BarQuery, BarQueryVariables>;

dev-test/gql-tag-operations/graphql/index.ts

@@ -0,0 +1,2 @@
+export * from './gql.js';
+export * from './fragment-masking.js';