# React Native und GraphQL 2026: Apollo Client, Abfragen und Interview-Fragen

> Integration von GraphQL in React Native mit Apollo Client 4.0. Dieses Tutorial behandelt Queries, Mutations, Caching-Strategien und häufige Interview-Fragen zur mobilen GraphQL-Entwicklung.

- Published: 2026-08-20
- Updated: 2026-08-20
- Author: Anthony Fillion-Maillet
- Tags: react-native, graphql, apollo-client, mobile, api, interview
- Reading time: 9 min

---

GraphQL hat sich zur bevorzugten API-Schicht für React Native-Anwendungen entwickelt, die flexibles Datenabrufen und effiziente Netzwerknutzung erfordern. Apollo Client 4.0, Ende 2025 veröffentlicht, bringt eine schlankere Architektur mit 20-30% kleineren Bundles und verbesserter TypeScript-Unterstützung, die speziell für mobile Umgebungen konzipiert wurde.

> **Wichtige Änderungen in Apollo Client 4.0**
>
> Apollo Client 4.0 entkoppelt React-spezifische Exports nach `@apollo/client/react`, unterstützt React 19 Suspense sowie den React Compiler und ersetzt den monolithischen `ApolloError` durch spezifische Fehlerklassen für besseres Debugging.

## Apollo Client 4 in React Native einrichten

Der Installationsprozess bleibt unkompliziert. Apollo Client 4.0 funktioniert sowohl mit Expo als auch mit reinen React Native-Projekten.

```bash
# Installation
npm install @apollo/client graphql
```

Die Client-Initialisierung erfordert einen `HttpLink` für Netzwerkanfragen und einen `InMemoryCache` für die lokale Zustandsverwaltung.

```typescript
// src/apollo/client.ts
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const httpLink = new HttpLink({
  uri: 'https://api.example.com/graphql',
  // Text-Streaming für @defer und Subscriptions aktivieren
  fetchOptions: {
    reactNative: { textStreaming: true },
  },
});

export const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          // Paginierte Ergebnisse zusammenführen
          products: {
            keyArgs: ['category'],
            merge(existing = [], incoming) {
              return [...existing, ...incoming];
            },
          },
        },
      },
    },
  }),
});
```

Die `typePolicies`-Konfiguration behandelt die Cache-Normalisierung für paginierte Daten – eine häufige Anforderung in mobilen Apps mit unendlichem Scrollen.

## Die App mit ApolloProvider umhüllen

Das Provider-Muster verbindet Apollo Client mit dem React-Komponentenbaum. Er sollte auf der obersten Ebene platziert werden, typischerweise in `App.tsx` oder dem Expo Router Layout.

```tsx
// App.tsx
import { ApolloProvider } from '@apollo/client/react';
import { apolloClient } from './src/apollo/client';
import { RootNavigator } from './src/navigation';

export default function App() {
  return (
    <ApolloProvider client={apolloClient}>
      <RootNavigator />
    </ApolloProvider>
  );
}
```

Apollo Client 4.0 importiert React Hooks aus `@apollo/client/react` statt aus dem Haupt-Einstiegspunkt. Diese Änderung reduziert die Bundle-Größe, wenn der Core-Client in Nicht-React-Kontexten läuft.

## Typsichere GraphQL-Queries schreiben

GraphQL Code Generator erzeugt TypeScript-Typen aus dem Schema und eliminiert so Runtime-Typabweichungen. Die Installation erfolgt zusammen mit dem Client-Plugin.

```bash
# Codegen-Tools installieren
npm install -D @graphql-codegen/cli @graphql-codegen/client-preset
```

Die Codegen-Konfiguration verweist auf das Schema und spezifiziert die Ausgabeorte.

```typescript
// codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'https://api.example.com/graphql',
  documents: ['src/**/*.tsx', 'src/**/*.ts'],
  generates: {
    './src/gql/': {
      preset: 'client',
      config: {
        documentMode: 'string',
      },
    },
  },
};

export default config;
```

Das Ausführen von `npx graphql-codegen` generiert typisierte Document Nodes, die der `useQuery`-Hook verwendet.

## Daten mit useQuery abrufen

Der `useQuery`-Hook verwaltet Ladezustände, Fehler und Cache-Aktualisierungen. Apollo Client 4.0 führt die `dataState`-API für vorhersehbarere Zustandsübergänge ein.

```tsx
// src/screens/ProductListScreen.tsx
import { useQuery } from '@apollo/client/react';
import { graphql } from '../gql';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';

const GET_PRODUCTS = graphql(`
  query GetProducts($category: String!, $limit: Int, $offset: Int) {
    products(category: $category, limit: $limit, offset: $offset) {
      id
      name
      price
      imageUrl
    }
  }
`);

export function ProductListScreen({ category }: { category: string }) {
  const { data, loading, error, fetchMore } = useQuery(GET_PRODUCTS, {
    variables: { category, limit: 20, offset: 0 },
    // Zuerst aus Cache laden, dann Netzwerk
    fetchPolicy: 'cache-and-network',
    // Vorherige Daten während des Abrufs behalten
    notifyOnNetworkStatusChange: true,
  });

  if (error) {
    return <Text>Fehler: {error.message}</Text>;
  }

  const loadMore = () => {
    fetchMore({
      variables: { offset: data?.products.length ?? 0 },
    });
  };

  return (
    <FlatList
      data={data?.products ?? []}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <ProductCard product={item} />}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={loading ? <ActivityIndicator /> : null}
    />
  );
}
```

Die `cache-and-network`-Fetch-Policy zeigt gecachte Daten sofort an, während im Hintergrund vom Server aktualisiert wird. Dieses Muster reduziert die wahrgenommene Latenz in mobilen Netzwerken.

## Mutations und optimistische Updates

Mutations ändern Server-Daten und aktualisieren den lokalen Cache. Optimistische Antworten liefern sofortiges Feedback, bevor der Server die Änderung bestätigt.

```tsx
// src/hooks/useAddToCart.ts
import { useMutation } from '@apollo/client/react';
import { graphql } from '../gql';

const ADD_TO_CART = graphql(`
  mutation AddToCart($productId: ID!, $quantity: Int!) {
    addToCart(productId: $productId, quantity: $quantity) {
      id
      items {
        id
        product {
          id
          name
        }
        quantity
      }
      totalPrice
    }
  }
`);

export function useAddToCart() {
  const [addToCart, { loading }] = useMutation(ADD_TO_CART, {
    // Optimistische Antwort für sofortiges UI-Feedback
    optimisticResponse: ({ productId, quantity }) => ({
      addToCart: {
        __typename: 'Cart',
        id: 'current-cart',
        items: [],
        totalPrice: 0,
      },
    }),
    // Cache nach Mutation aktualisieren
    update(cache, { data }) {
      if (!data?.addToCart) return;
      cache.modify({
        id: cache.identify({ __typename: 'Cart', id: 'current-cart' }),
        fields: {
          items: () => data.addToCart.items,
          totalPrice: () => data.addToCart.totalPrice,
        },
      });
    },
  });

  return { addToCart, loading };
}
```

Die `cache.modify`-Methode aktualisiert gecachte Felder direkt, ohne die gesamte Query neu abzurufen. Dieser Ansatz minimiert Netzwerkanfragen bei mobilen Verbindungen.

## Netzwerkfehler in mobilen Apps behandeln

Apollo Client 4.0 ersetzt den generischen `ApolloError` durch spezifische Fehlerklassen. Die statischen `.is()`-Methoden ermöglichen typsichere Fehlerbehandlung.

```tsx
// src/components/ErrorBoundary.tsx
import { NetworkError, GraphQLErrors } from '@apollo/client/errors';
import { Text, Button, View } from 'react-native';

interface Props {
  error: Error;
  onRetry: () => void;
}

export function QueryErrorHandler({ error, onRetry }: Props) {
  // Netzwerkfehler (offline, Timeout, DNS)
  if (NetworkError.is(error)) {
    return (
      <View>
        <Text>Verbindung fehlgeschlagen. Überprüfen Sie Ihre Internetverbindung.</Text>
        <Button title="Erneut versuchen" onPress={onRetry} />
      </View>
    );
  }

  // GraphQL-Validierungs- oder Resolver-Fehler
  if (GraphQLErrors.is(error)) {
    const firstError = error.graphQLErrors[0];
    if (firstError?.extensions?.code === 'UNAUTHENTICATED') {
      return <Text>Sitzung abgelaufen. Bitte erneut anmelden.</Text>;
    }
    return <Text>Anfrage fehlgeschlagen: {firstError?.message}</Text>;
  }

  return <Text>Etwas ist schiefgelaufen</Text>;
}
```

Die Unterscheidung zwischen Netzwerkfehlern und GraphQL-Fehlern ermöglicht unterschiedliche Wiederherstellungsstrategien: Wiederholung bei vorübergehenden Fehlern, Weiterleitung bei Authentifizierungsproblemen.

## Offline-Unterstützung mit Cache-Persistenz

Mobile Apps benötigen Offline-Zugriff auf zuvor abgerufene Daten. Die `apollo3-cache-persist`-Bibliothek serialisiert den Cache in AsyncStorage.

```typescript
// src/apollo/persistence.ts
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistCache } from 'apollo3-cache-persist';
import { apolloClient } from './client';

export async function initializeCache() {
  await persistCache({
    cache: apolloClient.cache,
    storage: AsyncStorage,
    maxSize: 1024 * 1024 * 5, // 5 MB Limit
    debounce: 1000, // Maximal einmal pro Sekunde schreiben
  });
}
```

`initializeCache` sollte vor dem Rendern der App aufgerufen werden, um gecachte Daten von der Festplatte wiederherzustellen. Benutzer sehen ihre zuletzt abgerufenen Inhalte sofort, auch ohne Netzwerkzugang.

## Echtzeit-Updates mit GraphQL-Subscriptions

Subscriptions übertragen Server-Events über WebSocket an den Client. Apollo Client 4.0 unterstützt das neuere [graphql-ws](https://github.com/enisdenjo/graphql-ws)-Protokoll.

```typescript
// src/apollo/client.ts
import { split, HttpLink, ApolloClient, InMemoryCache } from '@apollo/client';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';
import { getMainDefinition } from '@apollo/client/utilities';

const httpLink = new HttpLink({ uri: 'https://api.example.com/graphql' });

const wsLink = new GraphQLWsLink(
  createClient({
    url: 'wss://api.example.com/graphql',
    connectionParams: async () => ({
      authToken: await getStoredToken(),
    }),
  })
);

// Subscriptions zu WebSocket leiten, andere zu HTTP
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

export const apolloClient = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache(),
});
```

Die `split`-Funktion leitet Operationen basierend auf dem Operationstyp an den entsprechenden Transport.

## Häufige Interview-Fragen: React Native GraphQL

Technische Interviews testen oft das Verständnis der mobilspezifischen Kompromisse von GraphQL. Die folgenden Fragen erscheinen häufig in React Native-Positionen.

### Warum GraphQL statt REST für mobile Apps wählen?

GraphQL reduziert Over-Fetching, indem nur angeforderte Felder zurückgegeben werden. Eine einzelne Query ersetzt mehrere REST-Endpunkte und reduziert so Round-Trips über hochlatente Mobilfunkverbindungen. Das typisierte Schema ermöglicht Compile-Time-Validierung und erkennt API-Abweichungen vor der Laufzeit.

### Wie cached Apollo Client Daten?

Apollo normalisiert Antworten nach `__typename` und `id` und speichert jede Entität einmal. Queries referenzieren normalisierte Objekte über den Cache-Schlüssel. Diese Deduplizierung spart Speicher und gewährleistet Konsistenz: Das Aktualisieren eines Produkts in einer Liste aktualisiert es überall.

### Welche Fetch-Policies unterstützt Apollo Client?

| Policy | Verhalten | Anwendungsfall |
|--------|----------|----------------|
| `cache-first` | Cache zurückgeben wenn verfügbar, sonst abrufen | Standard, minimiert Anfragen |
| `cache-and-network` | Cache sofort zurückgeben, dann vom Netzwerk aktualisieren | Aktuelle Daten mit sofortiger Anzeige |
| `network-only` | Immer abrufen, Cache aktualisieren | Wenn veraltete Daten inakzeptabel sind |
| `cache-only` | Nie abrufen, fehlschlagen wenn nicht gecacht | Offline-Modus |
| `no-cache` | Abrufen ohne Caching | Sensible Daten |

### Wie funktionieren optimistische Updates?

Der Client prognostiziert das Mutations-Ergebnis und aktualisiert den Cache, bevor der Server antwortet. Wenn der Server ein anderes Ergebnis zurückgibt, ersetzt Apollo die optimistischen Daten durch die tatsächliche Antwort. Wenn die Mutation fehlschlägt, setzt Apollo auf den vorherigen Zustand zurück.

### Was verursacht das N+1-Problem in GraphQL?

Verschachtelte Resolver, die verwandte Daten einzeln abrufen, erzeugen N+1-Queries. Die Anforderung einer Liste von 50 Produkten mit ihren Kategorien löst 1 Produkt-Query plus 50 Kategorie-Queries aus. Serverseitiger DataLoader fasst diese zu einer einzelnen Query zusammen.

### Wie werden Authentifizierungs-Tokens mit Apollo Client behandelt?

Der empfohlene Ansatz verwendet einen [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), um Tokens an jede Anfrage anzuhängen.

```typescript
// src/apollo/authLink.ts
import { setContext } from '@apollo/client/link/context';
import { getStoredToken } from '../auth/storage';

export const authLink = setContext(async (_, { headers }) => {
  const token = await getStoredToken();
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  };
});
```

Dieser Link wird in der Client-Konfiguration vor dem `HttpLink` eingebunden.

## GraphQL-Debugging in React Native

Apollo bietet mehrere Debugging-Optionen für die React Native-Entwicklung. Die [VS Code Apollo-Erweiterung](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) enthält integrierte Client DevTools, die Cache-Inhalte und Query-Verlauf anzeigen.

Für eigenständiges Debugging integriert sich Flipper mit dem Community-Plugin `react-native-apollo-devtools`. Dieses Plugin inspiziert den Cache-Zustand, überwacht laufende Queries und wiederholt Mutations.

Die Netzwerkinspektion über React Native Debugger erfordert die Aktivierung von "Debug JS Remotely". Der Network-Tab zeigt dann GraphQL-Payloads mit Request- und Response-Bodies.

## Wichtige Erkenntnisse für mobile GraphQL-Entwicklung

- Apollo Client 4.0 reduziert die Bundle-Größe um 20-30% durch ESM-first-Packaging und entkoppelte React-Exports.
- Die `cache-and-network`-Fetch-Policy balanciert sofortige Anzeige mit Datenaktualität bei langsamen Verbindungen.
- Optimistische Updates bieten sofortiges Feedback; `cache.modify` vermeidet unnötige Neuabrufe.
- Typisierte Fehlerklassen in Apollo Client 4.0 ermöglichen spezifische Behandlung von Netzwerkfehlern versus GraphQL-Fehlern.
- Cache-Persistenz mit `apollo3-cache-persist` ermöglicht Offline-Zugriff auf zuvor abgerufene Daten.
- GraphQL-Subscriptions erfordern das `graphql-ws`-Protokoll und eine Split-Link-Konfiguration.
- Interview-Fragen konzentrieren sich auf Caching-Strategien, Fetch-Policies und mobilspezifische Kompromisse wie N+1-Prävention.

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/de/blog/react-native/react-native-graphql-apollo-client-queries-interview