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

> Integreer GraphQL met React Native met Apollo Client 4.0. Deze tutorial behandelt queries, mutations, caching-strategieën en veelgestelde sollicitatievragen over mobiele GraphQL-ontwikkeling.

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

> **Belangrijke Wijzigingen in Apollo Client 4.0**
>
> Apollo Client 4.0 ontkoppelt React-specifieke exports naar `@apollo/client/react`, ondersteunt React 19 Suspense en de React Compiler, en vervangt de monolithische `ApolloError` door specifieke foutklassen voor betere debugging.

## Apollo Client 4 Configureren in React Native

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

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

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

```typescript
// src/apollo/client.ts
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.

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

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

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

```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;
```

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.

```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 },
    // 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.

```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, {
    // 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.

```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) {
  // 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.

```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, // 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](https://github.com/enisdenjo/graphql-ws) protocol.

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

// 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?

| Policy | Gedrag | Gebruik |
|--------|--------|--------|
| `cache-first` | Retourneer cache indien beschikbaar, anders fetch | Standaard, minimaliseert verzoeken |
| `cache-and-network` | Retourneer cache direct, update dan van netwerk | Verse data met directe weergave |
| `network-only` | Altijd fetchen, cache updaten | Wanneer verouderde data onacceptabel is |
| `cache-only` | Nooit fetchen, faal als niet gecached | Offline modus |
| `no-cache` | Fetch zonder caching | Gevoelige data |

### 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](https://www.apollographql.com/docs/react/api/link/introduction/) om tokens aan elk verzoek toe te voegen.

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

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](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) 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.

---

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