Integrating with React Native

You can use Apollo Client with React Native exactly as you do with React.js. Install it with npm like so:

1
npm install @apollo/client graphql

Then wrap your application in the ApolloProvider component, like so:

1
import React from 'react';
2
import { AppRegistry } from 'react-native';
3
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
4

5
// Initialize Apollo Client
6
const client = new ApolloClient({
7
  uri: 'localhost:4000/graphql',
8
  cache: new InMemoryCache()
9
});
10

11
const App = () => (
12
  <ApolloProvider client={client}>
13
    <MyRootComponent />
14
  </ApolloProvider>
15
);
16

17
AppRegistry.registerComponent('MyApplication', () => App);

For more information on setting up Apollo Client, see Getting started.

Example application

This sample application maintained by The GraphQL Guide uses Apollo Client with React Native.

Apollo Client Devtools

React Native Debugger supports the Apollo Client Devtools:

1. Install React Native Debugger and open it.
2. Enable "Debug JS Remotely" in your app.
3. If you don't see the Developer Tools panel or the Apollo tab is missing from it, toggle the Developer Tools by right-clicking anywhere and selecting Toggle Developer Tools.

Troubleshooting

• Uncaught Error: Cannot read property 'prototype' of undefined, or similar Metro build error when importing from @apollo/client

This is due to the way the Metro bundler supports .cjs and .mjs files: it requires additional configuration to implicitly resolve files with these extensions, so import { ApolloClient, InMemoryCache } from '@apollo/client' will result in an error. You can amend your import statement to e.g. import { ApolloClient, InMemoryCache } from '@apollo/client/main.cjs', or you can install @expo/metro-config and configure their implicit resolution via metro.config.js in the root of your project:

1
const { getDefaultConfig } = require('@expo/metro-config');
2

3
const config = getDefaultConfig(__dirname);
4

5
config.resolver.sourceExts.push(
6
  'cjs'
7
);
8

9
module.exports = config;