Integrating GraphQL into React Native with Apollo Client

Apollo Client has become the default GraphQL client for React and React Native applications because it solves multiple problems simultaneously: data fetching, client-side caching, state management, and real-time subscriptions. Unlike REST, where you stitch together `fetch`, a caching layer, and a state manager, Apollo provides an integrated solution. Its normalized cache stores each object by type and ID, meaning data fetched for one screen is instantly available to other screens without duplicate requests. This makes Apollo particularly powerful for data-rich mobile applications.

Install the required packages: `@apollo/client` and `graphql`. Create the client instance: `const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() })`. Wrap your root component with `` to make the client available via React context. For authenticated requests, create an `authLink` that injects the Bearer token from AsyncStorage into every request header, then compose it with the `httpLink`: `const link = authLink.concat(httpLink)`. This single setup powers all data operations across the app.

The `useQuery` hook is the primary way to fetch data. Define a query: `const GET_USERS = gql`query { users { id name email avatar } }``. Call the hook: `const { loading, error, data, refetch } = useQuery(GET_USERS)`. Apollo returns loading, error, and data states for declarative UI rendering—no manual state management needed. Use `variables` for parameterized queries: `useQuery(GET_USER, { variables: { id: userId } })`. The `fetchPolicy` option controls caching behavior: `cache-first` (default—fastest), `network-only` (always fresh), `cache-and-network` (show cached, then update with network response).

The `useMutation` hook handles create, update, and delete operations. Define: `const CREATE_POST = gql`mutation($title: String!, $body: String!) { createPost(title: $title, body: $body) { id title } }``. Call: `const [createPost, { loading }] = useMutation(CREATE_POST)`. Execute: `createPost({ variables: { title, body } })`. For instant UI feedback, use optimistic responses: `createPost({ variables, optimisticResponse: { createPost: { __typename: 'Post', id: 'temp-id', title } } })`. The cache updates immediately with the optimistic data, then reconciles with the actual server response—making the UI feel instantaneous.

GraphQL subscriptions enable real-time data streaming via WebSocket. Install `subscriptions-transport-ws` or the newer `graphql-ws` package. Create a WebSocket link: `const wsLink = new GraphQLWsLink(createClient({ url: 'wss://api.example.com/graphql' }))`. Split traffic: `const splitLink = split(({ query }) => { const def = getMainDefinition(query); return def.kind === 'OperationDefinition' && def.operation === 'subscription'; }, wsLink, httpLink)`. Use the `useSubscription` hook in components: `const { data } = useSubscription(MESSAGE_ADDED)`. This powers live chat, real-time notifications, collaborative editing, and live dashboards.

Apollo's InMemoryCache uses normalization—each object is stored by its `__typename:id` key. When a mutation updates a `User` with ID 5, every query that references User:5 automatically reflects the update without manual cache invalidation. Configure type policies for custom cache behavior: `typePolicies: { Query: { fields: { posts: { keyArgs: false, merge(existing = [], incoming) { return [...existing, ...incoming]; } } } } }`. This merge function enables infinite scroll pagination by appending new pages to the existing cache rather than replacing it.

Mobile apps displaying lists must implement pagination for performance. Use Apollo's `fetchMore` function: `const { data, fetchMore } = useQuery(GET_POSTS, { variables: { first: 10 } })`. When the user scrolls to the bottom of a FlatList, call `fetchMore({ variables: { first: 10, after: data.posts.pageInfo.endCursor } })`. The `merge` function in type policies appends new results to the existing cache. Combine with `FlatList`'s `onEndReached` for seamless infinite scrolling. Cursor-based pagination is more reliable than offset-based because it handles insertions and deletions correctly without skipping or duplicating items.

Apollo provides `MockedProvider` for testing components that use `useQuery`, `useMutation`, or `useSubscription`. Define mock responses: `const mocks = [{ request: { query: GET_USERS }, result: { data: { users: [{ id: '1', name: 'John' }] } } }]`. Wrap the component under test: `render()`. Test loading states, error states, and data rendering independently. For error testing, return `{ error: new Error('Network error') }` in the mock. This enables comprehensive unit testing without a running GraphQL server or network access.