React Native Apollo Example

Setup

Option 1: Do it yourself

create-react-native-app react-native-apollo-example
cd react-native-apollo-example
yarn add apollo-client-preset react-apollo graphql
# and replace below code for App.js

Option 2: Clone my repo

git clone git@github.com:tylerbuchea/react-native-apollo-example.git
cd react-native-apollo-link-state-example
yarn install && yarn start

Option 3: Check it out now with Expo

Go here or scan the QR code below:

The Code

import React from 'react';
import { Text, View, SafeAreaView } from 'react-native';

import ApolloClient from 'apollo-client';
import { HttpLink, InMemoryCache } from 'apollo-client-preset';
import { ApolloProvider, graphql } from 'react-apollo';
import gql from 'graphql-tag';

// Main App export
export default class ApolloApp extends React.Component {
  render() {
    return(
      <ApolloProvider client={client}>
        <SafeAreaView>
          <MovieDetails />
        </SafeAreaView>
      </ApolloProvider>
    );
  }
}
 
// Apollo client
const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr' }),
  cache: new InMemoryCache().restore({}),
});
 
// Example query from https://www.graph.cool/
const MOVIE_QUERY = gql`
{
  allMovies {
    title
    actors {
      name
    }
  }
}
`;
 
// MovieDetails Component
const MovieDetails = graphql(MOVIE_QUERY)(({ data }) => {
  const { loading, allMovies } = data;

  if (loading) return <View><Text>loading...</Text></View>;

  return (
    <View style={{ padding: 10 }}>
      {allMovies.map(({ title, actors }) => (
        <Text key={title}>
          {title}: {actors.map(({ name }) => name).join(', ')}
          {'\n'}
        </Text>
      ))}
    </View>
  );
});

You can play with the GraphQL server used in this in example here.

Resources

• Apollo Link State Repo
• Official todo example
• apollo-client-preset example