@graphql-codegen/typescript-react-query 5.0.0 → 5.1.0-alpha-20230926163345-895634a9a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,11 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.GraphQLRequestClientFetcher = void 0;
4
4
  const variables_generator_js_1 = require("./variables-generator.js");
5
5
  class GraphQLRequestClientFetcher {
6
- constructor(visitor) {
6
+ constructor(visitor, config) {
7
7
  this.visitor = visitor;
8
+ this.clientPath = typeof config === 'object' ? config.clientImportPath : null;
8
9
  }
9
10
  generateFetcherImplementaion() {
10
- return `
11
+ return this.clientPath
12
+ ? `
13
+ function fetcher<TData, TVariables extends { [key: string]: any }>(query: string, variables?: TVariables, requestHeaders?: RequestInit['headers']) {
14
+ return async (): Promise<TData> => graphqlClient.request({
15
+ document: query,
16
+ variables,
17
+ requestHeaders
18
+ });
19
+ }`
20
+ : `
11
21
  function fetcher<TData, TVariables extends { [key: string]: any }>(client: GraphQLClient, query: string, variables?: TVariables, requestHeaders?: RequestInit['headers']) {
12
22
  return async (): Promise<TData> => client.request({
13
23
  document: query,
@@ -19,12 +29,29 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
19
29
  generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
20
30
  const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
21
31
  const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
32
+ if (this.clientPath)
33
+ this.visitor.imports.add(this.clientPath);
22
34
  this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
23
35
  const hookConfig = this.visitor.queryMethodMap;
24
36
  this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
25
37
  this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
26
38
  const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
27
- return `export const useInfinite${operationName} = <
39
+ return this.clientPath
40
+ ? `export const useInfinite${operationName} = <
41
+ TData = ${operationResultType},
42
+ TError = ${this.visitor.config.errorType}
43
+ >(
44
+ pageParamKey: keyof ${operationVariablesTypes},
45
+ ${variables},
46
+ ${options},
47
+ headers?: RequestInit['headers']
48
+ ) =>
49
+ ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
50
+ ${(0, variables_generator_js_1.generateInfiniteQueryKey)(node, hasRequiredVariables)},
51
+ (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)(),
52
+ options
53
+ );`
54
+ : `export const useInfinite${operationName} = <
28
55
  TData = ${operationResultType},
29
56
  TError = ${this.visitor.config.errorType}
30
57
  >(
@@ -42,13 +69,29 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
42
69
  generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
43
70
  const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
44
71
  const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
72
+ if (this.clientPath)
73
+ this.visitor.imports.add(this.clientPath);
45
74
  this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
46
75
  this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
47
76
  const hookConfig = this.visitor.queryMethodMap;
48
77
  this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.query.hook);
49
78
  this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.query.options);
50
79
  const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
51
- return `export const use${operationName} = <
80
+ return this.clientPath
81
+ ? `export const use${operationName} = <
82
+ TData = ${operationResultType},
83
+ TError = ${this.visitor.config.errorType}
84
+ >(
85
+ ${variables},
86
+ ${options},
87
+ headers?: RequestInit['headers']
88
+ ) =>
89
+ ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
90
+ ${(0, variables_generator_js_1.generateQueryKey)(node, hasRequiredVariables)},
91
+ fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers),
92
+ options
93
+ );`
94
+ : `export const use${operationName} = <
52
95
  TData = ${operationResultType},
53
96
  TError = ${this.visitor.config.errorType}
54
97
  >(
@@ -66,12 +109,27 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
66
109
  generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
67
110
  const variables = `variables?: ${operationVariablesTypes}`;
68
111
  const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
112
+ if (this.clientPath)
113
+ this.visitor.imports.add(this.clientPath);
69
114
  this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
70
115
  const hookConfig = this.visitor.queryMethodMap;
71
116
  this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.mutation.hook);
72
117
  this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.mutation.options);
73
118
  const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
74
- return `export const use${operationName} = <
119
+ return this.clientPath
120
+ ? `export const use${operationName} = <
121
+ TError = ${this.visitor.config.errorType},
122
+ TContext = unknown
123
+ >(
124
+ ${options},
125
+ headers?: RequestInit['headers']
126
+ ) =>
127
+ ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
128
+ ${(0, variables_generator_js_1.generateMutationKey)(node)},
129
+ (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)(),
130
+ options
131
+ );`
132
+ : `export const use${operationName} = <
75
133
  TError = ${this.visitor.config.errorType},
76
134
  TContext = unknown
77
135
  >(
@@ -88,8 +146,12 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
88
146
  generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
89
147
  const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
90
148
  const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
149
+ if (this.clientPath)
150
+ this.visitor.imports.add(this.clientPath);
91
151
  this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
92
- return `\nuse${operationName}.fetcher = (client: GraphQLClient, ${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers);`;
152
+ return this.clientPath
153
+ ? `\nuse${operationName}.fetcher = (${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers);`
154
+ : `\nuse${operationName}.fetcher = (client: GraphQLClient, ${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers);`;
93
155
  }
94
156
  }
95
157
  exports.GraphQLRequestClientFetcher = GraphQLRequestClientFetcher;
package/cjs/visitor.js CHANGED
@@ -58,8 +58,8 @@ class ReactQueryVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
58
58
  if (typeof raw === 'object' && 'endpoint' in raw) {
59
59
  return new fetcher_fetch_hardcoded_js_1.HardcodedFetchFetcher(this, raw);
60
60
  }
61
- if (raw === 'graphql-request') {
62
- return new fetcher_graphql_request_js_1.GraphQLRequestClientFetcher(this);
61
+ if (raw === 'graphql-request' || (typeof raw === 'object' && 'clientImportPath' in raw)) {
62
+ return new fetcher_graphql_request_js_1.GraphQLRequestClientFetcher(this, raw);
63
63
  }
64
64
  return new fetcher_custom_mapper_js_1.CustomMapperFetcher(this, raw);
65
65
  }
@@ -1,10 +1,20 @@
1
1
  import { generateInfiniteQueryKey, generateMutationKey, generateQueryKey, generateQueryVariablesSignature, } from './variables-generator.js';
2
2
  export class GraphQLRequestClientFetcher {
3
- constructor(visitor) {
3
+ constructor(visitor, config) {
4
4
  this.visitor = visitor;
5
+ this.clientPath = typeof config === 'object' ? config.clientImportPath : null;
5
6
  }
6
7
  generateFetcherImplementaion() {
7
- return `
8
+ return this.clientPath
9
+ ? `
10
+ function fetcher<TData, TVariables extends { [key: string]: any }>(query: string, variables?: TVariables, requestHeaders?: RequestInit['headers']) {
11
+ return async (): Promise<TData> => graphqlClient.request({
12
+ document: query,
13
+ variables,
14
+ requestHeaders
15
+ });
16
+ }`
17
+ : `
8
18
  function fetcher<TData, TVariables extends { [key: string]: any }>(client: GraphQLClient, query: string, variables?: TVariables, requestHeaders?: RequestInit['headers']) {
9
19
  return async (): Promise<TData> => client.request({
10
20
  document: query,
@@ -16,12 +26,29 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
16
26
  generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
17
27
  const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
18
28
  const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
29
+ if (this.clientPath)
30
+ this.visitor.imports.add(this.clientPath);
19
31
  this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
20
32
  const hookConfig = this.visitor.queryMethodMap;
21
33
  this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
22
34
  this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
23
35
  const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
24
- return `export const useInfinite${operationName} = <
36
+ return this.clientPath
37
+ ? `export const useInfinite${operationName} = <
38
+ TData = ${operationResultType},
39
+ TError = ${this.visitor.config.errorType}
40
+ >(
41
+ pageParamKey: keyof ${operationVariablesTypes},
42
+ ${variables},
43
+ ${options},
44
+ headers?: RequestInit['headers']
45
+ ) =>
46
+ ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
47
+ ${generateInfiniteQueryKey(node, hasRequiredVariables)},
48
+ (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)(),
49
+ options
50
+ );`
51
+ : `export const useInfinite${operationName} = <
25
52
  TData = ${operationResultType},
26
53
  TError = ${this.visitor.config.errorType}
27
54
  >(
@@ -39,13 +66,29 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
39
66
  generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
40
67
  const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
41
68
  const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
69
+ if (this.clientPath)
70
+ this.visitor.imports.add(this.clientPath);
42
71
  this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
43
72
  this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
44
73
  const hookConfig = this.visitor.queryMethodMap;
45
74
  this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.query.hook);
46
75
  this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.query.options);
47
76
  const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
48
- return `export const use${operationName} = <
77
+ return this.clientPath
78
+ ? `export const use${operationName} = <
79
+ TData = ${operationResultType},
80
+ TError = ${this.visitor.config.errorType}
81
+ >(
82
+ ${variables},
83
+ ${options},
84
+ headers?: RequestInit['headers']
85
+ ) =>
86
+ ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
87
+ ${generateQueryKey(node, hasRequiredVariables)},
88
+ fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers),
89
+ options
90
+ );`
91
+ : `export const use${operationName} = <
49
92
  TData = ${operationResultType},
50
93
  TError = ${this.visitor.config.errorType}
51
94
  >(
@@ -63,12 +106,27 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
63
106
  generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
64
107
  const variables = `variables?: ${operationVariablesTypes}`;
65
108
  const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
109
+ if (this.clientPath)
110
+ this.visitor.imports.add(this.clientPath);
66
111
  this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
67
112
  const hookConfig = this.visitor.queryMethodMap;
68
113
  this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.mutation.hook);
69
114
  this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.mutation.options);
70
115
  const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
71
- return `export const use${operationName} = <
116
+ return this.clientPath
117
+ ? `export const use${operationName} = <
118
+ TError = ${this.visitor.config.errorType},
119
+ TContext = unknown
120
+ >(
121
+ ${options},
122
+ headers?: RequestInit['headers']
123
+ ) =>
124
+ ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
125
+ ${generateMutationKey(node)},
126
+ (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)(),
127
+ options
128
+ );`
129
+ : `export const use${operationName} = <
72
130
  TError = ${this.visitor.config.errorType},
73
131
  TContext = unknown
74
132
  >(
@@ -85,7 +143,11 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
85
143
  generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
86
144
  const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
87
145
  const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
146
+ if (this.clientPath)
147
+ this.visitor.imports.add(this.clientPath);
88
148
  this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
89
- return `\nuse${operationName}.fetcher = (client: GraphQLClient, ${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers);`;
149
+ return this.clientPath
150
+ ? `\nuse${operationName}.fetcher = (${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers);`
151
+ : `\nuse${operationName}.fetcher = (client: GraphQLClient, ${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers);`;
90
152
  }
91
153
  }
package/esm/visitor.js CHANGED
@@ -54,8 +54,8 @@ export class ReactQueryVisitor extends ClientSideBaseVisitor {
54
54
  if (typeof raw === 'object' && 'endpoint' in raw) {
55
55
  return new HardcodedFetchFetcher(this, raw);
56
56
  }
57
- if (raw === 'graphql-request') {
58
- return new GraphQLRequestClientFetcher(this);
57
+ if (raw === 'graphql-request' || (typeof raw === 'object' && 'clientImportPath' in raw)) {
58
+ return new GraphQLRequestClientFetcher(this, raw);
59
59
  }
60
60
  return new CustomMapperFetcher(this, raw);
61
61
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@graphql-codegen/typescript-react-query",
3
- "version": "5.0.0",
3
+ "version": "5.1.0-alpha-20230926163345-895634a9a",
4
4
  "description": "GraphQL Code Generator plugin for generating a ready-to-use React-Query Hooks based on GraphQL operations",
5
5
  "peerDependencies": {
6
6
  "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
@@ -7,6 +7,9 @@ export type CustomFetch = {
7
7
  func: string;
8
8
  isReactHook?: boolean;
9
9
  } | string;
10
+ export type GraphQlRequest = 'graphql-request' | {
11
+ clientImportPath: string;
12
+ };
10
13
  /**
11
14
  * @description This plugin generates `React-Query` Hooks with TypeScript typings.
12
15
  *
@@ -26,7 +29,7 @@ export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginC
26
29
  * - `file#identifier` - You can use custom fetcher method that should implement the exported `ReactQueryFetcher` interface. Example: `./my-fetcher#myCustomFetcher`.
27
30
  * - `graphql-request`: Will generate each hook with `client` argument, where you should pass your own `GraphQLClient` (created from `graphql-request`).
28
31
  */
29
- fetcher?: 'fetch' | HardcodedFetch | 'graphql-request' | CustomFetch;
32
+ fetcher?: 'fetch' | HardcodedFetch | GraphQlRequest | CustomFetch;
30
33
  /**
31
34
  * @default false
32
35
  * @description For each generate query hook adds `document` field with a
@@ -7,6 +7,9 @@ export type CustomFetch = {
7
7
  func: string;
8
8
  isReactHook?: boolean;
9
9
  } | string;
10
+ export type GraphQlRequest = 'graphql-request' | {
11
+ clientImportPath: string;
12
+ };
10
13
  /**
11
14
  * @description This plugin generates `React-Query` Hooks with TypeScript typings.
12
15
  *
@@ -26,7 +29,7 @@ export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginC
26
29
  * - `file#identifier` - You can use custom fetcher method that should implement the exported `ReactQueryFetcher` interface. Example: `./my-fetcher#myCustomFetcher`.
27
30
  * - `graphql-request`: Will generate each hook with `client` argument, where you should pass your own `GraphQLClient` (created from `graphql-request`).
28
31
  */
29
- fetcher?: 'fetch' | HardcodedFetch | 'graphql-request' | CustomFetch;
32
+ fetcher?: 'fetch' | HardcodedFetch | GraphQlRequest | CustomFetch;
30
33
  /**
31
34
  * @default false
32
35
  * @description For each generate query hook adds `document` field with a
@@ -1,9 +1,11 @@
1
1
  import { OperationDefinitionNode } from 'graphql';
2
+ import { GraphQlRequest } from './config.cjs';
2
3
  import { FetcherRenderer } from './fetcher.cjs';
3
4
  import { ReactQueryVisitor } from './visitor.cjs';
4
5
  export declare class GraphQLRequestClientFetcher implements FetcherRenderer {
5
6
  private visitor;
6
- constructor(visitor: ReactQueryVisitor);
7
+ private clientPath;
8
+ constructor(visitor: ReactQueryVisitor, config: GraphQlRequest);
7
9
  generateFetcherImplementaion(): string;
8
10
  generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
9
11
  generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
@@ -1,9 +1,11 @@
1
1
  import { OperationDefinitionNode } from 'graphql';
2
+ import { GraphQlRequest } from './config.js';
2
3
  import { FetcherRenderer } from './fetcher.js';
3
4
  import { ReactQueryVisitor } from './visitor.js';
4
5
  export declare class GraphQLRequestClientFetcher implements FetcherRenderer {
5
6
  private visitor;
6
- constructor(visitor: ReactQueryVisitor);
7
+ private clientPath;
8
+ constructor(visitor: ReactQueryVisitor, config: GraphQlRequest);
7
9
  generateFetcherImplementaion(): string;
8
10
  generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
9
11
  generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;