Cara Melakukan Query GraphQL di Back4App dengan Relay

29 mnt

penggambaran kuery di back4app pendahuluan dalam panduan , kami telah belajar bagaimana menyiapkan lingkungan relay kami sekarang anda siap untuk mulai mengembangkan aplikasi react native anda dalam panduan ini, anda akan belajar bagaimana melakukan kuery pertama anda di back4app kami akan menyelami penggambaran kuery relay, memahami prinsip prinsip utamanya dan menggunakannya untuk mengkonsumsi data pertama anda dari back4app tujuan mendapatkan gambaran umum tentang penggambaran kuery relay; melakukan kuery di api graphql back4app dari aplikasi react native menggunakan relay; prasyarat aplikasi dibuat di dasbor back4app aplikasi react native dan dengan lingkungan relay yang dikonfigurasi oleh dokumen sebelumnya baca tentang node relay dan koneksi apa itu penggambaran kuery? sama seperti react membangun pohon komponen, relay membangun pohon komponen data ini berarti bahwa setiap komponen aplikasi akan menjadi pemilik data fragmennya fragmen akan berisi informasi data yang diperlukan untuk menggambarkannya di layar dan relay memastikan bahwa data ini tersedia sebelum menggambarkan komponen dengan menangani seluruh pendekatan ini, penggambaran kuery adalah komponen akar yang diperlukan untuk menyusun fragmen fragmen tersebut dan menyiapkan kuery untuk diambil dari backend kami mengapa memahami penggambaran kuery? memahami penggunaan penggambaran kuery membuatnya penting untuk mengabstraksi aplikasi anda dengan cara yang berbeda abstraksi kode yang baik dapat mencegah jam kerja, kesalahan, waktu debugging, dll bagaimana cara kerja renderer bersama dengan api back4app dalam tutorial terakhir, kami telah menyiapkan file relay environment, yang menentukan informasi koneksi back4app menggunakan konfigurasi ini, relay akan mengurus komunikasi dengan api back4app anda tidak perlu khawatir tentang koneksi cukup fokus pada membangun komponen data 1 membuat kelas di dashboard back4app mari kita buat kelas pertama anda dan mengisinya dengan beberapa objek menggunakan konsol graphql back4app kelas person memiliki 2 field yaitu name yang merupakan string dan salary yang merupakan integer pergi ke dashboard >core >konsol graphql dan gunakan kode di bawah ini 1 mutation createclass { 2 createclass(input { 3 name "person" 4 schemafields { 5 addstrings \[{name "name"}] 6 addnumbers \[{name "salary"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } anda akan melihat hasilnya di bawah membuat kelas sekarang mari kita buat beberapa objek di dalam kelas ini pergi ke mutasi buat objek panduan https //www back4app com/docs/parse graphql/graphql mutation create object#mutation generic dan lihat bagaimana menangani kasus ini pastikan anda menggunakan versi parse server terbaru untuk menggunakan notasi api graphql terbaru yang tersedia di back4app 1 mutation createobject{ 2 createhero(input {fields {name "allana foley", salary 1000}}){ 3 person { 4 id 5 name 6 salary 7 } 8 } 9 } membuat objek sekarang, kelas person telah dibuat dan memiliki field nama dan gaji setelah membuat kelas baru, back4app secara otomatis menghasilkan semua sumber daya yang diperlukan untuk menggunakan back end dengan aman salah satu contohnya adalah daftar objek back4app sudah membuat koneksi yang diperlukan untuk mengquery daftar person people untuk memahami lebih baik, pergi ke playground, refresh dan buka tab dokumen dan cari people back4app menghasilkan field koneksi anda juga dapat mengquery kelas person sebagai daftar perhatikan bahwa field query people adalah personconnection relay akan menggunakan field koneksi untuk merender daftar objek person dokumen field person dan dokumen field koneksi people (person) 2 memperbarui skema penting untuk diingat bahwa jika kelas baru masuk ke aplikasi anda, akan diperlukan untuk memperbarui skema di dalam root aplikasi react native jika perlu, pergi ke unduh skema dokumen dan ulangi langkah langkah untuk memperbarui skema 3 contoh pertama dari fragment container sebelum kita melanjutkan tutorial, mari kita perkenalkan anda pada fragment container mari kita buat komponen yang akan menjadi pemilik informasi person komponen ini akan berisi nama dan gaji orang tersebut di sini anda dapat meminta field orang mana pun untuk membangun komponen anda sekarang, kita akan melanjutkan dengan dua field ini buat file dan beri nama personcard js personcard js di dalamnya, mari kita buat komponen fungsi sederhana 1 import react from 'react'; 2	 3 const personcard = () => { 4 return ( 5 \<div> 6 7 \</div> 8 ); 9 }; ganti baris export default dengan kode di bawah ini 1 export default createfragmentcontainer(personcard, { 2 person graphql` 3 fragment personcard person on person { 4 id 5 name 6 salary 7 } 8 `, 9 }); kode di atas akan membuat fragmen dari person yang hanya meminta id, nama, dan gaji selesaikan pembaruan sisa komponen dengan kode berikut 1 const personcard = ({person}) => { 2 return ( 3 \<view> 4 \<text>name {person name}\</text> 5 \<text>salary {person salary}\</text> 6 \</view> 7 ); 8 }; hasil akhir harus terlihat seperti ini 1 import react from "react"; 2 import { createfragmentcontainer, graphql } from "react relay"; 3 import { view, text } from "react native"; 4	 5 const personcard = ({person}) => { 6 return ( 7 \<view> 8 \<text>name {person name}\</text> 9 \<text>salary {person salary}\</text> 10 \</view> 11 ); 12 }; 13	 14 export default createfragmentcontainer(personcard, { 15 person graphql` 16 fragment personcard person on person { 17 id 18 name 19 salary 20 } 21 `, 22 }); 4 membuat query renderer langkah selanjutnya adalah membuat query renderer untuk daftar objek anda query renderer adalah komponen root untuk mengambil komponen data dan mempersiapkannya untuk mengambil data dari backend anda akan belajar bagaimana mengambil data untuk kelas person di back4app 4 1 membuat file buat file baru dan beri nama personrenderer js personrenderer js salin kode di bawah ini dan tempelkan ke dalam file personrenderer 1 const personrenderer = () => { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql``} 6 variables={null} 7 render={({error, props}) => { 8 if (error) { 9 return ( 10 \<view> 11 \<text>{error message}\</text> 12 \</view> 13 ); 14 } else if (props) { 15 // @todo here will be implement the person card for each item from result 16 } 17 return ( 18 \<view> 19 \<text>loading\</text> 20 \</view> 21 ); 22 }} 23 /> 24 ); 25 }; 26	 27 export default personrenderer; 4 2 memahami props dari queryrenderer mari kita mulai dengan query renderer dengan props mereka kosong graphql, variables, dan render langkah demi langkah, anda akan mengimplementasikan masing masing secara bertahap pertama tama, aplikasi anda perlu menginformasikan query untuk query renderer di sini, aplikasi kami akan mengkonsumsi daftar orang pada props query, tempelkan kode berikut 1 graphql` 2 query personrendererquery { 3 people { 4 edges { 5 node { 6 personcard person 7 } 8 } 9 } 10 }` graphql berasal dari react relay dan mengimplementasikan query sebagai string penting untuk memahami edges dan koneksi node query di atas mengkonsumsi koneksi node orang dari server back4app setiap kali anda membuat kelas baru, itu akan diikuti oleh koneksi node variabel jika perlu, query renderer akan mengkonsumsi variabel contoh yang baik ketika aplikasi meminta query untuk seseorang berdasarkan id karena ini bukan kasusnya saat ini, mari kita lewati dengan null pada props variabel mengisi kartu orang query ini akan mengembalikan daftar orang query renderer memastikan bahwa data akan tersedia untuk dirender jika tidak, akan muncul kesalahan props yang bertanggung jawab untuk ini adalah render isi props render dengan kode berikut 1 render={({error, props}) => { 2 if (error) { 3 return ( 4 \<view> 5 \<text>{error message}\</text> 6 \</view> 7 ); 8 } else if (props) { 9 return props people edges map(({node}) => \<personcard person={node} />); 10 } 11 return ( 12 \<view> 13 \<text>loading\</text> 14 \</view> 15 ); 16 }} ganti todo yang dikomentari dengan peta javascript untuk merender kartu orang untuk setiap hasil dari daftar seperti yang dikatakan, query renderer bertanggung jawab untuk membuat data tersedia hanya ketika sudah siap sampai saat itu, pesan loading akan ditampilkan jika terjadi kesalahan, itu akan ditampilkan di layar mencegah aplikasi mengalami crash yang tidak terduga terakhir, mari kita tingkatkan render orang dengan mengganti map dengan fungsi baru letakkan sebelum query renderer 1 const renderpersons = (people) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; dan hasil akhirnya harus terlihat seperti ini 1 import react from "react"; 2 import { queryrenderer } from "react relay"; 3 import environment from " /relay/environment"; 4 import personcard from " /personcard"; 5 import { view, text } from "react native"; 6	 7 const personrenderer = () => { 8 const renderpersons = (people) => { 9 return people edges map(({node}) => \<personcard person={node} />); 10 }; 11	 12 return ( 13 \<queryrenderer 14 environment={environment} 15 query={graphql` 16 query personrendererquery { 17 people { 18 edges { 19 node { 20 personcard person 21 } 22 } 23 } 24 } 25 `} 26 variables={null} 27 render={({error, props}) => { 28 if (error) { 29 return ( 30 \<view> 31 \<text>{error message}\</text> 32 \</view> 33 ); 34 } else if (props) { 35 return renderpersons(props people); 36 } 37 return ( 38 \<view> 39 \<text>loading\</text> 40 \</view> 41 ); 42 }} 43 /> 44 ); 45 }; 46	 47 export default personrenderer; 5 membuat kueri pertama anda sekarang saatnya untuk mengambil person menggunakan personrenderer jika semuanya baik baik saja, aplikasi anda sekarang memiliki dua komponen baru personrenderer dan personcard sebelum memulai aplikasi, relay membutuhkan relay compiler untuk dijalankan dan menghasilkan tipe komponen untuk ini, jalankan di terminal anda pada app js tambahkan kode berikut 1 import react from 'react'; 2 import { safeareaview, statusbar, view, text } from 'react native'; 3	 4 import providers from ' /providers'; 5 import personrenderer from ' /components/home/person/personrenderer'; 6	 7 const app = () => { 8 return ( 9 \<providers> 10 \<statusbar barstyle="dark content" /> 11 \<safeareaview> 12 \<view 13 style={ { 14 flexdirection 'column', 15 justifycontent 'center', 16 alignitems 'center', 17 margintop 100, 18 } }> 19 \<text style={ {fontweight "bold", textalign "center"} }> 20 back4app react native relay query renderer list example 21 \</text> 22 \<personrenderer /> 23 \</view> 24 \</safeareaview> 25 \</providers> 26 ); 27 }; 28	 29 export default app; kode dari app js berasal dari create react native app ini menambahkan sebuah view dengan gaya untuk memusatkan konten di layar dengan margin 10px dari atas di dalamnya terdapat teks dengan label untuk memberikan konteks untuk cetakan dan personrenderer untuk menampilkan daftar orang anda perlu mendapatkan hasil berikut penyajian dalam aplikasi back4app react native kami, kami mengimpor personrenderer langsung ke dalam app js app js karena personrenderer adalah komponen root dan memiliki queryrenderer nya, person harus ditampilkan tanpa kesalahan 6 mengetik komponen langkah ini masuk akal untuk aplikasi yang bekerja dengan typescript jika aplikasi anda tidak menggunakan typescript, silakan lanjutkan salah satu kekuatan dari relay compiler adalah menghasilkan tipe dari setiap komponen data mari kita ketik personrenderer dan personcard untuk membuat aplikasi lebih kuat mengetik personrenderer ketik argumen fungsi renderperson people people ke dalam personrenderer 1 const renderpersons = (people personrendererquery\['response']\['people']) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; impor personrendererquery personrendererquery tipe dari generated generated folder yang dibuat di dalam folder yang sama dengan personrenderer mengetik personcard silakan lanjut ke personcard, buat objek tipe baru dan beri nama personcardprops 1 type personcardprops = {}; impor personcard person personcard person tipe dari generated generated folder 1 import {personcard person} from ' / generated /personcard person graphql'; tambahkan orang di dalam tipe personcardprops 1 type personcardprops = { 2 person personcard person; 3 }; pada argumen props dari personcard, ketik komponen dengan personcardprops personcardprops hasil akhir dari kedua komponen harus terlihat seperti personrenderer 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import {environment} from ' / / /relay'; 4 import personcard from ' /personcard'; 5 import {view, text} from 'react native'; 6 import {personrendererquery} from ' / generated /personrendererquery graphql'; 7	 8 const personrenderer = () => { 9 const renderpersons = (people personrendererquery\['response']\['people']) => { 10 return people edges map(({node}) => \<personcard person={node} />); 11 }; 12	 13 return ( 14 \<queryrenderer 15 environment={environment} 16 query={graphql` 17 query personrendererquery { 18 people { 19 edges { 20 node { 21 personcard person 22 } 23 } 24 } 25 } 26 `} 27 variables={null} 28 render={({error, props}) => { 29 if (error) { 30 return ( 31 \<view> 32 \<text>{error message}\</text> 33 \</view> 34 ); 35 } else if (props) { 36 return renderpersons(props people); 37 } 38 return ( 39 \<view> 40 \<text>loading\</text> 41 \</view> 42 ); 43 }} 44 /> 45 ); 46 }; 47	 48 export default personrenderer; personcard 1 import react from 'react'; 2	 3 import {createfragmentcontainer, graphql} from 'react relay'; 4	 5 import {view, text} from 'react native'; 6 import {personcard person} from ' / generated /personcard person graphql'; 7	 8 type personcardprops = { 9 person personcard person; 10 }; 11	 12 const personcard = ({person} personcardprops) => { 13 return ( 14 \<view> 15 \<text>name {person name}\</text> 16 \<text>salary {person salary}\</text> 17 \</view> 18 ); 19 }; 20	 21 export default createfragmentcontainer(personcard, { 22 person graphql` 23 fragment personcard person on person { 24 id 25 name 26 salary 27 } 28 `, 29 }); kesimpulan hasil akhir dari queryrenderer menunjukkan bagaimana aplikasi dapat diabstraksi aplikasi dapat menampilkan person di dalam query renderer karena personcard memiliki lebih banyak komponen, itu tidak mengubah cara query renderer dibangun personrenderer dibangun untuk menunjukkan bagaimana sebuah query dapat dilakukan dalam langkah langkah mudah, dikombinasikan dengan kekuatan server back4app dalam panduan berikutnya, anda akan belajar bagaimana mengambil objek person tertentu dan menampilkan atributnya