fix: accept a narrower response body type by default (#2107)

Author: kettanaito

src/core/HttpResponse.ts

@@ -1,4 +1,5 @@
 import type { DefaultBodyType, JsonBodyType } from './handlers/RequestHandler'
+import type { NoInfer } from './typeUtils'
 import {
   decorateResponse,
   normalizeResponseInit,
@@ -48,7 +49,7 @@ export class HttpResponse extends Response {
    * HttpResponse.text('Error', { status: 500 })
    */
   static text<BodyType extends string>(
-    body?: BodyType | null,
+    body?: NoInfer<BodyType> | null,
     init?: HttpResponseInit,
   ): StrictResponse<BodyType> {
     const responseInit = normalizeResponseInit(init)
@@ -77,7 +78,7 @@ export class HttpResponse extends Response {
    * HttpResponse.json({ error: 'Not Authorized' }, { status: 401 })
    */
   static json<BodyType extends JsonBodyType>(
-    body?: BodyType | null,
+    body?: NoInfer<BodyType> | null,
     init?: HttpResponseInit,
   ): StrictResponse<BodyType> {
     const responseInit = normalizeResponseInit(init)

src/core/graphql.ts

@@ -31,7 +31,10 @@ export type GraphQLRequestHandler = <
     | GraphQLHandlerNameSelector
     | DocumentNode
     | TypedDocumentNode<Query, Variables>,
-  resolver: GraphQLResponseResolver<Query, Variables>,
+  resolver: GraphQLResponseResolver<
+    [Query] extends [never] ? GraphQLQuery : Query,
+    Variables
+  >,
   options?: RequestHandlerOptions,
 ) => GraphQLHandler
 
@@ -41,7 +44,7 @@ export type GraphQLResponseResolver<
 > = ResponseResolver<
   GraphQLResolverExtras<Variables>,
   null,
-  GraphQLResponseBody<Query>
+  GraphQLResponseBody<[Query] extends [never] ? GraphQLQuery : Query>
 >
 
 function createScopedGraphQLHandler(
@@ -61,7 +64,7 @@ function createScopedGraphQLHandler(
 
 function createGraphQLOperationHandler(url: Path) {
   return <
-    Query extends Record<string, any>,
+    Query extends GraphQLQuery = GraphQLQuery,
     Variables extends GraphQLVariables = GraphQLVariables,
   >(
     resolver: ResponseResolver<

src/core/handlers/GraphQLHandler.ts

@@ -68,10 +68,13 @@ export interface GraphQLJsonRequestBody<Variables extends GraphQLVariables> {
   variables?: Variables
 }
 
-export interface GraphQLResponseBody<BodyType extends DefaultBodyType> {
-  data?: BodyType | null
-  errors?: readonly Partial<GraphQLError>[] | null
-}
+export type GraphQLResponseBody<BodyType extends DefaultBodyType> =
+  | {
+      data?: BodyType | null
+      errors?: readonly Partial<GraphQLError>[] | null
+    }
+  | null
+  | undefined
 
 export function isDocumentNode(
   value: DocumentNode | any,

src/core/typeUtils.ts

@@ -18,3 +18,9 @@ export type RequiredDeep<
           : RequiredDeep<NonNullable<Type[Key]>, U>
       }
     : Type
+
+/**
+ * @fixme Remove this once TS 5.4 is the lowest supported version.
+ * Because "NoInfer" is a built-in type utility there.
+ */
+export type NoInfer<T> = [T][T extends any ? 0 : never]

test/typings/custom-resolver.test-d.ts

@@ -35,10 +35,12 @@ it('custom http resolver has correct parameters type', () => {
 
   http.get<{ id: string }, never, 'hello'>(
     '/user/:id',
-    // @ts-expect-error Response body doesn't match the response type.
     withDelay(250, ({ params }) => {
       expectTypeOf(params).toEqualTypeOf<{ id: string }>()
-      return HttpResponse.text('non-matching')
+      return HttpResponse.text(
+        // @ts-expect-error Response body doesn't match the response type.
+        'non-matching',
+      )
     }),
   )
 })
@@ -72,12 +74,12 @@ it('custom graphql resolver has correct variables and response type', () => {
 it('custom graphql resolver does not accept unknown variables', () => {
   graphql.query<{ number: number }, { id: string }>(
     'GetUser',
-    // @ts-expect-error Incompatible response query type.
     identityGraphQLResolver(({ variables }) => {
       expectTypeOf(variables).toEqualTypeOf<{ id: string }>()
 
       return HttpResponse.json({
         data: {
+          // @ts-expect-error Incompatible response query type.
           user: {
             id: variables.id,
           },

test/typings/graphql.test-d.ts

@@ -37,13 +37,12 @@ it('graphql mutation allows explicit null as the response body type for the muta
   })
 })
 it('graphql mutation does not allow mismatched mutation response', () => {
-  graphql.mutation<{ key: string }>(
-    'MutateData',
-    // @ts-expect-error Response data doesn't match the query type.
-    () => {
-      return HttpResponse.json({ data: {} })
-    },
-  )
+  graphql.mutation<{ key: string }>('MutateData', () => {
+    return HttpResponse.json({
+      // @ts-expect-error Response data doesn't match the query type.
+      data: {},
+    })
+  })
 })
 
 it("graphql query does not accept null as variables' generic query type ", () => {
@@ -53,6 +52,7 @@ it("graphql query does not accept null as variables' generic query type ", () =>
     null
   >('', () => {})
 })
+
 it("graphql query accepts the correct type for the variables' generic query type", () => {
   /**
    * Response body type (GraphQL query type).
@@ -76,15 +76,14 @@ it('graphql query allows explicit null as the response body type for the query',
 })
 
 it('graphql query does not accept invalid data type for the response body type for the query', () => {
-  graphql.query<{ id: string }>(
-    'GetUser',
-    // @ts-expect-error "id" type is incorrect
-    () => {
-      return HttpResponse.json({
-        data: { id: 123 },
-      })
-    },
-  )
+  graphql.query<{ id: string }>('GetUser', () => {
+    return HttpResponse.json({
+      data: {
+        // @ts-expect-error "id" type is incorrect
+        id: 123,
+      },
+    })
+  })
 })
 
 it('graphql query does not allow empty response when the query type is defined', () => {
@@ -114,12 +113,12 @@ it("graphql operation does not accept null as variables' generic operation type"
 })
 
 it('graphql operation does not allow mismatched operation response', () => {
-  graphql.operation<{ key: string }>(
-    // @ts-expect-error Response data doesn't match the query type.
-    () => {
-      return HttpResponse.json({ data: {} })
-    },
-  )
+  graphql.operation<{ key: string }>(() => {
+    return HttpResponse.json({
+      // @ts-expect-error Response data doesn't match the query type.
+      data: {},
+    })
+  })
 })
 
 it('graphql operation allows explicit null as the response body type for the operation', () => {
@@ -140,64 +139,62 @@ it('graphql handlers allow passthrough responses', () => {
 
     return HttpResponse.json({ data: {} })
   })
+})
 
-  it("graphql variables cannot extract type from the runtime 'DocumentNode'", () => {
-    /**
-     * Supports `DocumentNode` as the GraphQL operation name.
-     */
-    const getUser = parse(`
+it("graphql variables cannot extract type from the runtime 'DocumentNode'", () => {
+  /**
+   * Supports `DocumentNode` as the GraphQL operation name.
+   */
+  const getUser = parse(`
         query GetUser {
           user {
             firstName
           }
         }
       `)
-    graphql.query(getUser, () => {
-      return HttpResponse.json({
-        // Cannot extract query type from the runtime `DocumentNode`.
-        data: { arbitrary: true },
-      })
+  graphql.query(getUser, () => {
+    return HttpResponse.json({
+      // Cannot extract query type from the runtime `DocumentNode`.
+      data: { arbitrary: true },
     })
   })
+})
 
-  it('graphql query cannot extract variable and reponse types', () => {
-    const getUserById = parse(`
+it('graphql query cannot extract variable and reponse types', () => {
+  const getUserById = parse(`
       query GetUserById($userId: String!) {
         user(id: $userId) {
           firstName
         }
       }
       `)
-    graphql.query(getUserById, ({ variables }) => {
-      variables.userId.toUpperCase()
-
-      // Extracting variables from the native "DocumentNode" is impossible.
-      variables.foo
-
-      return HttpResponse.json({
-        data: {
-          user: {
-            firstName: 'John',
-            // Extracting a query body type from the "DocumentNode" is impossible.
-            lastName: 'Maverick',
-          },
+  graphql.query(getUserById, ({ variables }) => {
+    // Cannot extract variables type from a DocumentNode.
+    expectTypeOf(variables).toEqualTypeOf<Record<string, any>>()
+
+    return HttpResponse.json({
+      data: {
+        user: {
+          firstName: 'John',
+          // Extracting a query body type from the "DocumentNode" is impossible.
+          lastName: 'Maverick',
         },
-      })
+      },
     })
   })
+})
 
-  it('graphql mutation cannot extract variable and reponse types', () => {
-    const createUser = parse(`
+it('graphql mutation cannot extract variable and reponse types', () => {
+  const createUser = parse(`
         mutation CreateUser {
           user {
             id
           }
         }
       `)
-    graphql.mutation(createUser, () => {
-      return HttpResponse.json({
-        data: { arbitrary: true },
-      })
+  graphql.mutation(createUser, () => {
+    return HttpResponse.json({
+      data: { arbitrary: true },
     })
   })
 })

test/typings/http.test-d.ts

@@ -3,27 +3,21 @@ import { http, HttpResponse, passthrough } from 'msw'
 
 it('supports a single path parameter', () => {
   http.get<{ id: string }>('/user/:id', ({ params }) => {
-    params.id.toUpperCase()
-
     expectTypeOf(params).toEqualTypeOf<{ id: string }>()
   })
 })
 
 it('supports multiple path parameters', () => {
-  http.get<{ a: string; b: string[] }>('/user/:a/:b/:b', ({ params }) => {
-    params.a.toUpperCase()
-    params.b.map((x) => x)
-
-    expectTypeOf(params).toEqualTypeOf<{ a: string; b: string[] }>()
+  type Params = { a: string; b: string[] }
+  http.get<Params>('/user/:a/:b/:b', ({ params }) => {
+    expectTypeOf(params).toEqualTypeOf<Params>()
   })
 })
 
 it('supports path parameters declared via type', () => {
-  type UserPathParams = { id: string }
-  http.get<UserPathParams>('/user/:id', ({ params }) => {
-    params.id.toUpperCase()
-
-    expectTypeOf(params).toEqualTypeOf<UserPathParams>()
+  type Params = { id: string }
+  http.get<Params>('/user/:id', ({ params }) => {
+    expectTypeOf(params).toEqualTypeOf<Params>()
   })
 })
 
@@ -32,13 +26,11 @@ it('supports path parameters declared via interface', () => {
     id: string
   }
   http.get<PostPathParameters>('/user/:id', ({ params }) => {
-    params.id.toUpperCase()
-
     expectTypeOf(params).toEqualTypeOf<PostPathParameters>()
   })
 })
 
-it('supports request body generic', () => {
+it('supports json as a request body generic argument', () => {
   http.post<never, { id: string }>('/user', async ({ request }) => {
     const data = await request.json()
 
@@ -50,7 +42,7 @@ it('supports request body generic', () => {
   })
 })
 
-it('supports null as the response body generic', () => {
+it('supports null as the request body generic', () => {
   http.get<never, null>('/user', async ({ request }) => {
     const data = await request.json()
     expectTypeOf(data).toEqualTypeOf<null>()
@@ -63,12 +55,77 @@ it('returns plain Response withouth explicit response body generic', () => {
   })
 })
 
-it('supports response body generic', () => {
+it('supports string as a response body generic argument', () => {
+  http.get<never, never, string>('/', ({ request }) => {
+    if (request.headers.has('x-foo')) {
+      return HttpResponse.text('conditional')
+    }
+
+    return HttpResponse.text('hello')
+  })
+})
+
+it('supports exact string as a response body generic argument', () => {
+  http.get<never, never, 'hello'>('/', () => {
+    return HttpResponse.text('hello')
+  })
+
+  http.get<never, never, 'hello'>('/', () => {
+    // @ts-expect-error Non-matching response body type.
+    return HttpResponse.text('unexpected')
+  })
+})
+
+it('supports object as a response body generic argument', () => {
   http.get<never, never, { id: number }>('/user', () => {
     return HttpResponse.json({ id: 1 })
   })
 })
 
+it('supports narrow object as a response body generic argument', () => {
+  http.get<never, never, { id: 123 }>('/user', () => {
+    return HttpResponse.json({ id: 123 })
+  })
+
+  http.get<never, never, { id: 123 }>('/user', () => {
+    return HttpResponse.json({
+      // @ts-expect-error Non-matching response body type.
+      id: 456,
+    })
+  })
+})
+
+it('supports object with extra keys as a response body generic argument', () => {
+  type ResponseBody = {
+    [key: string]: number | string
+    id: 123
+  }
+
+  http.get<never, never, ResponseBody>('/user', () => {
+    return HttpResponse.json({
+      id: 123,
+      // Extra keys are allowed if they satisfy the index signature.
+      name: 'John',
+    })
+  })
+
+  http.get<never, never, ResponseBody>('/user', () => {
+    return HttpResponse.json({
+      // @ts-expect-error Must be 123.
+      id: 456,
+      name: 'John',
+    })
+  })
+
+  http.get<never, never, ResponseBody>('/user', () => {
+    return HttpResponse.json({
+      id: 123,
+      // @ts-expect-error Must satisfy the index signature.
+      name: { a: 1 },
+    })
+  })
+})
+
 it('supports response body generic declared via type', () => {
   type ResponseBodyType = { id: number }
   http.get<never, never, ResponseBodyType>('/user', () => {
@@ -127,3 +184,14 @@ it("accepts passthrough in HttpResponse's body", () => {
     return HttpResponse.json({ id: 1 })
   })
 })
+
+it('infers a narrower json response type', () => {
+  type ResponseBody = {
+    a: number
+  }
+
+  http.get<never, never, ResponseBody>('/', () => {
+    // @ts-expect-error Unknown property "b".
+    return HttpResponse.json({ a: 1, b: 2 })
+  })
+})