How to use the @apollo/client.HttpLink function in @apollo/client

HttpLink,
    split,
} from '@apollo/client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { App } from './App';

const wsLink = new WebSocketLink({
    uri: `ws://localhost:8085/query`,
    options: {
        reconnect: true
    }
});

const httpLink = new HttpLink({ uri: 'http://localhost:8085/query' });


// depending on what kind of operation is being sent
const link = split(
    // split based on operation type
    ({ query }) => {
        const { kind, operation } = getMainDefinition(query);
        return kind === 'OperationDefinition' && operation === 'subscription';
    },
    wsLink,
    httpLink,
);

const apolloClient = new ApolloClient({
    link: link,
    cache: new InMemoryCache(),

export default function App() {
  const client = new ApolloClient({
    link: new HttpLink({
      credentials: 'same-origin',
      fetch: authenticatedFetch(window.app), // created in shopify_app.js
      uri: '/graphql'
    }),
    cache: new InMemoryCache()
  });

  return (

import { ChakraProvider } from "@chakra-ui/core";

import { split, HttpLink } from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
// import { WebSocketLink } from "apollo-link-ws";
import { WebSocketLink } from "@apollo/client/link/ws";
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import { useState, useEffect } from "react";

const hostname = process.browser ? window.location.host : "127.0.0.1:8080";
const tls = process.browser ? window.location.protocol : "http:";

const https = tls === "http:" ? "http" : "https";
const wss = tls === "http:" ? "ws" : "wss";

const httpLink = new HttpLink({
    uri: `${https}://${hostname}/graphql`,
    headers: {
        Origin: `${https}://${hostname}`,
    },
});

const wsLink = process.browser
    ? new WebSocketLink({
          uri: `${wss}://${hostname}/graphql`,
          options: {
              reconnect: true,
          },
      })
    : null;

const splitLink = process.browser

.then(config => {
            if (!config) throw new Error("Could not load config");
            const client = new ApolloClient({
              name: "Apollo CLI",
              version,
              link: new HttpLink({
                uri: config.engine.endpoint,
                headers: {
                  "x-api-key": config.engine.apiKey || service,
                  "apollo-client-reference-id": referenceID
                },
                fetch: fetch as any
              }),
              cache: new InMemoryCache()
            });
            setCommandReady({
              client,
              config,
              oclif
            });
          })
          .catch(e => console.error(e));

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { ObserverPage } from "@app/components/pages";

import { ThemeProvider } from "theme-ui";
import theme from "./theme";

import { split, HttpLink } from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
import { WebSocketLink } from "@apollo/client/link/ws";

import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";

const httpLink = new HttpLink({
    uri: "http://localhost:4000/graphql",
    headers: {
        Origin: "http://localhost:4000",
    },
});

const wsLink = new WebSocketLink({
    uri: `ws://localhost:4000/graphql`,
    options: {
        reconnect: true,
    },
});

const splitLink = split(
    ({ query }) => {
        const definition = getMainDefinition(query);

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: new HttpLink({
      uri: "/api/graphql/",
    }),
    cache: new InMemoryCache({
      typePolicies: {
        Project: {
          keyFields: ["name"],
        },
      },
    }),
  });
}