React Native en GraphQL in 2026: Apollo Client, Queries en Sollicitatievragen

GraphQL is uitgegroeid tot de voorkeurslaag voor API's in React Native-applicaties die flexibele data-ophaling en efficiënt netwerkgebruik vereisen. Apollo Client 4.0, uitgebracht eind 2025, brengt een slankere architectuur met 20-30% kleinere bundles en verbeterde TypeScript-ondersteuning, specifiek ontworpen voor mobiele omgevingen.

Apollo Client 4 Configureren in React Native

Het installatieproces blijft eenvoudig. Apollo Client 4.0 werkt met zowel Expo als pure React Native-projecten.

# Installation
npm install @apollo/client graphql

De client-initialisatie vereist een HttpLink voor netwerkverzoeken en een InMemoryCache voor lokaal state management.

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const httpLink = new HttpLink({
  uri: 'https://api.example.com/graphql',
  // Enable text streaming for @defer and subscriptions
  fetchOptions: {
    reactNative: { textStreaming: true },
  },
});

export const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          // Merge paginated results
          products: {
            keyArgs: ['category'],
            merge(existing = [], incoming) {
              return [...existing, ...incoming];
            },
          },
        },
      },
    },
  }),
});

De typePolicies-configuratie regelt cache-normalisatie voor gepagineerde data, een veelvoorkomende vereiste in mobiele apps met oneindig scrollen.

De App Wrappen met ApolloProvider

Het provider-patroon verbindt Apollo Client met de React componentenboom. Plaats deze op het hoogste niveau, typisch in App.tsx of de 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 importeert React hooks uit @apollo/client/react in plaats van het hoofdingangspunt. Deze wijziging vermindert de bundlegrootte wanneer de core client in niet-React contexten draait.

Type-Safe GraphQL Queries Schrijven

GraphQL Code Generator produceert TypeScript-types uit het schema, waardoor runtime type-mismatches worden geëlimineerd. Installeer het samen met de client plugin.

# Install codegen tools
npm install -D @graphql-codegen/cli @graphql-codegen/client-preset

De codegen-configuratie verwijst naar het schema en specificeert outputlocaties.

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;

Het uitvoeren van npx graphql-codegen genereert getypeerde document nodes die de useQuery hook consumeert.

Data Ophalen met useQuery

De useQuery hook beheert laadstatussen, fouten en cache-updates. Apollo Client 4.0 introduceert de dataState API voor voorspelbaardere state-overgangen.

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 },
    // Fetch from cache first, then network
    fetchPolicy: 'cache-and-network',
    // Keep previous data while fetching new
    notifyOnNetworkStatusChange: true,
  });

  if (error) {
    return <Text>Fout: {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}
    />
  );
}

De cache-and-network fetch policy toont gecachte data direct terwijl op de achtergrond van de server wordt ververst. Dit patroon vermindert de waargenomen latentie op mobiele netwerken.

Mutations en Optimistische Updates

Mutations wijzigen serverdata en updaten de lokale cache. Optimistische responses geven direct feedback voordat de server de wijziging bevestigt.

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, {
    // Optimistic response for instant UI feedback
    optimisticResponse: ({ productId, quantity }) => ({
      addToCart: {
        __typename: 'Cart',
        id: 'current-cart',
        items: [],
        totalPrice: 0,
      },
    }),
    // Update cache after mutation
    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 };
}

De cache.modify methode werkt gecachte velden direct bij zonder de gehele query opnieuw op te halen. Deze aanpak minimaliseert netwerkverzoeken op mobiele verbindingen.

Netwerkfouten Afhandelen in Mobiele Apps

Apollo Client 4.0 vervangt de generieke ApolloError door specifieke foutklassen. De statische .is() methodes maken type-safe foutafhandeling mogelijk.

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) {
  // Network failure (offline, timeout, DNS)
  if (NetworkError.is(error)) {
    return (
      <View>
        <Text>Verbinding mislukt. Controleer je internetverbinding.</Text>
        <Button title="Opnieuw proberen" onPress={onRetry} />
      </View>
    );
  }

  // GraphQL validation or resolver errors
  if (GraphQLErrors.is(error)) {
    const firstError = error.graphQLErrors[0];
    if (firstError?.extensions?.code === 'UNAUTHENTICATED') {
      return <Text>Sessie verlopen. Log opnieuw in.</Text>;
    }
    return <Text>Verzoek mislukt: {firstError?.message}</Text>;
  }

  return <Text>Er is iets misgegaan</Text>;
}

Het onderscheiden van netwerkfouten en GraphQL-fouten maakt verschillende herstelstrategieën mogelijk: opnieuw proberen voor tijdelijke fouten, doorverwijzen voor authenticatieproblemen.

Offline Ondersteuning met Cache Persistentie

Mobiele apps hebben offline toegang nodig tot eerder opgehaalde data. De apollo3-cache-persist library serialiseert de cache naar 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, // Write at most once per second
  });
}

Roep initializeCache aan voordat de app wordt gerenderd om gecachte data van disk te herstellen. Gebruikers zien hun laatst opgehaalde content direct, zelfs zonder netwerktoegang.

Realtime Updates met GraphQL Subscriptions

Subscriptions pushen server-events naar de client via WebSocket. Apollo Client 4.0 ondersteunt het nieuwere graphql-ws protocol.

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(),
    }),
  })
);

// Route subscriptions to WebSocket, others to 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(),
});

De split functie stuurt operaties naar het juiste transport op basis van het operatietype.

Veelgestelde Sollicitatievragen: React Native GraphQL

Technische sollicitatiegesprekken testen vaak het begrip van GraphQL's mobiel-specifieke afwegingen. De volgende vragen komen frequent voor bij React Native-posities.

Waarom kiezen voor GraphQL boven REST voor mobiele apps?

GraphQL vermindert over-fetching door alleen gevraagde velden terug te geven. Een enkele query vervangt meerdere REST-endpoints, waardoor round-trips over hoge-latentie mobiele verbindingen worden verminderd. Het getypeerde schema maakt compile-time validatie mogelijk, waarbij API-mismatches worden gedetecteerd voordat ze tijdens runtime optreden.

Hoe cached Apollo Client data?

Apollo normaliseert responses op __typename en id, waarbij elke entiteit eenmalig wordt opgeslagen. Queries verwijzen naar genormaliseerde objecten via cache-key. Deze deduplicatie bespaart geheugen en garandeert consistentie: het updaten van een product in één lijst update het overal.

Welke fetch policies ondersteunt Apollo Client?

Hoe werken optimistische updates?

De client voorspelt het mutation-resultaat en update de cache voordat de server reageert. Als de server een ander resultaat retourneert, vervangt Apollo de optimistische data met de werkelijke response. Als de mutation faalt, rolt Apollo terug naar de vorige staat.

Wat veroorzaakt het N+1 probleem in GraphQL?

Geneste resolvers die gerelateerde data individueel ophalen creëren N+1 queries. Het opvragen van een lijst van 50 producten met hun categorieën triggert 1 producten-query plus 50 categorie-queries. Server-side DataLoader batcht deze tot een enkele query.

Hoe worden authenticatie-tokens afgehandeld met Apollo Client?

De aanbevolen aanpak gebruikt een Apollo Link om tokens aan elk verzoek toe te voegen.

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}` : '',
    },
  };
});

Deze link wordt voor de HttpLink in de client-configuratie geplaatst.

GraphQL Debuggen in React Native

Apollo biedt meerdere debug-opties voor React Native-ontwikkeling. De VS Code Apollo extensie bevat ingebouwde Client DevTools die cache-inhoud en query-geschiedenis tonen.

Voor standalone debugging integreert Flipper met de community plugin react-native-apollo-devtools. Deze plugin inspecteert cache-staat, monitort lopende queries en herhaalt mutations.

Netwerkinspectie via React Native Debugger vereist het inschakelen van "Debug JS Remotely". De Network tab toont dan GraphQL payloads met request en response bodies.

Belangrijkste Punten voor Mobiele GraphQL-Ontwikkeling

• Apollo Client 4.0 vermindert bundlegrootte met 20-30% door ESM-first packaging en ontkoppelde React exports.
• De cache-and-network fetch policy balanceert directe weergave met data-versheid op trage verbindingen.
• Optimistische updates geven directe feedback; cache.modify vermijdt onnodige refetches.
• Getypeerde foutklassen in Apollo Client 4.0 maken specifieke afhandeling mogelijk voor netwerkfouten versus GraphQL-fouten.
• Cache-persistentie met apollo3-cache-persist maakt offline toegang tot eerder opgehaalde data mogelijk.
• GraphQL subscriptions vereisen het graphql-ws protocol en een split link configuratie.
• Sollicitatievragen focussen op caching-strategieën, fetch policies en mobiel-specifieke afwegingen zoals N+1 preventie.