Panduan Relay GraphQL: Skema & Integrasi Back4App

mulai dengan graphql relay pendahuluan dalam panduan ini, anda akan belajar apa itu relay, bagaimana cara bekerja dengan skema, dan memahami cara bekerja dengan graphql di back4app prasyarat ini bukan tutorial, tetapi untuk merasa nyaman membacanya, anda akan membutuhkan pengetahuan dasar tentang javascript pemahaman dasar tentang graphql jika anda tidak memilikinya, graphql js adalah tempat yang sempurna untuk memulai relay relay adalah klien graphql yang dikembangkan oleh tim teknik facebook dan dirancang untuk kinerja saat membangun aplikasi yang didorong oleh data lebih tepatnya, relay adalah kerangka kerja untuk mengambil dan mengelola data graphql secara deklaratif di sisi klien yang menggunakan konvensi ketat untuk membantu aplikasi anda berhasil ini dibangun dengan mempertimbangkan skalabilitas untuk mendukung aplikasi kompleks seperti facebook tujuan utama dari graphql dan relay adalah untuk memberikan interaksi respons ui instan salah satu keuntungan utama menggunakan graphql adalah bahwa anda dapat mengambil dengan satu kueri semua data yang diperlukan untuk membangun halaman aplikasi, misalnya tentu saja ini baik (anda dapat menghemat perjalanan bolak balik ke server) tetapi dengan itu muncul masalah anda mungkin menggunakan kueri yang berbeda untuk komponen yang sama saat menggunakan kembali komponen ini di bagian yang berbeda dari aplikasi anda untuk menghindari jenis masalah ini, relay menggunakan konsep penting kolokasi kolokasi saat menggunakan relay, komponen dan kebutuhan data mereka hidup bersama kebutuhan data komponen dinyatakan di dalamnya itu berarti semua komponen menyatakan data yang mereka butuhkan relay memastikan bahwa setiap komponen memiliki data yang dibutuhkannya saat dirender struktur relay di balik konsep kolokasi adalah kontainer yang paling umum adalah kontainer fragmen relay kontainer adalah komponen yang berusaha memenuhi data yang diperlukan saat merender setiap komponen kontainer menyatakan ketergantungan data mereka menggunakan fragmen graphql setiap komponen akan memiliki kontainer fragmennya sendiri kontainer tidak mengambil data secara langsung; ia hanya menyatakan spesifikasi untuk data yang dibutuhkan saat merender data akan diambil di sisi server relay akan memastikan bahwa data tersedia sebelum rendering terjadi relay menyusun pohon data dengan kontainer kontainer tersebut, mengabaikan redundansi, dan mengambil data di server mari kita ilustrasikan konsep ini dengan sebuah contoh sebuah fragmen adalah pemilihan bidang pada tipe graphql relay bekerja dengan fragmen, paginasi, dan kontainer refetch yang paling umum adalah kontainer fragmen lihat di bawah ini sebuah fragmen dalam graphql dan setelah itu yang sama di relay 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4&#x9; 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12&#x9; 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20&#x9; 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); pada kode pertama, anda dapat melihat versi graphql yang memungkinkan kita membagi kueri ini menjadi fragmen yang dapat digunakan kembali pada kode berikutnya, anda dapat melihat versi relay yang menunjukkan fragmen dan data bersama dalam komponen yang sama kolokasi berarti bahwa definisi data dan definisi tampilan hidup bersama kolokasi memiliki beberapa manfaat kita hanya perlu mendeklarasikan tepat tanggal yang kita butuhkan itu berarti sulit untuk mengambil data berlebihan yang meningkatkan aplikasi kita dan sulit untuk mengambil data yang kurang yang mencegah kesalahan dengan data yang hilang konsep penting lainnya adalah data masking yang berarti bahwa komponen hanya dapat mengakses data yang mereka minta data masking membantu mencegah kesalahan ketergantungan juga, komponen hanya diperbarui jika data yang mereka gunakan berubah query renderer modern kami merekomendasikan untuk melihat dokumentasi resmi query renderer https //relay dev/docs/en/query renderer html#docsnav untuk pemahaman yang lebih baik berdasarkan kontainer fragmen, relay akan membacanya dan membuat permintaan ke server berdasarkan data yang mereka miliki tapi, bagaimana permintaan ini terjadi? di sinilah query renderer modern berperan query renderer modern adalah komponen yang membaca kontainer fragmen, membuat permintaan ke server dan mengembalikan data ke komponen setiap komponen root akan memiliki query renderer modern yang membuat permintaan ini dalam contoh di atas, kita memiliki abstraksi sehingga kita hanya melewatkan fragmen yang harus dibaca dan semua pekerjaan lainnya dilakukan di dalam createqueryrenderermodern pada langkah selanjutnya dari dokumen ini, kita akan memasukkan createqueryrenderermodern untuk memahami abstraksi berdasarkan contoh murni di atas di bawah ini adalah contoh murni dari query render modern 1 export default function artistrenderer({artistid}) { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql` 6 query queryrenderersartistquery($artistid string!) { 7 # the root field for the query 8 artist(id $artistid) { 9 # a reference to your fragment container 10 artistheader artist 11 } 12 } 13 `} 14 variables={ {artistid} } 15 render={({error, props}) => { 16 if (error) { 17 return \<div>{error message}\</div>; 18 } else if (props) { 19 return \<artist artist={props artist} />; 20 } 21 return \<div>loading\</div>; 22 }} 23 /> 24 ); 25 } kita dapat melihat bahwa query renderer modern adalah sebuah komponen hoc dengan kata lain, membungkus komponen yang memiliki kontainer dengan data yang akan diminta, melakukan permintaan dengan lingkungan relay dan mengembalikan data ke bawah yang diteruskan ke komponen generasi tipe otomatis bekerja dengan relay kita dapat membangun aplikasi dengan tipe yang aman seperti yang kita katakan, setiap komponen akan menjadi pemilik data mereka jadi, ketika kita menjalankan relay compiler, ia membaca setiap fragmen data dan melakukan pemeriksaan dengan skema graphql anda jika semua pemeriksaan dari relay compiler baik baik saja, tipe tipe tersebut akan dihasilkan dalam folder yang disebut generated folder ini dibuat di dalam folder komponen root lihat contoh di bawah ini komponen rumah memeriksa kesehatan api 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8&#x9; 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16&#x9; 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); folder yang dihasilkan berisi tipe untuk komponen home dan tipe yang dihasilkan setelah ini kita hanya perlu mengimpor tipe pada komponen dan menyusunnya 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; tipe dihasilkan dalam flow, bahasa inti untuk tipe dari facebook namun, dengan sebuah pustaka anda dapat menghasilkan dalam typescript ini adalah yang paling umum untuk bekerja dengan react native singkatnya, dengan compiler relay kita dapat memeriksa implementasi data sebelum waktu eksekusi ini membantu kita untuk mencegah bug dan kemudian meningkatkan kualitas aplikasi serta waktu pengembangan pada kueri, kita dapat menghindari data duplikat di n komponen yang berbeda ini memeriksa apakah beberapa data duplikat jika ada, itu akan menghapus redundansi ini akan mengurangi ukuran payload dari kueri dan meningkatkan kinerja aplikasi bahkan lebih mengembangkan pada kueri, kita dapat menghindari data duplikat di n komponen yang berbeda ini memeriksa apakah beberapa data duplikat jika ada, itu akan menghapus redundansi ini akan mengurangi ukuran payload dari kueri dan meningkatkan kinerja aplikasi bahkan lebih di sisi server back4app back4app menghasilkan api graphql yang sesuai dengan relay yang siap digunakan untuk proyek anda apa yang dihasilkan back4app untuk anda sehingga anda tidak perlu membangunnya sendiri di sisi server infrastruktur di dashboard back4app, anda dapat membuat model data lengkap dengan kelas, tipe, dan semua yang dibutuhkan oleh database anda tidak perlu khawatir tentang pengaturan dan pemeliharaan server sendiri setelah membuat model data anda di back4app, kami akan menghasilkan semua yang diperlukan untuk mengonsumsinya di sisi frontend menggunakan graphql mari kita lihat skema api graphql skema file skema adalah inti dari setiap aplikasi graphql ini menggambarkan seluruh server yang tersedia untuk digunakan di sisi klien relay bekerja menggunakan file skema anda untuk mengonfirmasi string kueri dan file yang dihasilkan untuk muncul di / generated /mycomponent graphql, seperti yang kami sebutkan di topik automatic type generation untuk menggunakan relay compiler, anda memerlukan file skema graphql graphql atau json yang menggambarkan api server graphql anda file file ini adalah representasi lokal dari sumber kebenaran server dan tidak diedit setiap skema graphql dapat terdiri dari tipe kueri, tipe mutasi, dan tipe langganan untuk bekerja dengan skema yang dikonsumsi oleh relay di frontend, anda memerlukan beberapa konsep inti di backend antarmuka node dan koneksi kami merekomendasikan untuk membaca tentang antarmuka node dan koneksi relay untuk membuat pembacaan ini lebih mudah untuk dipahami antarmuka node antarmuka node mengimplementasikan setiap tipe di graphql untuk membantu mengambil data melalui id ini adalah implementasi untuk memudahkan pengambilan data dari server dan memperbarui jadi setiap data dari setiap tipe akan memiliki id unik, yang disebut sebagai id unik global, yang diimplementasikan oleh antarmuka node dengan node, relay menghindari kueri bersarang dan membuat pengambilan dan pengambilan ulang menggunakannya ini sulit untuk diimplementasikan dan membutuhkan sedikit pekerjaan, tetapi kami sudah membangunnya untuk anda! paginasi dibangun untuk disusun, seperti di front end di back end, relay akan membantu kami menyusun data kami juga untuk bekerja dengan paginasi, kami memiliki koneksi koneksi tersebut mengimplementasikan node dari tipe yang kami ambil dan memiliki model standar, memudahkan implementasi paginasi di sisi server untungnya, sekali lagi, kami sudah membangunnya untuk digunakan di frontend kesimpulan dalam panduan ini kami memperkenalkan apa itu relay, konsep utamanya dan bagaimana cara kerjanya juga kami dapat melihat bagaimana back4app mengotomatiskan pembuatan server graphql dan memberikan kami database lengkap dengan api graphql untuk bekerja menyimpulkan, seluruh backend sudah dibangun oleh back4app anda hanya perlu membuat tipe anda di dasbor dan mulai mengkonsumsi berdasarkan skema yang dihasilkan di bagian selanjutnya kami akan menjelaskan bagaimana menangani skema ini di front end dan bagaimana menyiapkan lingkungan anda untuk menggunakan relay kami juga memiliki buku masak graphql https //www back4app com/docs/parse graphql/graphql getting started , anda dapat menggunakannya untuk membantu anda memahami lebih banyak konsep di dasbor kami