Preview:
import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";

const httpLink = createHttpLink({
  uri: <insert uri here>,
});

//Without authentication
const createApolloClient = () => {
  return new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
  });
}


/* With authentication using setContext. <authentication_token> can also be a function or method returning an authentication token */
import {setContext} from "@apollo/client/link/context";

const createApolloClient = (<authentication_token>) => {
  const authLink = setContext(async (_, { headers }) => {
    try {
      const accessToken = <authentication_token>;
      return {
        headers: {
          ...headers,
          authorization: accessToken ? `Bearer ${accessToken}` : "",
        },
      };
    } catch (e) {
      console.log(e);
      return {
        headers,
      };
    }
  });

  return new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });
};
  

export default createApolloClient;
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter