add two libs: graphql and tokenstorage

src/config/api.ts

@@ -0,0 +1,2 @@
+export const API_URI =
+  process.env.REACT_APP_API_URI ?? "http://localhost:8080/graphql";

src/libs/graphql/createClient.ts

@@ -0,0 +1,39 @@
+import {
+  ApolloClient,
+  InMemoryCache,
+  NormalizedCacheObject,
+  ApolloLink,
+} from "@apollo/client";
+import { createUploadLink } from "apollo-upload-client";
+import { onError } from "@apollo/client/link/error";
+import createAuthMiddleware from "./links/authMiddleware";
+import TokenStorage from "libs/tokenstorage/TokenStorage";
+
+const createClient = (
+  uri: string,
+  tokenStorage: TokenStorage
+): ApolloClient<NormalizedCacheObject> => {
+  return new ApolloClient({
+    queryDeduplication: true,
+    cache: new InMemoryCache(),
+    link: ApolloLink.from([
+      createAuthMiddleware(tokenStorage),
+      onError(({ graphQLErrors, networkError }) => {
+        if (process.env.NODE_ENV === "development") {
+          if (graphQLErrors)
+            graphQLErrors.map(({ message, locations, path }) =>
+              console.log(
+                `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+              )
+            );
+          if (networkError) console.log(`[Network error]: ${networkError}`);
+        }
+      }),
+      createUploadLink({
+        uri,
+      }),
+    ]),
+  });
+};
+
+export default createClient;

src/libs/graphql/links/authMiddleware.ts

@@ -0,0 +1,17 @@
+import { ApolloLink, NextLink, Operation } from "@apollo/client";
+import TokenStorage from "libs/tokenstorage/TokenStorage";
+
+const createAuthMiddleware = (tokenStorage: TokenStorage) => {
+  return new ApolloLink((operation: Operation, forward: NextLink) => {
+    if (tokenStorage.token) {
+      operation.setContext({
+        headers: {
+          Authorization: "Bearer " + tokenStorage.token,
+        },
+      });
+    }
+    return forward(operation);
+  });
+};
+
+export default createAuthMiddleware;

src/libs/tokenstorage/TokenStorage.ts

@@ -0,0 +1,29 @@
+import { isString } from "lodash";
+
+export const DEFAULT_STORAGE_KEY = "token";
+
+export interface TokenStorageOptions {
+  key?: string;
+}
+
+export default class TokenStorage {
+  public key: string;
+  public token: string | null;
+  constructor({ key }: TokenStorageOptions = {}) {
+    this.key = isString(key) ? key : DEFAULT_STORAGE_KEY;
+    this.token = this.loadToken();
+  }
+
+  private loadToken() {
+    return localStorage.getItem(this.key);
+  }
+
+  private saveToken(token: string) {
+    return localStorage.setItem(this.key, token);
+  }
+
+  public setToken(newToken: string) {
+    this.token = newToken;
+    this.saveToken(newToken);
+  }
+}