React Native with Apollo — Part 2, Apollo Client – React Native Development – Medium

  • We return the App component we will create next and wrap it in passing in the client as a prop.
  • create a new query using gql that we will use when we create the higher order component
  • gql will be used to create our query.
  • The graphql method will allow us to create a higher order component for providing Apollo data to a component.
  • create a component named President that we will pass to the higher order component along with the query

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.

@ReactNext: Building a #reactnative app using #Apollo client, by @dabit3 #graphql

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.

that will be updating the GraphQL Query fetching a president and then rendering the results to the view.

packages 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:

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:

Next, in App.js:

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

, 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 developer at School Status where we help educators make smart instructional decisions by providing all their data in one place. Check us out @schoolstatusapp.

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

React Native with Apollo — Part 2, Apollo Client – React Native Development – Medium