Apollo batch http ( apollo-link-batch-http ) call creates multiple batches instead of just one

Heads up, I am Fairly new to React and Apollo ( GraphQl ).

Currently, my react app is making GraphQl call to endpoint /api/graphql and there are 9 individual http calls ( graphql queries ) going from React --> Rails endpoint to fetch the data.

I am trying to utilize Batching at both server and client side and facing issues while achieving desired results at client side such that I can reduce the number of requests from 9 to 1.

In this below index.js ... Each Provider contains a graph ql query and my intention is to batch all of them.

ReactDOM.render(
  <AppErrorBoundary client={getErrorClient()}>
    <AppStateProvider>
      <ApolloProvider client={apolloClient}>
        <UserProvider>
          <SiteProvider>
            <I18nProvider>
              <SiteStyleProvider>
                <ThemeProvider>
                  <CartProvider>
                    <FeatureFlagsProvider>
                      <PaymentMethodProvider>
                        <App />
                      </PaymentMethodProvider>
                    </FeatureFlagsProvider>
                  </CartProvider>
                </ThemeProvider>
              </SiteStyleProvider>
            </I18nProvider>
          </SiteProvider>
        </UserProvider>
      </ApolloProvider>
    </AppStateProvider>
  </AppErrorBoundary>,
  document.getElementById('root'),);

In below snippet, You can see where I have initialized BatchHttpLink

import { BatchHttpLink } from 'apollo-link-batch-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { onError } from 'apollo-link-error';

const cache = new InMemoryCache({});

const httpLink = new BatchHttpLink({
  uri: '/api/graphql',
  credentials: 'same-origin',
    batchKey: (operation: Operation) => operation.operationName.endsWith('Query') ? 'batch1' : 'batch2',
});

const errorLink = onError(({ networkError = {} }) => {
  if (networkError.statusCode === 401) {
    return false;
  }
  return false;
});

const link = errorLink.concat(httpLink);

export const apolloClient = new ApolloClient({
  link,
  cache: cache.restore(window.__APOLLO_CLIENT__),
});

export default apolloClient;

Expected to see only 1 graphql batch query ..But see few graph queries going. Note that some of the graphql queries go with 4 queries inside it and some go with 1 query inside it.

I have also tried all combinations of BatchMax, BatchInterval and BatchKey to make a single batch call .. But no luck so far.

Trying to understand whats going on here...