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
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
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:
- import both
ApolloClientand a method called
createNetworkInterfaceis called, passing in the apollo server url for the
uriargument. This method also takes optional
options(object) arguments. Read more about this method here.
- create a variable named
clientand create a new instance of
ApolloClient, passing in the
networkInterfacewe just created as the only argument. The api for
ApolloClientcan be found here.
- 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:
- import both
graphqlmethod will allow us to create a higher order component for providing Apollo data to a component.
gqlwill be used to create our query.
- set an initial state of
name: "George Washington"
- create an
updateNamemethod to update the state
- create a new query using
gqlthat we will use when we create the higher order component
- create a component named
Presidentthat we will pass to the higher order component along with the query
- create a component called
graphqltakes two arguments: a query and an optional configuration object. To learn more about this api check the documentation.
- render the view with a title, a
<TextInput/>that will call
updateNamewhen changed, and the
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