How to use the @apollo/client/link/ws.WebSocketLink function in @apollo/client

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);
        return (
            definition.kind === "OperationDefinition" &&
            definition.operation === "subscription"
        );
    },
    wsLink,
    httpLink,

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
    ? split(
          ({ query }) => {
              const definition = getMainDefinition(query);
              return definition.kind === "OperationDefinition" && definition.operation === "subscription";
          },
          wsLink,
          httpLink
      )