@graphql-codegen/typescript-react-query 4.0.1-alpha-0814e49cc.0 → 4.0.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@graphql-codegen/typescript-react-query",
-  "version": "4.0.1-alpha-0814e49cc.0",
+  "version": "4.0.1",
   "description": "GraphQL Code Generator plugin for generating a ready-to-use React-Query Hooks based on GraphQL operations",
   "peerDependencies": {
     "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"
   },
   "dependencies": {
-    "@graphql-codegen/plugin-helpers": "^2.6.1-alpha-0814e49cc.0",
-    "@graphql-codegen/visitor-plugin-common": "2.12.1-alpha-0814e49cc.0",
+    "@graphql-codegen/plugin-helpers": "^2.6.2",
+    "@graphql-codegen/visitor-plugin-common": "2.12.1",
     "auto-bind": "~4.0.0",
     "change-case-all": "1.0.14",
     "tslib": "~2.4.0"
@@ -28,7 +28,7 @@
   "exports": {
     ".": {
       "require": {
-        "types": "./typings/index.d.ts",
+        "types": "./typings/index.d.cts",
         "default": "./cjs/index.js"
       },
       "import": {

package/typings/config.d.cts

@@ -0,0 +1,89 @@
+import { RawClientSideBasePluginConfig } from '@graphql-codegen/visitor-plugin-common';
+export declare type HardcodedFetch = {
+    endpoint: string;
+    fetchParams?: string | Record<string, any>;
+};
+export declare type CustomFetch = {
+    func: string;
+    isReactHook?: boolean;
+} | string;
+/**
+ * @description This plugin generates `React-Query` Hooks with TypeScript typings.
+ *
+ * It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.
+ *
+ * > **If you are using the `react-query` package instead of the `@tanstack/react-query` package in your project, please set the `legacyMode` option to `true`.**
+ *
+ */
+export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginConfig, 'documentMode' | 'noGraphQLTag' | 'gqlImport' | 'documentNodeImport' | 'noExport' | 'importOperationTypesFrom' | 'importDocumentNodeExternallyFrom' | 'useTypeImports' | 'legacyMode'> {
+    /**
+     * @description Customize the fetcher you wish to use in the generated file. React-Query is agnostic to the data-fetching layer, so you should provide it, or use a custom one.
+     *
+     * The following options are available to use:
+     *
+     * - 'fetch' - requires you to specify endpoint and headers on each call, and uses `fetch` to do the actual http call.
+     * - `{ endpoint: string, fetchParams: RequestInit }`: hardcode your endpoint and fetch options into the generated output, using the environment `fetch` method. You can also use `process.env.MY_VAR` as endpoint or header value.
+     * - `file#identifier` - You can use custom fetcher method that should implement the exported `ReactQueryFetcher` interface. Example: `./my-fetcher#myCustomFetcher`.
+     * - `graphql-request`: Will generate each hook with `client` argument, where you should pass your own `GraphQLClient` (created from `graphql-request`).
+     */
+    fetcher?: 'fetch' | HardcodedFetch | 'graphql-request' | CustomFetch;
+    /**
+     * @default false
+     * @description For each generate query hook adds `document` field with a
+     * corresponding GraphQL query. Useful for `queryClient.fetchQuery`.
+     * @exampleMarkdown
+     * ```ts
+     * queryClient.fetchQuery(
+     *   useUserDetailsQuery.getKey(variables),
+     *   () => gqlRequest(useUserDetailsQuery.document, variables)
+     * )
+     * ```
+     */
+    exposeDocument?: boolean;
+    /**
+     * @default false
+     * @description For each generate query hook adds getKey(variables: QueryVariables) function. Useful for cache updates. If addInfiniteQuery is true, it will also add a getKey function to each infinite query.
+     * @exampleMarkdown
+     * ```ts
+     * const query = useUserDetailsQuery(...)
+     * const key = useUserDetailsQuery.getKey({ id: theUsersId })
+     * // use key in a cache update after a mutation
+     * ```
+     */
+    exposeQueryKeys?: boolean;
+    /**
+     * @default false
+     * @description For each generate mutation hook adds getKey() function. Useful for call outside of functional component.
+     * @exampleMarkdown
+     * ```ts
+     * const mutation = useUserDetailsMutation(...)
+     * const key = useUserDetailsMutation.getKey()
+     * ```
+     */
+    exposeMutationKeys?: boolean;
+    /**
+     * @default false
+     * @description For each generate query hook adds `fetcher` field with a corresponding GraphQL query using the fetcher.
+     * It is useful for `queryClient.fetchQuery` and `queryClient.prefetchQuery`.
+     * @exampleMarkdown
+     * ```ts
+     * await queryClient.prefetchQuery(userQuery.getKey(), () => userQuery.fetcher())
+     * ```
+     */
+    exposeFetcher?: boolean;
+    /**
+     * @default unknown
+     * @description Changes the default "TError" generic type.
+     */
+    errorType?: string;
+    /**
+     * @default false
+     * @description Adds an Infinite Query along side the standard one
+     */
+    addInfiniteQuery?: boolean;
+    /**
+     * @default true
+     * @description If false, it will work with `@tanstack/react-query`, default value is true.
+     */
+    legacyMode?: boolean;
+}

package/typings/fetcher-custom-mapper.d.cts

@@ -0,0 +1,16 @@
+import { CustomFetch } from './config.cjs';
+import { FetcherRenderer } from './fetcher.cjs';
+import { OperationDefinitionNode } from 'graphql';
+import { ReactQueryVisitor } from './visitor.cjs';
+export declare class CustomMapperFetcher implements FetcherRenderer {
+    private visitor;
+    private _mapper;
+    private _isReactHook;
+    constructor(visitor: ReactQueryVisitor, customFetcher: CustomFetch);
+    private getFetcherFnName;
+    generateFetcherImplementaion(): string;
+    generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateMutationHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateFetcherFetch(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+}

package/typings/fetcher-fetch-hardcoded.d.cts

@@ -0,0 +1,16 @@
+import { FetcherRenderer } from './fetcher.cjs';
+import { HardcodedFetch } from './config.cjs';
+import { OperationDefinitionNode } from 'graphql';
+import { ReactQueryVisitor } from './visitor.cjs';
+export declare class HardcodedFetchFetcher implements FetcherRenderer {
+    private visitor;
+    private config;
+    constructor(visitor: ReactQueryVisitor, config: HardcodedFetch);
+    private getEndpoint;
+    private getFetchParams;
+    generateFetcherImplementaion(): string;
+    generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateMutationHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateFetcherFetch(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+}

package/typings/fetcher-fetch.d.cts

@@ -0,0 +1,12 @@
+import { FetcherRenderer } from './fetcher.cjs';
+import { OperationDefinitionNode } from 'graphql';
+import { ReactQueryVisitor } from './visitor.cjs';
+export declare class FetchFetcher implements FetcherRenderer {
+    private visitor;
+    constructor(visitor: ReactQueryVisitor);
+    generateFetcherImplementaion(): string;
+    generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateMutationHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateFetcherFetch(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+}

package/typings/fetcher-graphql-request.d.cts

@@ -0,0 +1,12 @@
+import { FetcherRenderer } from './fetcher.cjs';
+import { OperationDefinitionNode } from 'graphql';
+import { ReactQueryVisitor } from './visitor.cjs';
+export declare class GraphQLRequestClientFetcher implements FetcherRenderer {
+    private visitor;
+    constructor(visitor: ReactQueryVisitor);
+    generateFetcherImplementaion(): string;
+    generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateMutationHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    generateFetcherFetch(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+}

package/typings/fetcher.d.cts

@@ -0,0 +1,8 @@
+import { OperationDefinitionNode } from 'graphql';
+export interface FetcherRenderer {
+    generateFetcherImplementaion: () => string;
+    generateQueryHook: (node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean) => string;
+    generateInfiniteQueryHook: (node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean) => string;
+    generateMutationHook: (node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean) => string;
+    generateFetcherFetch: (node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean) => string;
+}

package/typings/index.d.cts

@@ -0,0 +1,6 @@
+import { PluginFunction, PluginValidateFn, Types } from '@graphql-codegen/plugin-helpers';
+import { ReactQueryRawPluginConfig } from './config.cjs';
+import { ReactQueryVisitor } from './visitor.cjs';
+export declare const plugin: PluginFunction<ReactQueryRawPluginConfig, Types.ComplexPluginOutput>;
+export declare const validate: PluginValidateFn<any>;
+export { ReactQueryVisitor };

package/typings/variables-generator.d.cts

@@ -0,0 +1,8 @@
+import { OperationDefinitionNode } from 'graphql';
+export declare function generateQueryVariablesSignature(hasRequiredVariables: boolean, operationVariablesTypes: string): string;
+export declare function generateInfiniteQueryKey(node: OperationDefinitionNode, hasRequiredVariables: boolean): string;
+export declare function generateInfiniteQueryKeyMaker(node: OperationDefinitionNode, operationName: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+export declare function generateQueryKey(node: OperationDefinitionNode, hasRequiredVariables: boolean): string;
+export declare function generateQueryKeyMaker(node: OperationDefinitionNode, operationName: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+export declare function generateMutationKey(node: OperationDefinitionNode): string;
+export declare function generateMutationKeyMaker(node: OperationDefinitionNode, operationName: string): string;

package/typings/visitor.d.cts

@@ -0,0 +1,44 @@
+import { ClientSideBasePluginConfig, ClientSideBaseVisitor, LoadedFragment } from '@graphql-codegen/visitor-plugin-common';
+import { GraphQLSchema, OperationDefinitionNode } from 'graphql';
+import { FetcherRenderer } from './fetcher.cjs';
+import { ReactQueryRawPluginConfig } from './config.cjs';
+import { Types } from '@graphql-codegen/plugin-helpers';
+export interface ReactQueryPluginConfig extends ClientSideBasePluginConfig {
+    errorType: string;
+    exposeDocument: boolean;
+    exposeQueryKeys: boolean;
+    exposeMutationKeys: boolean;
+    exposeFetcher: boolean;
+    addInfiniteQuery: boolean;
+    legacyMode: boolean;
+}
+export interface ReactQueryMethodMap {
+    infiniteQuery: {
+        hook: string;
+        options: string;
+    };
+    query: {
+        hook: string;
+        options: string;
+    };
+    mutation: {
+        hook: string;
+        options: string;
+    };
+}
+export declare class ReactQueryVisitor extends ClientSideBaseVisitor<ReactQueryRawPluginConfig, ReactQueryPluginConfig> {
+    protected rawConfig: ReactQueryRawPluginConfig;
+    private _externalImportPrefix;
+    fetcher: FetcherRenderer;
+    reactQueryHookIdentifiersInUse: Set<string>;
+    reactQueryOptionsIdentifiersInUse: Set<string>;
+    queryMethodMap: ReactQueryMethodMap;
+    constructor(schema: GraphQLSchema, fragments: LoadedFragment[], rawConfig: ReactQueryRawPluginConfig, documents: Types.DocumentFile[]);
+    get imports(): Set<string>;
+    private createFetcher;
+    get hasOperations(): boolean;
+    getImports(): string[];
+    getFetcherImplementation(): string;
+    private _getHookSuffix;
+    protected buildOperation(node: OperationDefinitionNode, documentVariableName: string, operationType: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+}