Konfigurasi dan Kueri GraphQL dengan Parse dan Relay

15 mnt

kompatibilitas relay pendahuluan api graphql parse server mengikuti standar terbaru yang saat ini tersedia untuk api yang sangat skalabel dan proyek front end yang ambisius tim open source parse memilih untuk mengikuti spesifikasi relay https //relay dev/docs/en/graphql server specification relay adalah kerangka kerja javascript untuk membangun aplikasi react yang didorong oleh data yang didukung oleh graphql, dirancang dari awal untuk mudah digunakan, dapat diperluas, dan yang terpenting, berkinerja tinggi relay mencapai ini dengan kueri statis dan generasi kode di muka mulai dari parse 3 10, kompatibilitas penuh dengan relay https //relay dev/docs/en/graphql server specification diimplementasikan dokumen ini akan memandu anda melalui implementasi tersebut prasyarat untuk memulai tutorial ini, anda akan membutuhkan sebuah aplikasi yang dibuat di back4app lihat tutorial membuat aplikasi baru https //www back4app com/docs/get started/new parse app untuk belajar bagaimana cara membuat aplikasi di back4app 1 buat aplikasi baru di back4app pertama tama, perlu dipastikan bahwa anda memiliki aplikasi yang sudah ada yang dibuat di back4app namun, jika anda adalah pengguna baru, anda dapat memeriksa tutorial ini https //www back4app com/docs/get started/new parse app untuk belajar bagaimana cara membuatnya 2 buat beberapa kelas di aplikasi baru anda, pergi ke \database browser\ dan klik tombol \buat kelas\ pilih untuk membuat kelas \kustom\ dan berikan nama mengikuti skema contoh relay https //relay dev/docs/en/graphql server specification#schema , saya membuat kelas faction, ship, dan lainnya seperti yang dijelaskan dengan properti yang sesuai, tetapi anda dapat membuat kelas anda sendiri mengikuti dokumentasi ini cukup ubah kueri dan mutasi anda sesuai ingat bahwa berdasarkan konvensi, kelas dimulai dengan huruf kapital, menggunakan camelcase, dan tidak mengandung karakter khusus seperti spasi dan simbol klik \buat kelas\ ketika anda selesai 3 konsol graphql dengan kelas dan properti anda yang telah dibuat, anda dapat pergi ke \konsol api\ dan kemudian \konsol graphql\ untuk mengeksekusi kueri dan mutasi anda 4 kueri kueri pertama kami akan mengambil objek berdasarkan \objectid\ (jangan bingung dengan \id\ ) parse telah berkembang dan sekarang kueri mendukung kedua \objectid\ , yang sebelumnya dikenal sebagai \id\ di versi sebelumnya, tetapi sekarang juga mendukung \global id\ , yang dikenal sebagai \id\ , yang mengacu pada id global relay dan memiliki format yang lebih panjang karena mengandung nama kelas yang dienkripsi di dalamnya contoh \objectid\ eat0ddk09v contoh \ id\ (alias id global) rmfjdglvbjpfyvqwzerrmdl2 mari kita buat kueri pertama kami yang mengambil objek berdasarkan \objectid\ 1 query rebelsquery { 2 faction(id "eat0ddk09v") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } itu akan menghasilkan 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } sekarang, mari kita ubah itu untuk globalid untuk relay 1 query rebelsquery { 2 faction(id "rmfjdglvbjpfyvqwzerrmdl2") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } dan perhatikan bahwa hasilnya akan sama 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } ini terjadi karena \global id\ bekerja, seperti namanya yang menunjukkan, secara global, dan memiliki nama kelas yang terenkripsi di dalamnya, sehingga parse tahu di mana mencari id tersebut 5 mengambil ulang juga dengan \global id\ anda dapat melakukan prefetch seperti spesifikasi relay https //relay dev/docs/en/graphql server specification#object identification sebagai berikut 1 query refetchquery{ 2 node(id "rmfjdglvbjpfyvqwzerrmdl2"){ 3 id on faction{ 4 name 5 } 6 } 7 } yang akan menghasilkan 1 { 2 "data" { 3 "node" { 4 "id" "rmfjdglvbjpfyvqwzerrmdl2", 5 "name" "galactic empire" 6 } 7 } 8 } 6 koneksi koneksi relay https //relay dev/docs/en/graphql server specification#connections bekerja dengan cara yang sama di parse dengan graphql, jadi, jika anda perlu mengambil kapal rebel 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships{ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } yang akan menghasilkan 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "node" { 10 "name" "y wing" 11 } 12 }, 13 { 14 "node" { 15 "name" "x wing" 16 } 17 } 18 ] 19 } 20 } 21 } 22 } anda juga dapat mengambil kapal nth 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1){ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } yang menghasilkan 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 cursor 10 "node" { 11 "name" "y wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } atau ambil kapal ke n setelah yang spesifik, menggunakan nilai cursor nya 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1 after "yxjyyxljb25uzwn0aw9uoja"){ #cursor for the y wing ship 6 edges{ 7 cursor 8 node{ 9 name 10 } 11 } 12 } 13 } 14 } yang akan mengambil 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "cursor" "yxjyyxljb25uzwn0aw9uoje=", 10 "node" { 11 "name" "x wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } 7 mutasi kita juga dapat menggunakan mutasi yang kompatibel dengan mutasi relay https //relay dev/docs/en/graphql server specification#mutations mari kita buat sebuah \kapal\ 1 mutation createbwing($input createshipinput!){ 2 createship(input $input){ 3 ship{ 4 id 5 name 6 } 7 } 8 } itu membutuhkan variabel query berikut 1 { 2 "input" { 3 "fields" { 4 "name" "b wing" 5 } 6 } 7 } dan akan mengembalikan \global id\ dan \nama\ seperti yang ditentukan dalam mutasi 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }