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

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.

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.

# Installation
npm install @apollo/client graphql

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

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.

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.

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

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

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.

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.

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.

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.

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-Protokoll.

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?

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, um Tokens an jede Anfrage anzuhängen.

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 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.