fix(react-query): importOperationTypesFrom missing prefix (#552)

* fix: import-types preset issue * edit: type * add: changeset
dotansimha · Feb 2, 2024 · b403529 · b403529
1 parent 926f515
commit b403529
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 6 deletions.
diff --git a/.changeset/dirty-donuts-invite.md b/.changeset/dirty-donuts-invite.md
@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-react-query': minor
+---
+
+Fix importOperationTypesFrom missing prefix
diff --git a/packages/plugins/typescript/react-query/src/config.ts b/packages/plugins/typescript/react-query/src/config.ts
@@ -124,7 +124,6 @@ export interface ReactQueryRawPluginConfig
       | 'gqlImport'
       | 'documentNodeImport'
       | 'noExport'
-      | 'importOperationTypesFrom'
       | 'importDocumentNodeExternallyFrom'
       | 'useTypeImports'
       | 'legacyMode'

diff --git a/packages/plugins/typescript/react-query/src/visitor.ts b/packages/plugins/typescript/react-query/src/visitor.ts
@@ -139,15 +139,12 @@ export class ReactQueryVisitor extends ClientSideBaseVisitor<
     const generateConfig: GenerateConfig = {
       node,
       documentVariableName,
-      operationResultType,
-      operationVariablesTypes,
+      operationResultType: this._externalImportPrefix + operationResultType,
+      operationVariablesTypes: this._externalImportPrefix + operationVariablesTypes,
       hasRequiredVariables,
       operationName,
     };
 
-    operationResultType = this._externalImportPrefix + operationResultType;
-    operationVariablesTypes = this._externalImportPrefix + operationVariablesTypes;
-
     const queries: string[] = [];
     const getOutputFromQueries = () => `\n${queries.join('\n\n')}\n`;
 

diff --git a/packages/plugins/typescript/react-query/tests/__snapshots__/react-query.spec.ts.snap b/packages/plugins/typescript/react-query/tests/__snapshots__/react-query.spec.ts.snap
@@ -1173,6 +1173,126 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
 ]
 `;
 
+exports[`React-Query support import-type preset in v4: content 1`] = `
+"
+
+export const TestDocument = \`
+    query test {
+  feed {
+    id
+    commentCount
+    repository {
+      full_name
+      html_url
+      owner {
+        avatar_url
+      }
+    }
+  }
+}
+    \`;
+
+export const useTestQuery = <
+      TData = Types.TestQuery,
+      TError = unknown
+    >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      variables?: Types.TestQueryVariables,
+      options?: UseQueryOptions<Types.TestQuery, TError, TData>
+    ) => {
+    
+    return useQuery<Types.TestQuery, TError, TData>(
+      variables === undefined ? ['test'] : ['test', variables],
+      fetcher<Types.TestQuery, Types.TestQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables),
+      options
+    )};
+
+export const TestDocument = \`
+    mutation test($name: String) {
+  submitRepository(repoFullName: $name) {
+    id
+  }
+}
+    \`;
+
+export const useTestMutation = <
+      TError = unknown,
+      TContext = unknown
+    >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      options?: UseMutationOptions<Types.TestMutation, TError, Types.TestMutationVariables, TContext>
+    ) => {
+    
+    return useMutation<Types.TestMutation, TError, Types.TestMutationVariables, TContext>(
+      ['test'],
+      (variables?: Types.TestMutationVariables) => fetcher<Types.TestMutation, Types.TestMutationVariables>(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables)(),
+      options
+    )};
+"
+`;
+
+exports[`React-Query support import-type preset in v5: content 1`] = `
+"
+
+export const TestDocument = \`
+    query test {
+  feed {
+    id
+    commentCount
+    repository {
+      full_name
+      html_url
+      owner {
+        avatar_url
+      }
+    }
+  }
+}
+    \`;
+
+export const useTestQuery = <
+      TData = Types.TestQuery,
+      TError = unknown
+    >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      variables?: Types.TestQueryVariables,
+      options?: Omit<UseQueryOptions<Types.TestQuery, TError, TData>, 'queryKey'> & { queryKey?: UseQueryOptions<Types.TestQuery, TError, TData>['queryKey'] }
+    ) => {
+    
+    return useQuery<Types.TestQuery, TError, TData>(
+      {
+    queryKey: variables === undefined ? ['test'] : ['test', variables],
+    queryFn: fetcher<Types.TestQuery, Types.TestQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables),
+    ...options
+  }
+    )};
+
+export const TestDocument = \`
+    mutation test($name: String) {
+  submitRepository(repoFullName: $name) {
+    id
+  }
+}
+    \`;
+
+export const useTestMutation = <
+      TError = unknown,
+      TContext = unknown
+    >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      options?: UseMutationOptions<Types.TestMutation, TError, Types.TestMutationVariables, TContext>
+    ) => {
+    
+    return useMutation<Types.TestMutation, TError, Types.TestMutationVariables, TContext>(
+      {
+    mutationKey: ['test'],
+    mutationFn: (variables?: Types.TestMutationVariables) => fetcher<Types.TestMutation, Types.TestMutationVariables>(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables)(),
+    ...options
+  }
+    )};
+"
+`;
+
 exports[`React-Query support v4 syntax: content 1`] = `
 "
 

diff --git a/packages/plugins/typescript/react-query/tests/react-query.spec.ts b/packages/plugins/typescript/react-query/tests/react-query.spec.ts
@@ -51,6 +51,29 @@ describe('React-Query', () => {
     await validateTypeScript(mergeOutputs(out), schema, docs, config);
   });
 
+  it('support import-type preset in v4', async () => {
+    const config: ReactQueryRawPluginConfig = {
+      importOperationTypesFrom: 'Types',
+    };
+
+    const out = (await plugin(schema, docs, config)) as Types.ComplexPluginOutput;
+
+    expect(out.content).toMatchSnapshot('content');
+    await validateTypeScript(mergeOutputs(out), schema, docs, config);
+  });
+
+  it('support import-type preset in v5', async () => {
+    const config: ReactQueryRawPluginConfig = {
+      reactQueryVersion: 5,
+      importOperationTypesFrom: 'Types',
+    };
+
+    const out = (await plugin(schema, docs, config)) as Types.ComplexPluginOutput;
+
+    expect(out.content).toMatchSnapshot('content');
+    await validateTypeScript(mergeOutputs(out), schema, docs, config);
+  });
+
   it('Duplicated nested fragments are removed', async () => {
     const schema = buildSchema(/* GraphQL */ `
       schema {