In the second part of this guide, we will connect the backend with the client. Using apollo-client-preset.

Image for post
Image for post
“black and silver laptop computer on table” by Clément H on Unsplash

We will connect our React Native and React app to an ApolloClient which will essentially connect the GraphQL server with React, using the url of the server. But before that, if have done the first part of the guide, I would suggest going through that tutorial before going over this one.

Now we will start with the React Native app, and run the app on the ios and android simulator. We will run the ios simulator when retrieving queries, and the android simulator when performing mutations. If you have no interest in React Native skip this part of the tutorial.

We will first install these dependencies to your react native app.

npm i -S apollo-client-preset graphql graphql-tag react-apollo react-navigation

graphql← Needed when using apollo-client, and writing queries for your graphql server.

graphql-tag ←Used to write queries for your graphql server to retrieve data.

apollo-client-preset← Used to import your Client, Cache, HttpLink, and ApolloProvider to connect your react app to your graphql server.

react-apollo←Used to import components for queries and mutations.

react-navigation←Used to define your screens for your app.

Now go to your App.js file, and import your ApolloProvider from react-apollo. Then will import ApolloClient, InMemoryCache, and HttpLink from apollo-client-preset.

ApolloProvider← To wrap your root component, you would pass your created ApolloClient instance to your client prop.

ApolloClient← Define your client that will connect to your server.

InMemoryCache← Creates a cache for your Apollo Client.

HttpLink←Links to your GraphQL server, taking an object as an argument to constructor function with a uri argument which will be the url of your GraphQL server.

Define your Apollo Client for your react-native app.

Now we will create 3 new files within the root directory of your React Native app.

Home.js ← Home Screen

PlayersList.js ←List of players, will be used to retrieve data from GraphQL server.

Navigator← Where the screens/routes are defined.

touch Home.js PlayersList.js Navigator.js

Now we will first define your Home screen which will have just text.

Define your Home Component

Define your PlayerList.js file. Which will be where players from your database will be displayed. You will use a Query component from react-apollo to retrieve data from your graphql server, which will take a GraphQL schema as an argument, and will retrieve data based on the query prop. You would first define your schema using gql from graphql-tag, and retrieve each individual player’s name, position, team, jersey number, and if they won a super bowl or not.

Define your PlayersList which is used to retrieve data from GraphQL server.

We would render it using a FlatList and define a function that will render each individual item. Which would be returned in a form of a callback as this.props.children of the Query component. The callback takes response and error parameter, if the error is not null it will return error stack, and log it to the console.If the response is defined return the FlatList with the response data.

Now we will go to the Navigator.js file, where the screens/routes are defined. We will import your components, and import createDrawerNavigator to create your drawer navigator with an object with your screens as first argument, your screen name is the key and the Component for that screen is the value, and your options with your initalRouteName which would be your Home route.

Define your navigator for your app.

After defining your router, export it. Then go to your App.js, then import it and delete all the UI between the Apollo Provider, and replace it with the navigator.

Add your created Navigator to your app.

But we can’t open the drawer, we will have text in each component(Home and PlayersList) and have navigationOptions which will have characteristics of the label, etc.

Add Navigation Options to Home Component.
Players List Component.

Now your app should look similar. With your own personal image of football.

Image for post
Image for post
Image for post
Image for post
Home Screen

Now we should have a very basic full-stack React Native app!!. Congrats. We will now create our React app. Then setup both apps for creating players.

Now we will get started on the react app which will have the similar folder structure to our react native app.

Image for post
Image for post

We will first install these dependencies to your react app.

npm i -S apollo-client-preset graphql graphql-tag react-apollo react-navigation

graphql← needed when using apollo-client, and writing queries for your graphql server.

graphql-tag ←Used to write queries for your graphql server to retrieve data.

apollo-client-preset← Used to import your Client, InMemoryCache, HttpLink, and ApolloProvider to connect your react app to your graphql server.

react-apollo←Used to import components for queries and mutations.

react-router-dom-Used to define routes for your application.

Now go to your index.js file, and import your ApolloProvider from react-apollo. Then will import ApolloClient, InMemoryCache, and HttpLink from apollo-client-preset.

ApolloProvider← To wrap your root component, you would pass your created ApolloClient instance to your client prop.

ApolloClient← Define your client that will connect to your server.

InMemoryCache← Creates a cache for your Apollo Client.

HttpLink←Links to your GraphQL server, taking an object as an argument to constructor function with a uri argument which will be the url of your GraphQL server.

Define your graphql server.

We will import ApolloProvider from react-apollo that will nest your app, with your graphql client as a prop. You would then import your ApolloClient to define your client itself, then import InMemoryCache which will be used to define your cache of your client, and HttpLink to define what uri of your client will be running on, and where you could access the graphql playground to test your queries. Then define BrowserRouter for your routes.

Now we will define our presentational components we will first define our Nav component which would be a side navbar. Copy and paste these styles from your App.css.

Define your styles for your App.js

Now define your Nav.js which would be a stateless component that will take openDrawer as a prop that is used to open and close your side navbar.

Define your side bar.

Now define your Home Component which would be your home route. It will render a football images similar in our react-native app, and a h1 tag indicating top 25 nfl players.

Home component for home route.

Next define your PlayersList component for your players retrieved from the graphql server.

Define your PlayersList component.

In our players list we will import gql for defining your graphql query. Then import your Query component from react-apollo. The query component will take a schema which we would define. Then will take a callback as children. Which would get the player’s name, team, position, jerseyNumber, and a boolean indicating if the player won a super bowl or not. If the response has data, then loop through the players, else return the Loading…. text.

Now let’s define your routes, and import your Nav, and routes to your App.js

Define your routes.
Define your App component with your routes configured.

So in our app.js we have our button that will open the side navigation bar, and it will be passed down to our nav component.

Image for post
Image for post
Image for post
Image for post
Home Component

Congratulations we have just connected our Get Requests to our React app and our React-Native app. Now we will perform a mutations which would be a post request in our React app and our React-Native app.

We will first define mutations for the back-end. We will define our type definitions with our mutation. Then our resolvers for our mutation.

We will first define the type definitions for a Mutation object, then afterwards we will set it to the mutation keyword. The difference from our simple query and our mutation, is that in the case of our mutation we will accept arguments such as position, name, team, jerseyNumber, and wonSuperBowl, while in our players query we take no arguments and are just performing a simple get request for the data.

Go to your typeDefs.js file in our server folder, and create a Mutation object type below our Query object type with a field called createPlayer with arguments of name, position, team, jersey number, and wonSuperBowl. The createPlayer field will return Player, but it will be a nullable type since in graphql you cannot assign null or void as a return type.

Update the Mutation object type in the typeDefs.js file.

Now update your resolver with your createPlayer mutation, and with your mutation you will only use the args, and store the rest in a private variable. You can have four arguments in a resolver field.

obj-Used with nested queries, used to retrieve the result from the parent query.

args-Arguments passed in to the field of the query. This is the only argument we will be using from our field in our resolver.

context-Arguments shared with all queries such as authentication information, dataloader instance, other factors to consider when loading the query.

info-Only used in advance cases such as finding out the execution state of the query.

Now we will add a Mutation property similar to how we added the Query property, and add a createPlayer property(or field) within the Mutation. We will store the obj, context, and info in a private variable(_). Then we will use the args name, position, team, jerseyNumber, and wonSuperBowl to create a new instance of a Player model, and assign to a variable. Afterwards we will save it in our database, then return out the function since we are just redirecting the user to the homepage.

Update your resolvers.

Now create a sample player in this case I will create Jared Goff, and add him to the list.

Image for post
Image for post
Result of our CreatePlayer.

Now to check if our createPlayer is working correctly. Use a query schema to get all players and see if it has jared goff or if you created a different player see if it is in your database.

Image for post
Image for post
Check if your createPlayer is working accordingly.

Congratulations your createPlayer mutation works on the back end now let’s configure it for our react-native and react app.

We will define a CreatePlayer component which will have state for each input field. We will have a currentName, currentPosition, currentTeam, currentJerseyNumber for your corresponding input fields to create a new player. Then a currentWonSuperBowl which is boolean, and we will use yes/no buttons for that.

Then we will import the Mutation component from react-apollo, and gql from graphql-tag which will be used define our schema.

We will have the mutation name, then it’s variables and it’s corresponding types right after the mutation keyword. Then when we will hit the mutation and add those variables to the mutation as an argument.

Import needed components for your CreatePlayer component, and define your schema.

Now we will define our state, and then a method that takes a function as an argument. Then create a object from our state which we would use to pass variables to the mutation or the func argument. Then redirect the user to Home screen or PlayersLIst whatever screen one you would prefer. For our render method just have a view and a Text component containing Create Player text for now, then define styles for your header.

Now go to your Navigation.js and set your CreatePlayer screen to your CreatePlayer component.

Add a CreatePlayer screen to your Navigator.

Now go to your CreatePlayer screen and your screen should look like this.

Image for post
Image for post
Create Player UI

Great let’s define our render method, and we will have our Mutation and set it’s mutate prop to your createPlayerMutation schema. Then have a callback as it’s props.children. If the response contains the method, return the button set to our method. If there is an error log the error into your react-native debugger console else return a Loading… text. Then define your styles for your component.

Finish off your CreatePlayer component.

So when we retrieve our response for a mutation it is gonna come in a form of a method. Unlike our query schema which will come in a form of property of the data object. If you want we can retrieve data after a mutation using a optimistic response. But in this case we will just redirect the user.

Now your CreatePlayer component should look like this.

Image for post
Image for post
Image for post
Image for post
Result of your Create Player component.

Congratulations!! You just connected your React-Native app to your graphql server. If you have no interest in connecting to your react app. Go to the bottom and use the git repo as a reference.

For our react app we will first the define a CreatePlayer component which will have state for each input field. We will have a currentName, currentPosition, currentTeam, currentJerseyNumber for your corresponding input fields to create a new player. Then a currentWonSuperBowl which is boolean, and we will use yes/no buttons for that.

Then we will import the Mutation component from react-apollo, and gql from graphql-tag which will be used define our schema.

We will have the mutation name, then it’s variables and it’s corresponding types right after the mutation keyword. Then when we will hit the mutation and add those variables to the mutation as an argument.

Define your graphql schema for your CreatePlayer component

Now we will define our state, and then a method that takes a function as an argument. Then create a object from our state which we would use to pass variables to the mutation or the func argument. Then redirect the user to ‘/’ route or our ‘players’ route whatever route you would prefer.

Then we will define our render method, and we will have our Mutation and set it’s mutate prop to your createPlayerMutation schema. Then have a callback as it’s props.children. If the response contains the method, return the button set to our method. If there is an error log the error into your console else return a Loading… text.

Define your CreatePlayer component.

Also create a CreatePlayer.css file for your CreatePlayer component.

Define your styles for your CreatePlayer component.

Now go to your Router.js file and set your CreatePlayer component to that route.

Add your route to your Router

Then go to your Nav component and add a link to your CreatePlayer component.

Add a link to your Navbar.

Now your Create Player and Players List components should look like this.

Image for post
Image for post
Image for post
Image for post
Define your CreatePlayer component.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store