Part 2 - Setting up Apollo Client in a React Native app
Hello folks, I hope you had some fun with GraphQL and Prisma. Now it’s time to integrate Apollo Client into a React Native app. I promise it will be fast and easy. 🚀
First of all, we need a React Native app. We’ll use react-native init
for this tutorial. Create an application by entering the following command into your terminal:
$ react-native init RNGraphQL
If this is your first React Native app, you may need to install the React Native CLI and configure your development environment. Learn how to do that here.
To be sure everything is working, we’ll do a quick test run of the application. Run the following command from your terminal:
$ react-native run-ios
Once you’ve got everything up-and-running, let’s install the required packages for our GraphQL client:
$ yarn add graphql graphql-tag apollo-boost react-apollo
Your package.json
should look similar to the following:
apollo-boost
— a zero-config way to start using Apollo Client.react-apollo
— allows you to fetch data from a GraphQL server and then parse it to build components.graphql-tag
— helps parse GraphQL queries.
Now, we need to configure a <ApolloProvider>
component, which wraps the higher-level component giving every component access to client. ApolloClient
contains an object, which includes a HTTP link and cache. We need to create a new link and cache using HttpLink
and InMemoryCache
.
HttpLink
— responsible for fetching GraphQL results from a GraphQL server.InMemoryCache
— cache implementation for Apollo, recommended for data store normalization.
In App.js
, initalize a new instance of ApolloClient
and store it in the client
variable.
Run your application to check everything is configured okay. Now, we want to use our GraphQL Server from the previous tutorial as the server we’ll be connecting to with the GraphQL Client. We’ll only need the Prisma Cloud endpoint, which you can find in graphql-server/database/prisma.yml,
and an auth token. The auth token can generated by running theprisma token
command from your server’s root directory. Add the endpoint and token to your ApolloClient
object, like this:
To check it’s actually working, let’s run a simple GraphQL query. When writing your queries from the client, we use the graphql-tag
library. The query below will ask the GraphQL server to return an array of dogs with their name and type fields included.
The next step is to create a component, which will be responsible for displaying our queried dogs. We can use the graphql
function from the react-apollo
library. See below for an example:
You’ll notice that we’re first checking if the query is still loading and showing a loading message, if that’s the case.
Here is the complete App.js
with our DogComponent
.
Re-run the application and you should see something similar to the following, presuming you’re displaying some dogs.
I hope everything is working for you, 💪🏻 if not let us know in the comments and I’ll do my best to try and help solve your problems. 🤓 Stay tuned for the next post titled: Mutating data in a React Native app with Apollo Client 👋🏻 If you are interested in React Native, we publish tips on our blog every week. Make sure to follow us and check our next post! 🤓
Source Code:
https://github.com/brains-and-beards/react-native-graphql-app