Update Apollo GraphQL packages to v4 (#35)

* Update Apollo GraphQL packages to v4

* Migrate app code to Apollo Client v4 APIs

Apollo Client v4 moved the React hooks/types out of the package root into
@apollo/client/react and reworked error handling. Update imports and the
generated types so the app type-checks against v4:

- ApolloProvider, useReactiveVar, useApolloClient, and the generated query/
  mutation hooks now import from @apollo/client/react.
- errorLink/extractAuthErrorCode use CombinedGraphQLErrors (the v4 wrapper for
  GraphQL errors) instead of the removed graphQLErrors field.
- client.query() data is now T | undefined in v4 — guard the upload-URL read.
- Remap the generated MutationFunction/BaseMutationOptions references and
  @ts-ignore the unused, v4-incompatible generated *SuspenseQuery hooks, since
  typescript-react-apollo has no v4 support yet (documented in codegen.ts).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: 3 people

App.tsx

@@ -4,7 +4,7 @@
  * @format
  */
 
-import {ApolloProvider} from '@apollo/client';
+import {ApolloProvider} from '@apollo/client/react';
 import {
   DarkTheme,
   DefaultTheme,

bun.lock

@@ -22,6 +22,14 @@ const config: CodegenConfig = {
       ],
       config: {
         withHooks: true,
+        // NOTE: @graphql-codegen/typescript-react-apollo has no Apollo Client
+        // v4 support (latest is 4.x, still v3-oriented). After regenerating,
+        // the output needs manual fixups to compile against @apollo/client v4:
+        //   - `import * as Apollo from '@apollo/client'` -> '@apollo/client/react'
+        //   - `Apollo.MutationFunction` -> `Apollo.useMutation.MutationFunction`
+        //   - `Apollo.BaseMutationOptions` -> `Apollo.MutationHookOptions`
+        //   - the generated *SuspenseQuery hooks need @ts-ignore (unused here)
+        // Longer term, migrate to @graphql-codegen/client-preset.
         reactApolloVersion: 3,
         scalars: {
           // Map GraphQL scalars to TS types as you add them in the schema.

codegen.ts

@@ -13,7 +13,7 @@
     "postinstall": "git rev-parse --git-dir > /dev/null 2>&1 && git config core.hooksPath .githooks || true"
   },
   "dependencies": {
-    "@apollo/client": "^3.11.0",
+    "@apollo/client": "^4.0.0",
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@maplibre/maplibre-react-native": "^11.2.1",
     "@react-native/new-app-screen": "0.85.3",

package.json

@@ -7,10 +7,11 @@ import {
   InMemoryCache,
   makeVar,
   Observable,
-  useReactiveVar,
 } from '@apollo/client';
+import {CombinedGraphQLErrors} from '@apollo/client/errors';
 import {setContext} from '@apollo/client/link/context';
 import {onError} from '@apollo/client/link/error';
+import {useReactiveVar} from '@apollo/client/react';
 import {config} from '../config';
 import {
   type LoginMutation,
@@ -108,13 +109,11 @@ async function doRefresh(): Promise<AuthState | null> {
 }
 
 function extractAuthErrorCode(err: unknown): string | undefined {
-  // Apollo wraps GraphQL errors in an ApolloError with a graphQLErrors array.
-  const graphQLErrors =
-    err && typeof err === 'object' && 'graphQLErrors' in err
-      ? (err as {graphQLErrors?: ReadonlyArray<{extensions?: {code?: string}}>})
-          .graphQLErrors
-      : undefined;
-  return graphQLErrors?.[0]?.extensions?.code;
+  // Apollo Client 4 wraps GraphQL errors thrown from an operation in a
+  // CombinedGraphQLErrors instance, exposing them as an `errors` array.
+  if (!CombinedGraphQLErrors.is(err)) return undefined;
+  const code = err.errors[0]?.extensions?.code;
+  return typeof code === 'string' ? code : undefined;
 }
 
 function isAuthHousekeepingOperation(operation: Operation): boolean {
@@ -150,8 +149,10 @@ const authLink = setContext(async (request, prevContext) => {
 // 2. Handle auth-related GraphQL error codes. On TOKEN_EXPIRED, refresh and
 //    replay the original operation once. On TOKEN_REUSE_DETECTED / REVOKED /
 //    INVALID, clear tokens (and optionally raise a security warning).
-const errorLink = onError(({graphQLErrors, operation, forward}) => {
-  if (!graphQLErrors || graphQLErrors.length === 0) return;
+const errorLink = onError(({error, operation, forward}) => {
+  if (!CombinedGraphQLErrors.is(error)) return;
+  const graphQLErrors = error.errors;
+  if (graphQLErrors.length === 0) return;
   const code = graphQLErrors[0]?.extensions?.code;
   if (typeof code !== 'string') return;
 

src/auth/authClient.ts

@@ -1,4 +1,5 @@
-import {makeVar, useReactiveVar} from '@apollo/client';
+import {makeVar} from '@apollo/client';
+import {useReactiveVar} from '@apollo/client/react';
 import {useEffect} from 'react';
 import {Linking} from 'react-native';
 

src/auth/deepLinks.ts

@@ -1,4 +1,5 @@
-import {makeVar, useReactiveVar} from '@apollo/client';
+import {makeVar} from '@apollo/client';
+import {useReactiveVar} from '@apollo/client/react';
 import EncryptedStorage from 'react-native-encrypted-storage';
 
 // Persistent auth store backed by EncryptedSharedPreferences (Android) /