Konfigurasi dan Kueri GraphQL dengan Parse dan Relay

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 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 database browser dan klik tombol buat kelas buat kelas pilih untuk membuat kelas kustom 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 buat kelas ketika anda selesai 3 konsol graphql dengan kelas dan properti anda yang telah dibuat, anda dapat pergi ke konsol api konsol api dan kemudian konsol graphql konsol graphql untuk mengeksekusi kueri dan mutasi anda 4 kueri kueri pertama kami akan mengambil objek berdasarkan objectid objectid (jangan bingung dengan id id ) parse telah berkembang dan sekarang kueri mendukung kedua objectid objectid , yang sebelumnya dikenal sebagai id id di versi sebelumnya, tetapi sekarang juga mendukung global id global id , yang dikenal sebagai id id , yang mengacu pada id global relay dan memiliki format yang lebih panjang karena mengandung nama kelas yang dienkripsi di dalamnya contoh objectid objectid eat0ddk09v contoh id id (alias id global) rmfjdglvbjpfyvqwzerrmdl2 mari kita buat kueri pertama kami yang mengambil objek berdasarkan objectid 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 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 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 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 global id dan nama nama seperti yang ditentukan dalam mutasi 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }