Gaurab Paul

Polyglot software developer & consultant passionate about web development, distributed systems and open source technologies

Support my blog and open-source work

Tags

Using Apollo Batch Link selectively
Posted  2 years ago

In a previous post we have explored the concept of Links in Apollo and usage of ApolloLink.split for routing requests selectively towards one of multiple terminating links.

This utility is also useful when we want to selectively batch our operations.

The caveat with Apollo batch-link is that, the entire batch is delivered only once the slowest operation in the batch completes.

If we know ahead of time that some of our operations are expected to take longer time (We may at times be ok with that because they don't impact the user experience) then we can exclude them from batching.

The link selector predicate we pass to ApolloLink.split can look at the operation name and decide whether to route the request to BatchLink or normal HttpLink.

import {
  ApolloClient,
  InMemoryCache,
  ApolloLink,
  Operation,
  HttpLink,
} from '@apollo/client';

const httpLink = new HttpLink({
  uri: "/graphql"
  // ...Additional options
});

const batchLink = new BatchHttpLink({
    batchInterval: 250
});

const operationBatchingBlacklist = new Set<string>();
operationBatchingBlacklist.add("someExpensiveOperation");

const mediatorLink = ApolloLink.split(
  function shouldBatchRequests({ operationName }: Operation) {
    return !operationBatchingBlacklist.has(operationName);
  },
  batchLink,
  httpLink
);

export const client = new ApolloClient({
  uri: '/graphql',
  link: mediatorLink
});