React Native with Apollo — Part 2, Apollo Client

Here, we will be using the Apollo GraphQL server we created in part 1 to retrieve data from our database and render it in our app.

If you have not already build the client from part one but want to start from here, download this repo and follow the instructions on how to start the server.

If you would like to view part one, check it out here.

We will be having a <TextInput /> that will be updating the GraphQL Query fetching a president and then rendering the results to the view.

To get this up and running, we will be using the apollo-client and react-apollopackages from Apollo, but before we get started there we first need to create a new react-native app:

react-native init apolloclient

Once this is installed, cd into the directory and install the following dependencies:

yarn add graphql-tag apollo-client react-apollo

1. graphql-tag — A JavaScript template literal tag that parses GraphQL queries. This lets us build GraphQL queries using template literals
2. apollo-client — This is a package that can be used in any JavaScript frontend where you want to use data from a GraphQL server.
3. react-apollo — Allows you to use your GraphQL server data in your React components. Provides a <Provider /> similar to that of redux as a way to connect to the server.

We will only be working in two files: index.ios.js (or index.android.js) and a new file called app.js In index.io.js, add the following code:

I will walk through the main points here:

1. import both ApolloClient and a method called createNetworkInterface from the apollo-client package
2. import ApolloProvider from react-apollo
3. create createNetworkInterface is called, passing in the apollo server url for the uri argument. This method also takes optional transportBatching(boolean) and options(object) arguments. Read more about this method here.
4. create a variable named client and create a new instance of ApolloClient, passing in the networkInterface we just created as the only argument. The api for ApolloClient can be found here.
5. Finally, we return the App component we will create next and wrap it in <ApolloProvider />passing in the client as a prop.

Next, in App.js:

Here are the main points referencing what is going on here:

1. import both graphql from react-apollo and gql from graphql-tag. The graphql method will allow us to create a higher order component for providing Apollo data to a component. gqlwill be used to create our query.
2. set an initial state of name: "George Washington"
3. create an updateName method to update the state
4. create a new query using gqlthat we will use when we create the higher order component
5. create a component named President that we will pass to the higher order component along with the query
6. create a component called ViewWithData using the graphql method. graphqltakes two arguments: a query and an optional configuration object. To learn more about this api check the documentation.
7. render the view with a title, a <TextInput/> that will call updateName when changed, and the ViewWithData component.

Now, when we update the TextInput, the new name will be passed to our query and fetch the name from our graphql server! (here is a link to the dataset that was populated into the database).

This has been a very basic implementation meant to introduce you to the basics of the Apollo Stack.

To download the completed project, check out this repo.

ヾ(⌐■_■)ノ♪

My Name is Nader Dabit . I am a software consultant and trainer and the founder of React Native Training where we teach developers at top companies around the world how to quickly get up and running with React Native.

If you like React and React Native, checkout out our podcast — React Native Radio on Devchat.tv

Also, check out my book, React Native in Action now available from Manning Publications

If you enjoyed this article, please recommend and share it! Thanks for your time