fix: allow variables inference in GraphQLRequest

[obmarg]

I noticed that the return type of a graphql.query<T, N>... call is
GraphQLHandler<GraphQLRequest<any>> - it's not propagating the
variables generic parameter into the return type. I assume this wasn't
intentional.

This change annotates the constructor of the GraphQLHandler class with
the correct generic parameters, so the return type should now be
GraphQLHandler<GraphqlRequest<N>>.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b7a9e82:

Sandbox	Source
MSW React	Configuration

[kettanaito]

Hey, @obmarg. Thank you for submitting this fix, it looks great!

Please, could you share a quick example of when this fails during usage? I'd like to put that example into a typing test in the repo so we can catch regressions on this.

[obmarg]

@kettanaito - unfortunately I didn't see it fail - the older any type was too permissive, and was missing problems rather than causing them.

For context I was trying to write a typed version of the waitForRequest example in the docs. Here's an example that should have failed, but didn't seem to:

export const waitForRequest = <T extends GraphQLVariables>(
  server: SetupServerApi,
  handler: GraphQLHandler<GraphQLRequest<T>>,
): Promise<MockedRequest<GraphQLRequest<T>>> => {
  let requestId = '';
  return new Promise((resolve, reject) => {
    server.events.on('request:start', req => {
      if (req.body && typeof req.body === 'object') {
        const matchesMethod =
          handler.info.operationName === req.body.operationName;
        if (matchesMethod) {
          requestId = req.id;
        }
      }
    });
    server.events.on('request:match', req => {
      if (req.id === requestId) {
        resolve(req as MockedRequest<GraphQLRequest<T>>);
      }
    });
  });
};

const myHandler = graphql.query<
  { id: string },
  { someVariable: string }
>('MyQuery', (req, res, ctx) => {
  return res(ctx.data({ id: '123' }));
});

const {
  body: {
    // THIS SHOULD FAIL, but doesn't because `variables: any`
    variables: { whatever },
  },
} = await waitForRequest(mockServer, myHandler);

It's not exactly a failure of your core use case though, so I'm not sure exactly how to extract a test from it.

[kettanaito]

@obmarg, fantastic! I've minimized your usage example and put it into an automated typings test so we can catch regressions on this across releases.

[kettanaito]

Thank you for shipping this improvement, @obmarg! Welcome to contributors! 🎉

[github-actions]

🎉 This PR is included in version 0.36.8 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀