Chrome extension project - Apollo-client / @apollo/client - not able to pass customFetch to call API from background.js

We are using apollo-boost to import apolloClient and we pass fetch: customFetch as parameter just to call the APIs from the background.js file. Since now apollo-boost has been deprecated, I am just trying to migrate the same to new version of 'apollo-client'.

Below are the techniques I tried:

• imported ApolloClient from @apollo/client. But not able to send customFetch function. Our API server is build using graphql server. In the document I can see how to send customFetch for RESTLINK but not for graphql.
• imported ApolloClient from apollo-client as per the migration document from apollo. But it is also not working as expected. Even the APIs are not getting called.

Am I missing some this here. Please refer below the before and after code.

After code

import { configureStore } from '@koncert/shared-components';
import React from 'react';
import { Provider } from 'react-redux';
import { MemoryRouter as Router } from 'react-router-dom';
import Routes from '../../components/Routes';
// import ApolloClient from 'apollo-client';
import '../../styles/app.scss';
import customFetch from '../../lib/fetch-mp';
// import { InMemoryCache } from 'apollo-cache-inmemory';
import '../../Vendor';
import { TokenProvider } from '../../components/TokenContext';
import ErrorBoundary from '../../components/Common/ErrorBoundary.tsx';
import { ApolloClient, ApolloProvider } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';

const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors)
        graphQLErrors.forEach(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
          ),
        );
      if (networkError) console.log(`[Network error]: ${networkError}`);
    }),
    new HttpLink({
      uri: `${process.env.REACT_APP_STORIES_GRAPHQL_URI}`,
      fetch: customFetch,
      credentials: 'same-origin'
    })
  ]),
  cache: new InMemoryCache(),
});

Before code

import { ApolloProvider } from '@apollo/react-hooks';
import { configureStore } from '@koncert/shared-components';
import React from 'react';
import { Provider } from 'react-redux';
import { MemoryRouter as Router } from 'react-router-dom';
import Routes from '../../components/Routes';
import ApolloClient from 'apollo-boost';
import '../../styles/app.scss';
import customFetch from '../../lib/fetch-mp';
import { InMemoryCache } from 'apollo-cache-inmemory';
import '../../Vendor';
import { TokenProvider } from '../../components/TokenContext';
import ErrorBoundary from '../../components/Common/ErrorBoundary.tsx';

const client = new ApolloClient({
  uri: `${process.env.REACT_APP_STORIES_GRAPHQL_URI}`,
  fetch: customFetch,
  cache: new InMemoryCache(),
});

One more error I got while using apollo-boost is Invariant Violation: 29 on react apollo grapql

Not sure what mistake I am doing here.