ctx.data() and ctx.error() types are incompatible with graphql package ExecutionResult result type

[ericbiewener]

Describe the bug

Passing the result of an executed graphql query to ctx.data() or ctx.errors() results in a TypeScript error.

Environment

• msw: 0.24.2
• nodejs: 14.11.2
• graphql: 15.3.0
• typescript: 4.1.2

To Reproduce

import { graphql as mswGraphql } from "msw";
import { graphql } from "graphql";
import { buildSchema } from "graphql/utilities";

mswGraphql.query("Foo", async (req, res, ctx) => {
  const rsp = await graphql(
    buildSchema(""),
    req.body?.query || "",
    {},
    req.variables
  );

  // Typescript errors thrown on both ctx.data() and ctx.errors()
  return res(ctx.data(rsp.data), ctx.errors(rsp.errors));
});

The return value of await graphql() is this ExecutionResult type, and that is incompatible with the types of ctx.data and ctx.error

ctx.data() error:

Argument of type '{ [key: string]: any; } | null | undefined' is not assignable to parameter of type 'Record<string, any>'.
  Type 'undefined' is not assignable to type 'Record<string, any>'.

ctx.errors() error:

Argument of type 'readonly GraphQLError[] | undefined' is not assignable to parameter of type 'Partial<GraphQLError>[] | null | undefined'.
  The type 'readonly GraphQLError[]' is 'readonly' and cannot be assigned to the mutable type 'Partial<GraphQLError>[]'.

Expected behavior

I would expect MSW's types to be compatible with graphql().

While simply fixing the types on those two methods would be sufficient, perhaps it would be worth introducing an additional ctx method that takes the return value of graphql() directly, e.g.

res(ctx.graphql(rsp))

This would allow it to handle any data/type transformations that may be required for compatibility with ctx.data/error(), while also adding a convenient API for users.

[kettanaito]

Hey, @ericbiewener. Thanks for reporting this.

Would this issue be solved if ctx.data could accept undefined as a value? You can try that be editing the node_modules/msw/lib/types/context/data.dts and changing its intput type:

import { ResponseTransformer } from '../response';
/**
 * Sets a given payload as a GraphQL response body.
 * @example
 * res(ctx.data({ user: { firstName: 'John' }}))
 * @see {@link https://mswjs.io/docs/api/context/data `ctx.data()`}
 */
-export declare const data: <T extends Record<string, any>>(payload: T) => ResponseTransformer;
+export declare const data: <T extends Record<string, any>>(payload: T | undefined) => ResponseTransformer;

You may need to also add null to the union type, as ExecutionResult can be null | undefined.

Could you let us know if this would indeed help?

[ericbiewener]

This does solve ctx.data(), but not ctx.errors().