Use Apollo Client with Hooks and web3-react

ApolloReactManager.js

import React, { useMemo } from "react";

import { ApolloClient } from "apollo-client";
import { ApolloProvider } from "@apollo/react-hooks";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { useWeb3React } from "@web3-react/core";

const CHAIN_IDS_TO_NAMES = {
  1: "mainnet",
  3: "ropsten",
  4: "rinkeby",
  5: "goerli",
  42: "kovan",
};

function createClient(chainName = "") {
  /* By default, we display the data on mainnet */
  let uri;
  if (!chainName || chainName === "mainnet") {
    uri = process.env.REACT_APP_APOLLO_HTTP_URL;
  } else {
    uri = process.env.REACT_APP_APOLLO_HTTP_URL + "-" + chainName;
  }

  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({ uri }),
  });
}

export default function ApolloReactManager({ children }) {
  const { chainId } = useWeb3React();

  const client = useMemo(() => {
    const chainName = CHAIN_IDS_TO_NAMES[chainId] || "";
    return createClient(chainName);
  }, [chainId]);

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}