Cara men-setup React Native + GraphQL + Relay Modern | AMTech

Hallo Penggemar Koding Indonesia. Berjumpa kembali ditutorial membuat aplikasi android menggunakan React Native. Cara men-setup React Native + GraphQL + Relay Modern. Pada posting ini saya akan menunjukkan langkah-langkah dan beberapa tips untuk membuat lingkungan pengembangan menggunakan Relay dan GraphQL sehingga tanpa basa-basi mari mulai! 

Pertama apa itu Relay dan GraphQL?



GraphQL adalah cara baru untuk menulis API. GraphQL telah memperkenalkan pendekatan baru ke API di mana saya tidak memerlukan banyak layanan mikro Saya hanya memerlukan layanan mikro besar di mana saya dapat meminta apa yang saya inginkan dan mengembalikan saya data yang diminta, dan dengan itu mengurangi kemungkinan pengambilan berlebih ( lebih banyak data dari yang Anda butuhkan) dan underfetching (lebih sedikit data dari yang Anda butuhkan). Dan Relay adalah klien untuk dapat mengkonsumsi API besar ini yang memiliki toko / cache dan kursor sendiri.




Berikut ini beberapa langkah untuk menyiapkan lingkungan:

Langkah Satu: Buat Server GraphQL 
Untuk membuat server GraphQL, Anda bisa menggunakan Graph Cool sangat mudah untuk mengonfigurasinya seperti firebase tetapi menggunakan GraphQL sebagai bahasa kueri atau Anda dapat menggunakan create-graphql dengan menggunakan create-graphql Anda akan dapat membuat server GraphQL Anda sendiri benar-benar dari nol, dengan boiler ini Anda akan menemukan lingkungan GraphQL yang telah dikonfigurasi dengan otentikasi pengguna dan Anda hanya perlu menambahkan: loader, jenis, koneksi dan mutasi


Langkah Kedua: Tambahkan beberapa dependensi ke Project React-Native Anda:

Dependencies: yarn add react-relay relay

DevDependencies: yarn add relay-compiler babel-plugin-relay —-dev

  

Langkah Tiga: Setup .babelrc dan package.json 

Add this plugin on your .babelrc:

  "plugins": [["relay", { "schema": "data/schema.json" }]],

  
Plugin ini akan membantu kompilator dalam hal ini babel untuk memahami kode relay di dalam file .js Anda.

Add this to your package.json “scripts”:

"scripts": {
    "relay": "relay-compiler --src ./src --schema data/schema.graphql"
    "relay:watch": "yarn relay --watch",
},

Skrip ini akan mengkompilasi kode relay Anda sebelum kode berjalan, untuk meningkatkan kinerja, jadi ketika Anda mengubah kueri atau mutasi yang Anda perlukan untuk menjalankan yarn relay atau sebagai gantinya Anda dapat menggunakan yarn relay:watch untuk melihat perubahan dan kompilasi saat Anda mengubah kueri atau mutasi relai.
  
Langkah Empat: Buat Relay Enviroment 
Sekarang Anda perlu membuat lingkungan untuk terhubung ke GraphQL Anda, mari kita mulai! Kami akan menciptakan lingkungan dengan relay-runtime yang kami tambahkan sebelumnya pada langkah kedua

/** * @flow */ import { Environment, Network, RecordSource, Store } from "relay-runtime"; // Define a function that fetches the results of an operation (query/mutation/etc) // and returns its results as a Promise: function fetchQuery(operation, variables, cacheConfig, uploadables) { return fetch("yourserver:port/graphql" , { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", // Auth Headers goes here }, body: JSON.stringify({ query: operation.text, // GraphQL text from input variables }) }).then(response => { return response.json(); }); } // Create a network layer from the fetch function const network = Network.create(fetchQuery); const source = new RecordSource(); const store = new Store(source); const env = new Environment({ network, store }); export default env;

Anda akan menggunakan ini ketika Anda menggunakan QueryRenderer atau createMutation akan diteruskan sebagai parameter untuk terhubung ke server dan membuat fetch ke api.
  
Langkah Kelima: Membuat Pertanyaan dan Mutasi 
Sekarang mari siapkan beberapa mutasi dan kueri dengan relai. Jadi tanpa basa-basi lagi mari kita pergi! 
Membuat kueri dengan QueryRenderer:
Untuk ini kami akan gunakan QueryRenderer dari react-relay yang kami tambahkan sebelumnya
OBS: The ErrorView dan LoadingView harus dibuat sendiri jadi kreatif 😄🖖

// @flow import React, { Component } from 'react'; import { View, Text, StyleSheet, ActivityIndicator } from 'react-native'; import { QueryRenderer, graphql } from "react-relay"; import env from './Enviroment'; import ErrorView from './ErrorView'; class UserView extends Component { render() { const { name, email } = this.props.viewer return ( <view> <text>{name}</Text> <text>{email}</Text> </View> ); } } // creating the params for the user const variables = { userId: 'cjb3neu7x0rle01130wksqy9w' }; /* Here is our GraphQL Query that receives a user_id and returns a name and a email */ const query = graphql` query MainRelayQuery ($user_id:ID!) { viewer { User(id:$user_id) { name email } } } `; // IMPORTANT: We need to 'export default' the query renderer to the query run export default () => <QueryRenderer environment={env} //Here is the enviroment that we configured before variables={variables} //Passing the params/variables that we created query={query} //And here goes your GraphQL query render={ ({error, props}) => { if (error) { //Here we pass our error view in case of query errors or fetch failture return (<errorview error={error} />); } else if (props) { //Here we pass our component that should be rendered return (<yourcomponent {...props}/>); } //Here goes our activity indicator or loading view return (<activityindicator >); } } />;


Membuat Mutasi dengan createMutation:
Untuk ini kita akan menggunakan commitMutation dari react-relay yang telah kita tambahkan sebelumnya


import { graphql, commitMutation } from "react-relay"; import env from "./Enviroment"; //Mutation Query const mutation = graphql` mutation UserAddMutation($input: UserAddInput!) { UserAdd(input: $input) { your_fields } } `; const commit = (email, name) => { //Parameters of our mutation const variables = { input: { email, name } }; return new Promise((resolve, reject) => { commitMutation(env, { //Passing our enviroment mutation, //Here we pass our GraphQL mutation variables, //Passing our parameters onCompleted: (response, errors) => { console.log(response); resolve(response.UserAdd); // here you can resolve the User connection updated by the mutation and update your render alert('A new user has been added') // showing a alert to show that a new user has been added }, onError: err => alert('An unexpected error occurred') // showing an alert to show that something happened in the backend }); }); }; export default commit; // Exporting our commit function where you can call and run this function

Jadi sekarang kami membuat pertanyaan dan mutasi kami, kami hanya perlu menjalankannya 
 yarn relay untuk mengkompilasi kode Anda dan jika Anda membuat semua hal dengan benar maka akan dikompilasi.

PENTING - Relay sangat sensitif dengan penamaan, jadi Anda harus mengikuti pola mereka seperti ini:

For Queries:

YourComponent_viewer or YourComponent_query

For Mutations:

NameOfMutation + Mutation

Jika Anda membuat semua langkah ini di lingkungan estafet + graphql Anda akan baik-baik saja untuk mulai berkembang! Hi


sumber: https://codeburst.io/how-to-setup-a-react-native-graphql-relay-modern-a6a5f6c18353