update apollo client on frontend

netgroup-polito · Nov 21, 2024 · 9a6cf4e · 9a6cf4e
1 parent a23e517
commit 9a6cf4e
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 182 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,14 +18,10 @@
     "@types/react-router-dom": "^5.1.7",
     "antd": "^4.15.2",
     "antd-button-color": "^1.0.4",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-ws": "^1.0.20",
     "craco-less": "^1.17.1",
     "graphql": "^15.5.1",
     "graphql-tag": "^2.12.5",
+    "graphql-ws": "^5.16.0",
     "keycloak-js": "12.0.4",
     "papaparse": "^5.3.1",
     "react": "^17.0.2",

diff --git a/frontend/src/components/activePage/TableInstance/RowInstanceTitle/RowInstanceTitle.tsx b/frontend/src/components/activePage/TableInstance/RowInstanceTitle/RowInstanceTitle.tsx
@@ -1,6 +1,6 @@
 import { CodeOutlined, DesktopOutlined } from '@ant-design/icons';
 import { Checkbox, Space, Typography } from 'antd';
-import { ApolloError } from 'apollo-client';
+import { ApolloError } from '@apollo/client';
 import { FC, useContext, useEffect, useState } from 'react';
 import { ErrorContext } from '../../../../errorHandling/ErrorContext';
 import { useApplyInstanceMutation } from '../../../../generated-types';

diff --git a/frontend/src/components/workspaces/ModalCreateTemplate/ModalCreateTemplate.tsx b/frontend/src/components/workspaces/ModalCreateTemplate/ModalCreateTemplate.tsx
@@ -13,7 +13,7 @@ import {
   CreateTemplateMutation,
   useWorkspaceTemplatesQuery,
 } from '../../../generated-types';
-import { FetchResult } from 'apollo-link';
+import { FetchResult } from '@apollo/client';
 import { ErrorContext } from '../../../errorHandling/ErrorContext';
 
 const alternativeHandle = { border: 'solid 2px #1c7afdd8' };

diff --git a/frontend/src/components/workspaces/Templates/TemplatesTable/TemplatesTable.tsx b/frontend/src/components/workspaces/Templates/TemplatesTable/TemplatesTable.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import { CaretRightOutlined } from '@ant-design/icons';
 import { Table } from 'antd';
-import { FetchResult } from 'apollo-link';
+import { FetchResult } from '@apollo/client';
 import { FC, useContext, useEffect, useState } from 'react';
 import {
   CreateInstanceMutation,

diff --git a/frontend/src/components/workspaces/Templates/TemplatesTableRow/TemplatesTableRow.tsx b/frontend/src/components/workspaces/Templates/TemplatesTableRow/TemplatesTableRow.tsx
@@ -5,7 +5,7 @@ import {
 } from '@ant-design/icons';
 import { Space, Tooltip } from 'antd';
 import Button from 'antd-button-color';
-import { FetchResult } from 'apollo-link';
+import { FetchResult } from '@apollo/client';
 import { FC, useContext, useState } from 'react';
 import { ReactComponent as SvgInfinite } from '../../../../assets/infinite.svg';
 import { ErrorContext } from '../../../../errorHandling/ErrorContext';

diff --git a/...c/components/workspaces/Templates/TemplatesTableRowSettings/TemplatesTableRowSettings.tsx b/...c/components/workspaces/Templates/TemplatesTableRowSettings/TemplatesTableRowSettings.tsx
@@ -6,7 +6,7 @@ import {
   DeleteOutlined,
   EllipsisOutlined,
 } from '@ant-design/icons';
-import { FetchResult } from 'apollo-link';
+import { FetchResult } from '@apollo/client';
 import { CreateInstanceMutation } from '../../../../generated-types';
 
 export interface ITemplatesTableRowSettingsProps {

diff --git a/frontend/src/contexts/TenantContext.tsx b/frontend/src/contexts/TenantContext.tsx
@@ -1,4 +1,4 @@
-import { ApolloError } from 'apollo-client';
+import { ApolloError } from '@apollo/client';
 import {
   createContext,
   FC,

diff --git a/frontend/src/errorHandling/ErrorContext.tsx b/frontend/src/errorHandling/ErrorContext.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 
-import { ApolloError } from 'apollo-client';
+import { ApolloError } from '@apollo/client';
 import {
   Component,
   createContext,

diff --git a/frontend/src/errorHandling/ErrorHandler/ErrorItem.tsx b/frontend/src/errorHandling/ErrorHandler/ErrorItem.tsx
@@ -1,6 +1,6 @@
 import { Alert, Space, Typography } from 'antd';
 import Button from 'antd-button-color';
-import { ApolloError } from 'apollo-client';
+import { ApolloError } from '@apollo/client';
 import { KeycloakError } from 'keycloak-js';
 import { FC, useState } from 'react';
 import { CustomError, ErrorTypes } from '../utils';

diff --git a/frontend/src/errorHandling/utils.tsx b/frontend/src/errorHandling/utils.tsx
@@ -1,4 +1,4 @@
-import { ApolloError } from 'apollo-client';
+import { ApolloError } from '@apollo/client';
 import { KeycloakError } from 'keycloak-js';
 
 export enum ErrorTypes {

diff --git a/frontend/src/graphql-components/apolloClientSetup/ApolloClientSetup.tsx b/frontend/src/graphql-components/apolloClientSetup/ApolloClientSetup.tsx
@@ -1,10 +1,8 @@
 import { getMainDefinition } from '@apollo/client/utilities';
 import { ApolloProvider } from '@apollo/react-hooks';
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { ApolloClient } from 'apollo-client';
-import { ApolloLink, split } from 'apollo-link';
-import { HttpLink } from 'apollo-link-http';
-import { WebSocketLink } from 'apollo-link-ws';
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
+import { createClient } from 'graphql-ws';
+import { ApolloClient, HttpLink, InMemoryCache, split } from '@apollo/client';
 import { FC, PropsWithChildren, useContext, useEffect, useState } from 'react';
 import { AuthContext } from '../../contexts/AuthContext';
 import { REACT_APP_CROWNLABS_GRAPHQL_URL } from '../../env';
@@ -26,39 +24,35 @@ const ApolloClientSetup: FC<PropsWithChildren<{}>> = props => {
 
   useEffect(() => {
     if (token) {
+      const authHeader = {
+        authorization: `Bearer ${token}`,
+      };
       const httpLink = new HttpLink({
         uri: httpUri,
-        headers: {
-          authorization: token ? `Bearer ${token}` : '',
-        },
+        headers: authHeader,
       });
 
-      const wsLink = new WebSocketLink({
-        uri: wsUri,
-        options: {
-          // Automatic reconnect in case of connection error
-          reconnect: true,
-          connectionParams: {
-            authorization: token ? `Bearer ${token}` : '',
-          },
-        },
-      });
-
-      const terminatingLink = split(
-        ({ query }) => {
-          const { kind, operation }: Definition = getMainDefinition(query);
-          // If this is a subscription query, use wsLink, otherwise use httpLink
-          return kind === 'OperationDefinition' && operation === 'subscription';
-        },
-        wsLink,
-        httpLink
+      const wsLink = new GraphQLWsLink(
+        createClient({
+          url: wsUri,
+          connectionParams: authHeader,
+          shouldRetry: () => true,
+        })
       );
 
-      const link = ApolloLink.from([terminatingLink]);
-
       setApolloClient(
         new ApolloClient({
-          link,
+          link: split(
+            ({ query }) => {
+              const { kind, operation }: Definition = getMainDefinition(query);
+              // If this is a subscription query, use wsLink, otherwise use httpLink
+              return (
+                kind === 'OperationDefinition' && operation === 'subscription'
+              );
+            },
+            wsLink,
+            httpLink
+          ),
           cache: new InMemoryCache(),
         })
       );