Merge pull request #97 from Team-INSERT/hotfix/graphql/access-token

게시판 액세스 토큰 expired 이슈 픽스

Author: Ubinquitous

src/provider/apolloClientProvider.helper.tsx

@@ -1,11 +1,51 @@
-import { getToken } from "@/helpers";
-import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+import {
+  ApolloClient,
+  ApolloProvider,
+  HttpLink,
+  InMemoryCache,
+} from "@apollo/client";
+import { onError } from "@apollo/client/link/error";
+import { setContext } from "@apollo/client/link/context";
+import { RetryLink } from "@apollo/client/link/retry";
 import { PropsWithChildren } from "react";
+import Storage from "@/apis/storage";
+import { TOKEN } from "@/constants";
+import { refresh } from "@/apis/token";
 
-const client = new ApolloClient({
+const authLink = setContext((_, { headers }) => {
+  const token = Storage.getItem(TOKEN.ACCESS);
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : "",
+    },
+  };
+});
+
+const errorLink = onError(({ operation, forward }) => {
+  refresh().then(() => forward(operation));
+});
+
+const httpLink = new HttpLink({
   uri: `${process.env.NEXT_PUBLIC_BASE_URL}api/graphql`,
+});
+
+const retryLink = new RetryLink({
+  delay: {
+    initial: 300,
+    max: Infinity,
+    jitter: true,
+  },
+  attempts: {
+    max: 2,
+    retryIf: (error) => !!error,
+  },
+});
+
+const client = new ApolloClient({
+  link: retryLink.concat(errorLink).concat(authLink).concat(httpLink),
   headers: {
-    Authorization: getToken(),
+    Authorization: Storage.getItem(TOKEN.ACCESS) ?? "",
   },
   cache: new InMemoryCache(),
   connectToDevTools: true,