Panduan Teknis: Konfigurasi Relay di React Native

pengaturan relay pendahuluan dalam panduan kami sebelumnya, kami telah belajar bagaimana cara mendapatkan file skema, menyimpannya, dan menempelkannya di aplikasi react native kami dalam panduan ini, kami akan menginstal relay dan menyiapkan lingkungan kami untuk mulai mengembangkan aplikasi react native tujuan untuk mengatur relay, kami perlu terlebih dahulu menginstal relay di aplikasi react native kami dan kemudian menyiapkan lingkungan relay prasyarat kami merekomendasikan pemahaman dasar tentang topik berikut relay modern , babel js , javascript (ecs5 dan ecs6), graphql js readme sebuah proyek dasar react native yang berjalan di lingkungan lokal anda file schema graphql yang diunduh di proyek react native anda dalam langkah langkah berikut, anda akan menemukan instalasi relay dasar yang difokuskan pada aplikasi react native jika anda ingin mendalami topik ini, silakan kunjungi dokumentasi resmi 1 menginstal api resmi react relay mari kita mulai menginstal pustaka resmi react relay pustaka ini adalah api resmi dari tim inti relay dan memiliki semua yang diperlukan untuk membangun fragmen data penting untuk menginstal relay modern untuk tutorial ini dengan versi 10 0 0 dari versi 11 0 0 pendekatan untuk menggunakan react relay berbeda karena adanya hooks baru 2 konfigurasi relay konfigurasi relay memiliki informasi yang diperlukan untuk relay compiler di dalamnya, kita akan menentukan di mana relay compiler dapat menemukan schema file, folder mana yang harus dicari, dan konfigurasi lainnya mari kita pertama tama menginstal paket relay config catatan tutorial ini menggunakan yarn sebagai klien paket, tetapi anda dapat menggunakan npm juga sekarang mari kita buat file konfigurasi relay di mana relay akan menemukan jalur skema buat file baru di dalam root aplikasi beri nama file tersebut sebagai relay config js buka file dan simpan dengan informasi di bawah ini 3 plugin babel relay untuk mengonversi artefak graphql saat runtime, kita perlu menginstal plugin babel sekarang, di dalam file konfigurasi babel anda, anda harus menambahkan plugin babel relay ke dalam array plugin file babel config js yang final akan terlihat seperti ini dalam proyek expo, ikuti pendekatan yang sama dengan menambahkan array plugin di dalam babel config js tepat setelah array preset hasil akhir harus terlihat 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 }; plugin relay harus dijalankan sebelum plugin lainnya untuk transformasi artefak graphql yang benar periksa dokumentasi plugin babel untuk mengetahui lebih lanjut 4 kompiler relay sejak dokumentasi pertama kami, kami telah menjelaskan tentang kompiler relay untuk aplikasi kami agar dapat mengompilasi fragmen data kami, kami akan menginstalnya sekarang mari kita buka package json kita dan mengonfigurasi perintah skrip baru untuk menjalankan kompiler relay watchman bertanggung jawab untuk mengonfigurasi apakah kompiler relay harus mencari perubahan pada fragmen relay jika benar, itu akan dijalankan ulang pada setiap perubahan jika salah, itu akan dijalankan setelah anda menjalankan yarn relay sendiri file package json harus terlihat seperti ini 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 jalankan yarn relay akhirnya, dengan langkah langkah instalasi selesai, kita bisa menjalankan perintah yarn relay di root aplikasi karena kita tidak membangun fragment data, relay compiler mengembalikan file yang diubah bagus, aplikasi anda sudah terpasang dan terkonfigurasi dengan relay sekarang, mari kita implementasikan environment kita untuk mulai membuat permintaan ke server back4app 6 mempersiapkan lingkungan fetch relay environment mendefinisikan bagaimana network layer akan menangani permintaan dan bagaimana relay store harus bekerja store mengontrol data kita di frontend dengan memperbaruinya hanya saat berubah dan menyimpannya lingkungan yang sederhana akan membutuhkan setidaknya network layer dan store lapisan jaringan the lapisan jaringan mudah untuk dibangun ini akan menangani setiap permintaan aplikasi kami, membuat kueri, mutasi, dan langganan (jika aplikasi anda mendukung) dengan mengonsumsinya, relay akan tahu cara menyiapkan panggilan untuk mengakses server aplikasi relay store the store bertanggung jawab untuk memperbarui data aplikasi kami di sisi klien setiap permintaan dapat memiliki fungsi pembaruan di dalam fungsi pembaruan, anda dapat menggunakan daftar fungsi pembantu untuk memperbarui data anda dengan antarmuka store untuk menyiapkan lingkungan relay, kami perlu membuat file konfigurasi lingkungan file ini akan dibaca oleh query renderer setiap kali kueri dilakukan mari kita siapkan file ini 6 1 buat file lingkungan kami akan mengikuti prinsip desain dari relay library, konsep kolokasi untuk memulai, mari kita buat folder di root aplikasi dan beri nama relay di dalamnya, buat file dan beri nama environment js environment js 6 2 konfigurasi lingkungan setelah itu, impor dari relay runtime relay runtime semua yang kita butuhkan 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 konfigurasi lapisan jaringan lapisan jaringan memerlukan fungsi untuk mengambil data dari server pertama tama, mari kita buat fungsi fetch yang bertanggung jawab untuk melakukan permintaan post 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 }; kami membungkus permintaan untuk backend dengan try catch jika terjadi kesalahan, itu akan dilemparkan dan aplikasi akan menanganinya jika tidak, akan mengikuti perilaku normal dan mengembalikan data di lapisan jaringan juga tempat anda mengonfigurasi koneksi aplikasi server anda di back4app, kami menggunakan dua kunci utama application id dan client key kunci kunci ini harus diinformasikan di header bersamaan dengan url server untuk mendapatkan informasi ini, pergi ke aplikasi anda, dan klik pada api console > menu graphql dengan konsol graphql terbuka, anda akan melihat url di bagian atas, dan di bagian bawah kunci aplikasi yang diperlukan gantilah dengan informasi anda di fungsi fetch ingat untuk tidak mengekspos kunci master 6 4 ekspor lingkungan relay runtime menyediakan fungsi yang diperlukan untuk mengkonsumsi lapisan jaringan dan membuat toko akhirnya, mari kita gabungkan mereka menjadi lingkungan baru dan ekspor ke aplikasi kita gunakan kode di bawah ini di file lingkungan anda 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; file akhir lingkungan akan terlihat seperti ini 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; kesimpulan keren sekarang dengan relay dan lingkungan relay yang terinstal dan dikonfigurasi, saatnya untuk mulai mengkonsumsi api graphql back4app jadi, langkah selanjutnya adalah membuat query renderer pertama kita dan mengkomunikasikannya ke server kita