From 7a944648c55dc1e00d0f849de90ff0d604069729 Mon Sep 17 00:00:00 2001 From: beerose Date: Fri, 10 Mar 2023 17:53:15 +0100 Subject: [PATCH] Modify typescript-graphql-request example and add test --- .../babel.config.js | 6 + .../typescript-graphql-request/codegen.ts | 3 + .../typescript-graphql-request/jest.config.js | 3 + .../typescript-graphql-request/package.json | 6 +- .../typescript-graphql-request/src/gql/gql.ts | 26 +-- .../src/gql/graphql.ts | 149 ++++-------------- .../src/main.spec.ts | 8 + 7 files changed, 55 insertions(+), 146 deletions(-) create mode 100644 examples/typescript-graphql-request/babel.config.js create mode 100644 examples/typescript-graphql-request/jest.config.js create mode 100644 examples/typescript-graphql-request/src/main.spec.ts diff --git a/examples/typescript-graphql-request/babel.config.js b/examples/typescript-graphql-request/babel.config.js new file mode 100644 index 00000000000..3e4899f4a74 --- /dev/null +++ b/examples/typescript-graphql-request/babel.config.js @@ -0,0 +1,6 @@ +module.exports = { + presets: [ + ['@babel/preset-env', { targets: { node: process.versions.node.split('.')[0] } }], + '@babel/preset-typescript', + ], +}; diff --git a/examples/typescript-graphql-request/codegen.ts b/examples/typescript-graphql-request/codegen.ts index e06cff00297..8152d8f114c 100644 --- a/examples/typescript-graphql-request/codegen.ts +++ b/examples/typescript-graphql-request/codegen.ts @@ -7,6 +7,9 @@ const config: CodegenConfig = { generates: { './src/gql/': { preset: 'client', + config: { + documentMode: 'string', + }, }, }, hooks: { afterAllFileWrite: ['prettier --write'] }, diff --git a/examples/typescript-graphql-request/jest.config.js b/examples/typescript-graphql-request/jest.config.js new file mode 100644 index 00000000000..8a54dc0d796 --- /dev/null +++ b/examples/typescript-graphql-request/jest.config.js @@ -0,0 +1,3 @@ +module.exports = { + transform: { '^.+\\.ts': 'babel-jest' }, +}; diff --git a/examples/typescript-graphql-request/package.json b/examples/typescript-graphql-request/package.json index 5deb1fe0a8b..853b5cf25d7 100644 --- a/examples/typescript-graphql-request/package.json +++ b/examples/typescript-graphql-request/package.json @@ -4,7 +4,9 @@ "private": true, "devDependencies": { "@graphql-codegen/cli": "3.2.2", - "@graphql-codegen/gql-tag-operations-preset": "2.1.0" + "@graphql-codegen/gql-tag-operations-preset": "2.1.0", + "babel-jest": "28.1.3", + "jest": "28.1.3" }, "dependencies": { "graphql": "16.6.0", @@ -15,7 +17,7 @@ "codegen": "graphql-codegen --config codegen.ts", "build": "tsc", "dev": "ts-node src/main.ts", - "test:end2end": "node dist/main.js" + "test:end2end": "yarn jest" }, "type": "commonjs", "bob": false diff --git a/examples/typescript-graphql-request/src/gql/gql.ts b/examples/typescript-graphql-request/src/gql/gql.ts index 532ceaa9e8b..95a4068c89c 100644 --- a/examples/typescript-graphql-request/src/gql/gql.ts +++ b/examples/typescript-graphql-request/src/gql/gql.ts @@ -1,6 +1,5 @@ /* eslint-disable */ import * as types from './graphql'; -import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'; /** * Map of all GraphQL operations in the project. @@ -19,40 +18,19 @@ const documents = { types.AllPeopleWithVariablesQueryDocument, }; -/** - * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. - * - * - * @example - * ```ts - * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`); - * ``` - * - * The query argument is unknown! - * Please regenerate the types. - */ -export function graphql(source: string): unknown; - /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ export function graphql( source: '\n query AllPeopleQuery {\n allPeople(first: 5) {\n edges {\n node {\n name\n homeworld {\n name\n }\n }\n }\n }\n }\n' -): (typeof documents)['\n query AllPeopleQuery {\n allPeople(first: 5) {\n edges {\n node {\n name\n homeworld {\n name\n }\n }\n }\n }\n }\n']; +): typeof import('./graphql').AllPeopleQueryDocument; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ export function graphql( source: '\n query AllPeopleWithVariablesQuery($first: Int!) {\n allPeople(first: $first) {\n edges {\n node {\n name\n homeworld {\n name\n }\n }\n }\n }\n }\n' -): (typeof documents)['\n query AllPeopleWithVariablesQuery($first: Int!) {\n allPeople(first: $first) {\n edges {\n node {\n name\n homeworld {\n name\n }\n }\n }\n }\n }\n']; +): typeof import('./graphql').AllPeopleWithVariablesQueryDocument; export function graphql(source: string) { return (documents as any)[source] ?? {}; } - -export type DocumentType> = TDocumentNode extends DocumentNode< - infer TType, - any -> - ? TType - : never; diff --git a/examples/typescript-graphql-request/src/gql/graphql.ts b/examples/typescript-graphql-request/src/gql/graphql.ts index a689c8a2080..04f29c99b36 100644 --- a/examples/typescript-graphql-request/src/gql/graphql.ts +++ b/examples/typescript-graphql-request/src/gql/graphql.ts @@ -1,5 +1,5 @@ /* eslint-disable */ -import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'; +import { TypedDocumentString } from '@graphql-typed-document-node/core'; export type Maybe = T | null; export type InputMaybe = Maybe; export type Exact = { [K in keyof T]: T[K] }; @@ -1309,122 +1309,31 @@ export type AllPeopleWithVariablesQueryQuery = { } | null; }; -export const AllPeopleQueryDocument = { - kind: 'Document', - definitions: [ - { - kind: 'OperationDefinition', - operation: 'query', - name: { kind: 'Name', value: 'AllPeopleQuery' }, - selectionSet: { - kind: 'SelectionSet', - selections: [ - { - kind: 'Field', - name: { kind: 'Name', value: 'allPeople' }, - arguments: [ - { kind: 'Argument', name: { kind: 'Name', value: 'first' }, value: { kind: 'IntValue', value: '5' } }, - ], - selectionSet: { - kind: 'SelectionSet', - selections: [ - { - kind: 'Field', - name: { kind: 'Name', value: 'edges' }, - selectionSet: { - kind: 'SelectionSet', - selections: [ - { - kind: 'Field', - name: { kind: 'Name', value: 'node' }, - selectionSet: { - kind: 'SelectionSet', - selections: [ - { kind: 'Field', name: { kind: 'Name', value: 'name' } }, - { - kind: 'Field', - name: { kind: 'Name', value: 'homeworld' }, - selectionSet: { - kind: 'SelectionSet', - selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }], - }, - }, - ], - }, - }, - ], - }, - }, - ], - }, - }, - ], - }, - }, - ], -} as unknown as DocumentNode; -export const AllPeopleWithVariablesQueryDocument = { - kind: 'Document', - definitions: [ - { - kind: 'OperationDefinition', - operation: 'query', - name: { kind: 'Name', value: 'AllPeopleWithVariablesQuery' }, - variableDefinitions: [ - { - kind: 'VariableDefinition', - variable: { kind: 'Variable', name: { kind: 'Name', value: 'first' } }, - type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'Int' } } }, - }, - ], - selectionSet: { - kind: 'SelectionSet', - selections: [ - { - kind: 'Field', - name: { kind: 'Name', value: 'allPeople' }, - arguments: [ - { - kind: 'Argument', - name: { kind: 'Name', value: 'first' }, - value: { kind: 'Variable', name: { kind: 'Name', value: 'first' } }, - }, - ], - selectionSet: { - kind: 'SelectionSet', - selections: [ - { - kind: 'Field', - name: { kind: 'Name', value: 'edges' }, - selectionSet: { - kind: 'SelectionSet', - selections: [ - { - kind: 'Field', - name: { kind: 'Name', value: 'node' }, - selectionSet: { - kind: 'SelectionSet', - selections: [ - { kind: 'Field', name: { kind: 'Name', value: 'name' } }, - { - kind: 'Field', - name: { kind: 'Name', value: 'homeworld' }, - selectionSet: { - kind: 'SelectionSet', - selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }], - }, - }, - ], - }, - }, - ], - }, - }, - ], - }, - }, - ], - }, - }, - ], -} as unknown as DocumentNode; +export const AllPeopleQueryDocument = ` + query AllPeopleQuery { + allPeople(first: 5) { + edges { + node { + name + homeworld { + name + } + } + } + } +} + ` as unknown as TypedDocumentString; +export const AllPeopleWithVariablesQueryDocument = ` + query AllPeopleWithVariablesQuery($first: Int!) { + allPeople(first: $first) { + edges { + node { + name + homeworld { + name + } + } + } + } +} + ` as unknown as TypedDocumentString; diff --git a/examples/typescript-graphql-request/src/main.spec.ts b/examples/typescript-graphql-request/src/main.spec.ts new file mode 100644 index 00000000000..efd7768f43e --- /dev/null +++ b/examples/typescript-graphql-request/src/main.spec.ts @@ -0,0 +1,8 @@ +import { execSync } from 'child_process'; + +describe('TypeScript GraphQL Request tests', () => { + it('works', () => { + const result = execSync('node dist/main.js', { stdio: 'pipe' }).toString(); + expect(result).toContain('Luke Skywalker'); + }); +});