chore(deps): update dependency @apollo/client to v4

apollo/cache.ts

@@ -1,5 +1,5 @@
-import { type ApolloCache, InMemoryCache } from '@apollo/client/core'
-import { relayStylePagination } from '@apollo/client/utilities/policies/pagination'
+import { type ApolloCache, InMemoryCache } from '@apollo/client'
+import { relayStylePagination } from '@apollo/client/utilities'
 import introspection from '~/apollo/introspection'
 import { gql } from '.'
 import type { MeQuery } from './graphql'
@@ -17,7 +17,7 @@ export const cache = new InMemoryCache({
 })
 
 export function cacheCurrentUser(
-  cache: ApolloCache<any>,
+  cache: ApolloCache,
   user: MeQuery['me'] | null,
 ): void {
   cache.writeQuery({

package.json

@@ -43,7 +43,7 @@
     "validate": "pnpm graphql:validate"
   },
   "dependencies": {
-    "@apollo/client": "3.14.0",
+    "@apollo/client": "4.0.4",
     "@apollo/server": "5.0.0",
     "@as-integrations/h3": "2.0.0",
     "@azure/communication-email": "1.0.0",

pages/dashboard.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import type { WatchQueryFetchPolicy } from '@apollo/client/core'
+import type { WatchQueryFetchPolicy } from '@apollo/client'
 import { useQuery } from '@vue/apollo-composable'
 import { gql } from '~/apollo'
 import { useUiStore } from '~/store'
@@ -36,7 +36,7 @@
 
 const ui = useUiStore()
 
 const { result, fetchMore } = useQuery(
   gql(/* GraphQL */ `
     query Documents($groupId: ID, $query: String, $first: Int, $after: String) {
       me {

plugins/apollo.ts

@@ -1,5 +1,5 @@
-import { ApolloClient, HttpLink } from '@apollo/client/core'
-import { onError } from '@apollo/client/link/error'
+import { ApolloClient, HttpLink } from '@apollo/client'
+import { ErrorLink } from '@apollo/client/link/error'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 import { logErrorMessages } from '@vue/apollo-util'
 import fetch from 'cross-fetch'
@@ -13,10 +13,15 @@ export default defineNuxtPlugin((nuxtApp) => {
   }
 
   const config = useRuntimeConfig()
-  const httpLink = new HttpLink({ uri: '/api', fetch })
+  const httpLink = new HttpLink({
+    uri: '/api',
+    fetch,
+    // Send cookies along with every request (needed for authentication)
+    credentials: 'include',
+  })
 
   // Print errors
-  const errorLink = onError((error) => {
+  const errorLink = new ErrorLink(({ error }) => {
     if (config.public.environment !== Environment.Production) {
       logErrorMessages(error)
     }
@@ -26,10 +31,11 @@ export default defineNuxtPlugin((nuxtApp) => {
   const apolloClient = new ApolloClient({
     cache,
     link: errorLink.concat(httpLink),
-    // Send cookies along with every request (needed for authentication)
-    credentials: 'include',
-    // Identification of client awareness: https://www.apollographql.com/docs/studio/metrics/client-awareness/
-    name: 'web',
+
+    clientAwareness: {
+      // Identification of client awareness: https://www.apollographql.com/docs/studio/metrics/client-awareness/
+      name: 'web',
+    },
   })
 
   // provideApolloClient(apolloClient)