typescript-msw: future proof types for generated mock functions (#484)

* future proof types for generated mock functions * fixes * prettier * changeset * Update tidy-trains-wait.md * test fixes * Apply suggestions from code review --------- Co-authored-by: Dotan Simha <[email protected]> Co-authored-by: Saihajpreet Singh <[email protected]>
dotansimha · Nov 9, 2023 · 1f056e9 · 1f056e9
1 parent 04e3afe
commit 1f056e9
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/.changeset/tidy-trains-wait.md b/.changeset/tidy-trains-wait.md
@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-msw': minor
+---
+
+future proof types for generated mock functions - this also adds support for `msw@2`. 
diff --git a/packages/plugins/typescript/msw/src/visitor.ts b/packages/plugins/typescript/msw/src/visitor.ts
@@ -44,7 +44,7 @@ export class MSWVisitor extends ClientSideBaseVisitor<MSWRawPluginConfig, MSWPlu
       return [];
     }
 
-    return [`import { graphql, ResponseResolver, GraphQLRequest, GraphQLContext } from 'msw'`];
+    return [`import { graphql } from 'msw'`];
   }
 
   public getContent() {
@@ -80,7 +80,9 @@ export class MSWVisitor extends ClientSideBaseVisitor<MSWRawPluginConfig, MSWPlu
  *   )
  * })
  */
-export const ${handlerName} = (resolver: ResponseResolver<GraphQLRequest<${operationVariablesTypes}>, GraphQLContext<${operationResultType}>, any>) =>
+export const ${handlerName} = (resolver: Parameters<typeof ${
+            link?.name || 'graphql'
+          }.${operationType.toLowerCase()}<${operationResultType}, ${operationVariablesTypes}>>[1]) =>
   ${
     link?.name || 'graphql'
   }.${operationType.toLowerCase()}<${operationResultType}, ${operationVariablesTypes}>(

diff --git a/packages/plugins/typescript/msw/tests/__snapshots__/msw.spec.ts.snap b/packages/plugins/typescript/msw/tests/__snapshots__/msw.spec.ts.snap
@@ -13,7 +13,7 @@ exports[`msw Should generate JSDoc documentation with variables and selection fr
  *   )
  * })
  */
-export const mockUserQuery = (resolver: ResponseResolver<GraphQLRequest<UserQueryVariables>, GraphQLContext<UserQuery>, any>) =>
+export const mockUserQuery = (resolver: Parameters<typeof graphql.query<UserQuery, UserQueryVariables>>[1]) =>
   graphql.query<UserQuery, UserQueryVariables>(
     'User',
     resolver
@@ -30,7 +30,7 @@ export const mockUserQuery = (resolver: ResponseResolver<GraphQLRequest<UserQuer
  *   )
  * })
  */
-export const mockUpdateUserMutation = (resolver: ResponseResolver<GraphQLRequest<UpdateUserMutationVariables>, GraphQLContext<UpdateUserMutation>, any>) =>
+export const mockUpdateUserMutation = (resolver: Parameters<typeof graphql.mutation<UpdateUserMutation, UpdateUserMutationVariables>>[1]) =>
   graphql.mutation<UpdateUserMutation, UpdateUserMutationVariables>(
     'UpdateUser',
     resolver
@@ -51,7 +51,7 @@ exports[`msw Should generate a link with an endpoint when passed a link variable
  *   )
  * })
  */
-export const mockUserQueryApi = (resolver: ResponseResolver<GraphQLRequest<UserQueryVariables>, GraphQLContext<UserQuery>, any>) =>
+export const mockUserQueryApi = (resolver: Parameters<typeof api.query<UserQuery, UserQueryVariables>>[1]) =>
   api.query<UserQuery, UserQueryVariables>(
     'User',
     resolver
@@ -67,7 +67,7 @@ export const mockUserQueryApi = (resolver: ResponseResolver<GraphQLRequest<UserQ
  *   )
  * })
  */
-export const mockUpdateUserMutationApi = (resolver: ResponseResolver<GraphQLRequest<UpdateUserMutationVariables>, GraphQLContext<UpdateUserMutation>, any>) =>
+export const mockUpdateUserMutationApi = (resolver: Parameters<typeof api.mutation<UpdateUserMutation, UpdateUserMutationVariables>>[1]) =>
   api.mutation<UpdateUserMutation, UpdateUserMutationVariables>(
     'UpdateUser',
     resolver
@@ -88,7 +88,7 @@ exports[`msw Should generate handlerNames without suffix when withSuffix is fals
  *   )
  * })
  */
-export const mockUserQuery = (resolver: ResponseResolver<GraphQLRequest<UserQueryVariables>, GraphQLContext<UserQuery>, any>) =>
+export const mockUserQuery = (resolver: Parameters<typeof api.query<UserQuery, UserQueryVariables>>[1]) =>
   api.query<UserQuery, UserQueryVariables>(
     'User',
     resolver
@@ -104,7 +104,7 @@ export const mockUserQuery = (resolver: ResponseResolver<GraphQLRequest<UserQuer
  *   )
  * })
  */
-export const mockUpdateUserMutation = (resolver: ResponseResolver<GraphQLRequest<UpdateUserMutationVariables>, GraphQLContext<UpdateUserMutation>, any>) =>
+export const mockUpdateUserMutation = (resolver: Parameters<typeof api.mutation<UpdateUserMutation, UpdateUserMutationVariables>>[1]) =>
   api.mutation<UpdateUserMutation, UpdateUserMutationVariables>(
     'UpdateUser',
     resolver
@@ -124,7 +124,7 @@ exports[`msw Should generate mocks based on queries and mutations: content 1`] =
  *   )
  * })
  */
-export const mockUserQuery = (resolver: ResponseResolver<GraphQLRequest<UserQueryVariables>, GraphQLContext<UserQuery>, any>) =>
+export const mockUserQuery = (resolver: Parameters<typeof graphql.query<UserQuery, UserQueryVariables>>[1]) =>
   graphql.query<UserQuery, UserQueryVariables>(
     'User',
     resolver
@@ -140,7 +140,7 @@ export const mockUserQuery = (resolver: ResponseResolver<GraphQLRequest<UserQuer
  *   )
  * })
  */
-export const mockUpdateUserMutation = (resolver: ResponseResolver<GraphQLRequest<UpdateUserMutationVariables>, GraphQLContext<UpdateUserMutation>, any>) =>
+export const mockUpdateUserMutation = (resolver: Parameters<typeof graphql.mutation<UpdateUserMutation, UpdateUserMutationVariables>>[1]) =>
   graphql.mutation<UpdateUserMutation, UpdateUserMutationVariables>(
     'UpdateUser',
     resolver
@@ -150,7 +150,7 @@ export const mockUpdateUserMutation = (resolver: ResponseResolver<GraphQLRequest
 
 exports[`msw Should generate mocks based on queries and mutations: imports 1`] = `
 [
-  "import { graphql, ResponseResolver, GraphQLRequest, GraphQLContext } from 'msw'",
+  "import { graphql } from 'msw'",
 ]
 `;
 
@@ -166,7 +166,7 @@ exports[`msw Should use the "importOperationTypesFrom" setting: content with typ
  *   )
  * })
  */
-export const mockUserQuery = (resolver: ResponseResolver<GraphQLRequest<Types.UserQueryVariables>, GraphQLContext<Types.UserQuery>, any>) =>
+export const mockUserQuery = (resolver: Parameters<typeof graphql.query<Types.UserQuery, Types.UserQueryVariables>>[1]) =>
   graphql.query<Types.UserQuery, Types.UserQueryVariables>(
     'User',
     resolver
@@ -182,7 +182,7 @@ export const mockUserQuery = (resolver: ResponseResolver<GraphQLRequest<Types.Us
  *   )
  * })
  */
-export const mockUpdateUserMutation = (resolver: ResponseResolver<GraphQLRequest<Types.UpdateUserMutationVariables>, GraphQLContext<Types.UpdateUserMutation>, any>) =>
+export const mockUpdateUserMutation = (resolver: Parameters<typeof graphql.mutation<Types.UpdateUserMutation, Types.UpdateUserMutationVariables>>[1]) =>
   graphql.mutation<Types.UpdateUserMutation, Types.UpdateUserMutationVariables>(
     'UpdateUser',
     resolver

diff --git a/packages/plugins/typescript/msw/tests/msw.spec.ts b/packages/plugins/typescript/msw/tests/msw.spec.ts
@@ -87,14 +87,16 @@ describe('msw', () => {
     // handler variable and result type
     const queryVariablesType = `${importOperationTypesFrom}.${queryName}QueryVariables`;
     const queryType = `${importOperationTypesFrom}.${queryName}Query`;
-    expect(result.content).toContain(`GraphQLRequest<${queryVariablesType}>`);
-    expect(result.content).toContain(`GraphQLContext<${queryType}>`);
+    expect(result.content).toContain(
+      `Parameters<typeof graphql.query<${queryType}, ${queryVariablesType}>>[1]`,
+    );
     expect(result.content).toContain(`graphql.query<${queryType}, ${queryVariablesType}>`);
 
     const mutationVariablesType = `${importOperationTypesFrom}.${mutationName}MutationVariables`;
     const mutationType = `${importOperationTypesFrom}.${mutationName}Mutation`;
-    expect(result.content).toContain(`GraphQLRequest<${mutationVariablesType}>`);
-    expect(result.content).toContain(`GraphQLContext<${mutationType}>`);
+    expect(result.content).toContain(
+      `Parameters<typeof graphql.mutation<${mutationType}, ${mutationVariablesType}>>[1]`,
+    );
     expect(result.content).toContain(`graphql.mutation<${mutationType}, ${mutationVariablesType}>`);
 
     expect(result.content).toMatchSnapshot(