Prepare Environment

relay setup introduction in our previous guide, we’ve learned how to get the schema file, save it, and paste it on our react native application in this guide, we are going to install relay and prepare our environment to start developing a react native application goal in order to set up relay we will need first to install relay on our react native application and then prepare the relay environment prerequisites we recommend a basic understanding of the following topics relay modern , babel js , javascript (ecs5 and ecs6), graphql js readme a react native basic project running on your local environment a schema graphql file download on your react native project in the following steps you’ll find a basic relay installation focused on a react native application if you want to deep dive into this topic please visit the official documentation 1 installing react relay official api let’s start installing the official library react relay this library is the relay core team official api and has everything to build the data fragments important installing relay modern for this tutorial with 10 0 0 as version from verion 11 0 0 the approach to use the react relay is different because of the new hooks 2 relay config the relay config has the info necessary for the relay compiler inside it, we will specify where relay compiler can find the schema file, which folders should be looked up, and other configs let’s first install the relay config package note this tutorial uses yarn as a package client, but you can use npm anyway now let’s create the relay config file where relay will find the schema path create a new file inside the root of the application name it as relay config js open the file and save it with the information below 3 relay babel plugin to convert the graphql artifacts at runtime, we need to install a babel plugin now, inside your babel config file, you must add on plugins array the relay babel plugin the final babel config js will look like this in expo projects follow the same approach adding the plugins array inside of the babel config js right after the presets array the final result should look 1 module exports = function (api) { 2 api cache(true); 3 return { 4 presets \[ 5 "babel preset expo", 6 ], 7 plugins \[ 8 'relay' 9 ] 10 }; 11 }; the relay plugin must run before other plugins for a correct transformation of graphql artifacts check the plugin babel docs to know more 4 relay compiler since our first documentation, we have been explaining about the relay compiler for our application to compile our data fragments, we will install it now let’s open our package json and configure a new script command to run the relay compiler watchman is responsible for configuring whether the relay compiler must be looking for any changes on relay fragments if true it will rerun at each change if false it will run after you run the yarn relay by itself the package json file should look like this 1 "scripts" { 2 "android" "react native run android", 3 "ios" "react native run ios", 4 "start" "react native start", 5 "test" "jest", 6 "lint" "eslint ", 7 "relay" "relay compiler watchman false" 8 }, 5 run yarn relay finally, with installation steps done, we can run the yarn relay command on the root of the application since we don’t build any data fragment, the relay compiler returns any file changed nice, your application has the relay already installed and configured now, let’s implement our environment to start making requests to the back4app server 6 preparing the fetch environment the relay environment defines how the network layer will handle the requests and how the relay store must work the store controls our data on the frontend by updating it only when changed and caching it a simple environment will need at least the network layer and the store network layer the network layer is easy to build it will handle each request of our application, making queries, mutations, and subscriptions (if your application supports) consuming it, the relay will know how to prepare the calls to access the application server relay store the store is responsible for update the data of our application on the client side each request can have an updater function inside the updater function, you can use a list of helper functions to update your data with the store interface in order to prepare the relay environment we need to create an environment config file the file will be read by the query renderer every time a query is performed let’s prepare this file 6 1 create the environment file we will follow the principle of design from relay library, the collocation concept to start, let’s create a folder on the root of the application and name it relay inside it, create a file and name it environment js environment js 6 2 configure the environment after that, import from relay runtime relay runtime all we need 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 configure the network layer the network layer needs a function to fetch the data from the server first of all, let’s create a fetch function responsible to perform a post request 1 const fetchquery = async (request, variables) => { 2 const body = json stringify({ 3 query request text, 4 variables, 5 }); 6	 7 const headers = { 8 accept 'application/json', 9 'content type' 'application/json', 10 'x parse application id' 'x parse application id', 11 'x parse client key' 'x parse client key', 12 }; 13	 14 try { 15 const response = await fetch(`https //parseapi back4app com/graphql`, { 16 method 'post', 17 headers, 18 body, 19 }); 20 21 const data = await response json(); 22 23 if (data errors) { 24 throw data errors; 25 } 26 27 return data; 28 } catch (err) { 29 console log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; we wrapper the request for the backend by a try catch having an error will be thrown and the application will handle it otherwise will follow the normal behavior and return the data on network layer it’s also where you configure your application server connection at back4app we use two main keys application id and client key the keys must be informed on the headers as long as the server url to get this information go to your app, and click on api console > graphql menu with the graphql console open, you will see the url on the top, and on the bottom the application keys necessary replace with your info the fetch function remember to do not expose the master key 6 4 export the environment the relay runtime provides the functions necessary to consume the network layer and creates the store finally, let’s combine them into a new environment and export to our application use the code below on your environment file 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; environment final file will look like this 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 7	 8 const fetchquery = async (request, variables) => { 9 const body = json stringify({ 10 query request text, 11 variables, 12 }); 13	 14 const headers = { 15 accept 'application/json', 16 'content type' 'application/json', 17 'x parse application id' 'x parse application id', 18 'x parse client key' 'x parse client key', 19 }; 20	 21 try { 22 const response = await fetch(`https //parseapi back4app com/graphql`, { 23 method 'post', 24 headers, 25 body, 26 }); 27 28 const data = await response json(); 29 30 if (data errors) { 31 throw data errors; 32 } 33 34 return data; 35 } catch (err) { 36 console log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41	 42 const environment = new environment({ 43 network network create(fetchquery), 44 store new store(new recordsource()), 45 }); 46	 47 export default environment; conclusion awesome now with the relay and relay environment installed and configured it’s time to start to consume the back4app graphql api so, the next step is to create our first query renderer and communicate it to our server