apollo-link-batch-http (batch) queries are not getting intercepted

Environment

Name	Version
msw	0.24.2
browser	chrome Version 87.0.4280.88 (Official Build) (x86_64)
OS	macOS Big Sur 11.0.1 (20B29)

Request handlers

export const handlers = [
  graphql.operation((req, res, ctx) => {
    console.log({ req, res, ctx });
    return res(
      ctx.data({
        user: {
          username: 'test',
          firstName: 'John',
        },
      })
    );
  }),

  graphql.query('getTest', (req, res, ctx) => {
    return res(
      ctx.data({
        user: {
          username: 'test',
          firstName: 'John',
        },
      })
    );
  }),
];

Actual request

https://www.apollographql.com/docs/link/links/batch-http/ Using Apollo Client to perform a normal batch query

ie.

import { BatchHttpLink } from "apollo-link-batch-http";
const link = new BatchHttpLink({ uri: "/graphql" });

Current behavior

batch queries are not getting intercepted but if I switch from BatchHttpLink to a regular HttpLink, the interception works as expected.

Expected behavior

batch queries get intercepted

[logaretm]

Hello, I maintain a GraphQL client for Vue.js and used the following workaround for the batched requests test.

As @antoniosZ pointed out, it requires intercepting it as a rest request, but I utilized the handlers you typically define earlier

export const handlers = [
  // some graphql handlers ...
  // add this to the end of GQL handlers
  rest.post('https://test.com/graphql', async (req, res) => {
    if (!Array.isArray(req.body)) {
      throw new Error('Unknown operation');
    }

    // map the requests to responses using their handlers
    const data = await Promise.all(
      req.body.map(async op => {
        const partReq = { ...req, body: op };
        const handler = handlers.find(h => h.test(partReq));
        // no handler matched that operation
        if (!handler) {
          return Promise.reject(new Error(`Cannot handle operation ${op}`));
        }

        // execute and return the response-like object
        return handler.run(partReq);
      })
    );

    return res(res => {
      res.headers.set('content-type', 'application/json');

      // responses need extraction from the individual requests
      // and we stitch them into a single array response
      res.body = JSON.stringify(
        data.map(d => {
          return JSON.parse(d?.response?.body) || {};
        })
      );

      return res;
    });
  }),
];

I realize this might not cover most cases, but works for me for now.

[kettanaito]

@msutkowski did some incredible job on the initial support phase. We’ve merged a major refactoring to how the request handlers work internally, so that pull request needs to be adjusted. I will try to resolve the conflicts and leave it at the same state for any volunteers to collaborate.

Thank you for your interest in this. We’d love to make batched operations support happen.