stash/ui/v2.5/src/core/createClient.ts

import {
  ApolloClient,
  InMemoryCache,
  split,
  from,
  ServerError,
  HttpLink,
} from "@apollo/client";
import { WebSocketLink } from "@apollo/client/link/ws";
import { onError } from "@apollo/client/link/error";
import { getMainDefinition } from "@apollo/client/utilities";

export const getPlatformURL = (ws?: boolean) => {
  const platformUrl = new URL(window.location.origin);

  if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
    platformUrl.port = "9999"; // TODO: Hack. Development expects port 9999

    if (process.env.REACT_APP_HTTPS === "true") {
      platformUrl.protocol = "https:";
    }
  }

  if (ws) {
    platformUrl.protocol = "ws:";
  }

  return platformUrl;
};

export const createClient = () => {
  const platformUrl = getPlatformURL();
  const wsPlatformUrl = getPlatformURL(true);

  if (platformUrl.protocol === "https:") {
    wsPlatformUrl.protocol = "wss:";
  }

  const url = `${platformUrl.toString().slice(0, -1)}/graphql`;
  const wsUrl = `${wsPlatformUrl.toString().slice(0, -1)}/graphql`;

  const httpLink = new HttpLink({
    uri: url,
  });

  const wsLink = new WebSocketLink({
    uri: wsUrl,
    options: {
      reconnect: true,
    },
  });

  const errorLink = onError(({ networkError }) => {
    // handle unauthorized error by redirecting to the login page
    if (networkError && (networkError as ServerError).statusCode === 401) {
      // redirect to login page
      window.location.href = "/login";
    }
  });

  const splitLink = split(
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === "OperationDefinition" &&
        definition.operation === "subscription"
      );
    },
    wsLink,
    httpLink
  );

  const link = from([errorLink, splitLink]);

  const cache = new InMemoryCache();
  const client = new ApolloClient({
    link,
    cache,
  });

  return {
    cache,
    client,
  };
};