Panduan Teknis CRUD GraphQL di React Native dengan Relay

tutorial crud graphql react native pendahuluan mengelola data di back4app menggunakan graphql adalah opsi yang kuat untuk setiap jenis aplikasi, mempercepat kueri dan menyederhanakan yang paling kompleks back4app menggunakan konvensi umum untuk konfigurasi graphql dan menyediakan alat yang hebat untuk membantu pengaturan lingkungan anda untuk pengembangan dalam panduan ini, anda akan belajar bagaimana melakukan operasi data dasar melalui aplikasi contoh crud, yang akan menunjukkan kepada anda cara membuat, membaca, memperbarui, dan menghapus data dari database server parse anda di react native menggunakan graphql dan relay anda akan terlebih dahulu membuat fungsi komponen anda untuk setiap operasi crud, menggunakan mereka nanti dalam tata letak layar lengkap, yang menghasilkan aplikasi daftar tugas kapan saja, anda dapat mengakses proyek ini melalui repositori github kami untuk memeriksa gaya dan kode lengkapnya https //github com/templates back4app/react native graphql relay js users prasyarat untuk tutorial ini kami akan menggunakan parse server versi 4 4 jika anda ingin menggunakan versi lain, anda dapat memeriksa kode mutasi yang sesuai di https //www back4app com/docs/parse graphql/graphql logout mutation contoh untuk versi anda masing masing aplikasi react native yang dibuat dan terhubung ke back4app; selesaikan https //www back4app com/docs/react native/graphql/relay setup pemahaman yang baik tentang relay store dan relay connection updater; anda dapat membaca lebih lanjut di https //app archbee com/docs/ roxiyumxobue9i7uv49e/h4vz hqkkijx7yl2doahj kami akan menggunakan javascript sebagai implementasi default tujuan untuk membangun aplikasi crud dasar di react native menggunakan parse, graphql, dan relay 1 membuat kelas todo pada langkah pertama ini, kita perlu mendefinisikan kelas yang akan digunakan aplikasi kelas todo todo hanya perlu memiliki field title( string string ) yang menggambarkan tugas dan field done( boolean boolean ) yang menunjukkan apakah tugas tersebut telah selesai anda dapat menggunakan mutasi generik untuk membuat kelas ke dalam database anda jika anda belum memilikinya, mengikuti panduan kami di https //www back4app com/docs/parse graphql/graphql mutation create object anda juga dapat membuat kelas menggunakan dasbor back4app, melalui browser database itu sendiri atau dari konsol js atau graphql setelah membuat kelas baru ini, ingat untuk mengunduh file schema json schema json dari dasbor dan menyimpannya di aplikasi anda di dalam direktori data data ini diperlukan agar relay compiler dapat secara otomatis menghasilkan tipe dari kueri, mutasi, dll pada titik ini, dasbor back4app anda akan secara otomatis menghasilkan mutasi crud untuk objek kelas, untuk melihatnya anda dapat pergi ke konsol graphql, membuka tab dokumen, dan mencari todo todo 2 menanyakan dan merender objek mari kita buat komponen yang akan bertanggung jawab untuk melakukan kueri daftar di server back4app, membangun koneksi untuk objek, dan secara otomatis merender serta memperbarui konten daftar saat mereka berubah buat file baru bernama todolistqueryrenderer js todolistqueryrenderer js di direktori src src anda dengan kode berikut 1 import react from 'react'; 2 import { view, text } from 'react native'; 3 import { graphql, queryrenderer } from 'react relay'; 4&#x9; 5 // prerequisite properly configured relay environment 6 import environment from ' / /relay/environment'; 7&#x9; 8 // this will be created in the next steps 9 import todolist from ' /todolist'; 10&#x9; 11 const todolistqueryrenderer = () => { 12 return ( 13 // the queryrenderer acts as a wrapper to any code, providing query results to 14 // the child components and updating them as needed 15 // note that the query is using a fragment called todolist query, 16 // which will be created in the next steps 17 \<queryrenderer 18 environment={environment} 19 query={graphql` 20 query todolistqueryrendererquery { 21 todolist query 22 } 23 `} 24 variables={null} 25 render={({ error, props }) => { 26 if (error) { 27 return ( 28 \<view> 29 \<text>{error message}\</text> 30 \</view> 31 ); 32 } else if (props) { 33 return \<todolist query={props} />; 34 } 35 return ( 36 \<view> 37 \<text>loading \</text> 38 \</view> 39 ); 40 }} 41 /> 42 ); 43 } 44&#x9; 45 export default todolistqueryrenderer; 3 buat komponen list dan fragmen objek sekarang mari kita buat komponen daftar kita, yang akan merender data yang diambil dari queryrenderer komponen ini untuk saat ini hanya akan berisi tampilan gulir sederhana yang berisi fungsi peta yang merender setiap node silakan buat file baru di direktori src anda yang disebut todolist js todolist js dan tambahkan kode berikut 1 import react, {usestate} from 'react'; 2 import { 3 view, 4 safeareaview, 5 image, 6 scrollview, 7 statusbar, 8 stylesheet, 9 touchableopacity, 10 } from 'react native'; 11&#x9; 12 import { 13 list, 14 text as papertext, 15 button as paperbutton, 16 textinput as papertextinput, 17 } from 'react native paper'; 18 import {createfragmentcontainer} from 'react relay'; 19&#x9; 20 const todolist = props => { 21 const \[newtodotitle, setnewtodotitle] = usestate(''); 22&#x9; 23 const {query} = props; 24 const {todos} = query; 25&#x9; 26 const rendertodos = () => { 27 if (!todos) { 28 return null; 29 } 30&#x9; 31 return todos edges map(({node todo}) => ( 32 \<list item 33 key={todo id} 34 title={todo title} 35 titlestyle={todo done ? styles todo text done styles todo text} 36 style={styles todo item} 37 right={props => ( 38 <> 39 {!todo done && ( 40 \<touchableopacity onpress={() => updatetodo(todo id, true)}> 41 \<list icon { props} icon="check" color={'#4caf50'} /> 42 \</touchableopacity> 43 )} 44&#x9; 45 \<touchableopacity onpress={() => deletetodo(todo id)}> 46 \<list icon { props} icon="close" color={'#ef5350'} /> 47 \</touchableopacity> 48 \</> 49 )} 50 /> 51 )); 52 }; 53&#x9; 54 return ( 55 <> 56 \<statusbar backgroundcolor="#208aec" /> 57 \<safeareaview style={styles container}> 58 \<view style={styles header}> 59 \<papertext style={styles header text bold}> 60 {'react native on back4app'} 61 \</papertext> 62 \<papertext style={styles header text}>{'product creation'}\</papertext> 63 \</view> 64 \<view style={styles create todo container}> 65 \</view> 66 \<scrollview style={styles todo list}>{rendertodos()}\</scrollview> 67 \</safeareaview> 68 \</> 69 ); 70 }; 71&#x9; 72 const todolistfragmentcontainer = createfragmentcontainer(todolist, { 73 query graphql` 74 fragment todolist query on query { 75 todos(first 50) @connection(key "todolist todos", filters \[]) { 76 edges { 77 node { 78 id 79 title 80 done 81 } 82 } 83 } 84 } 85 `, 86 }); query renderer di langkah 2 mengharapkan sebuah fragmen data bernama todolist query todolist query , jadi kami menambahkannya ke komponen daftar juga di akhir file ingat bahwa fragmen graphql adalah struktur yang bertanggung jawab untuk memanggil data yang dibutuhkan komponen untuk dirender dan menentukan apa yang perlu dikembalikan 4 membuat objek langkah pertama untuk mengelola data anda di database graphql back4app anda adalah memiliki beberapa data di dalamnya kami perlu membuat fungsi untuk memanggil untuk membuat sebuah todo todo baru di komponen daftar kami menggunakan mutasi yang bertanggung jawab untuk itu mari kita mulai dengan mutasi, jadi buat file baru bernama createtodomutation js createtodomutation js di direktori src/mutations src/mutations yang berisi kode berikut 1 import { commitmutation, graphql } from "react relay"; 2 import { root id, connectionhandler } from 'relay runtime'; 3&#x9; 4 const connectioncreateedgeupdater = (store, nodeid) => { 5 const parentproxy = store get(root id); 6 const todoconnection = connectionhandler getconnection(parentproxy, 'todolist todos'); 7&#x9; 8 const newtodo = store get(nodeid); 9 const edge = connectionhandler createedge(store, todoconnection, newtodo, 'todoedge'); 10 11 // no cursor provided, append the edge at the end 12 connectionhandler insertedgeafter(todoconnection, edge); 13 } 14&#x9; 15 const mutation = graphql` 16 mutation createtodomutation($input createtodoinput!) { 17 createtodo(input $input) { 18 todo { 19 id 20 title 21 done 22 } 23 } 24 } 25 `; 26&#x9; 27 function commit({ environment, input, oncompleted, onerror }) { 28 const variables = { input }; 29&#x9; 30 commitmutation(environment, { 31 mutation, 32 variables, 33 oncompleted, 34 onerror, 35 updater (store) => { 36 const todoid = store getrootfield('createtodo') getlinkedrecord('todo') getvalue('id'); 37&#x9; 38 connectioncreateedgeupdater(store, todoid) 39 } 40 }); 41 } relay modern menyediakan kita sejumlah endpoint api yang dapat digunakan untuk memperbarui data setelah panggilan mutasi dalam fungsi ini, kami menggunakan beberapa fungsinya untuk mendapatkan yang baru todo todo yang dibuat dan memperbarui daftar yang sudah ada di frontend dengan pendekatan ini, kami menghindari panggilan baru ke backend yang menghemat waktu yang akan dihabiskan untuk permintaan baru, internet pengguna, pengambilan berlebih, dan lainnya sekarang tambahkan fungsi berikut ke todolist todolist komponen, yang akan memanggil createtodomutation createtodomutation dan akan dirujuk nanti oleh sebuah tombol 1 const createtodo = () => { 2 const input = { 3 fields { 4 title newtodotitle, 5 done false, 6 }, 7 }; 8&#x9; 9 createtodomutation commit({ 10 environment, 11 input input, 12 oncompleted () => { 13 alert alert('success!', 'todo created!'); 14 setnewtodotitle(''); 15 }, 16 onerror (errors) => { 17 alert alert('error!', errors); 18 }, 19 }); 20 } 5 memperbarui objek memperbarui objek mirip dengan membuatnya, dengan tambahan bahwa, ketika anda memperbarui objek menggunakan relay modern, anda hanya perlu meminta bidang yang ingin anda perbarui dengan keadaan baru pada output mutasi buat file baru bernama updatetodomutation js updatetodomutation js di src/mutations src/mutations direktori yang berisi kode berikut 1 import { commitmutation, graphql } from "react relay"; 2&#x9; 3 const mutation = graphql` 4 mutation updatetodomutation($input updatetodoinput!) { 5 updatetodo(input $input) { 6 todo { 7 id 8 title 9 done 10 } 11 } 12 } 13 `; 14&#x9; 15 function commit({ environment, input, oncompleted, onerror }) { 16 const variables = { input }; 17&#x9; 18 commitmutation(environment, { 19 mutation, 20 variables, 21 oncompleted, 22 onerror, 23 }); 24 } 25&#x9; 26 export default { 27 commit, 28 }; sama seperti pada langkah sebelumnya, tambahkan fungsi berikut ke todolist todolist komponen, yang akan memanggil updatetodomutation updatetodomutation dan akan dirujuk nanti oleh sebuah tombol 1 const updatetodo = (todoid, done) => { 2 const input = { 3 id todoid, 4 fields { 5 done, 6 } 7 } 8&#x9; 9 updatetodomutation commit({ 10 environment, 11 input input, 12 oncompleted () => { 13 alert alert('success!', 'todo updated!'); 14 }, 15 onerror (errors) => { 16 alert alert('error!', errors); 17 }, 18 }); 19 } 6 menghapus objek ketika anda menghapus sebuah objek, dengan api relay store anda dapat memperbarui daftar dan menghapus objek lama dari frontend kami akan memanggil callback updater, mirip dengan pembaruan dari createtodo createtodo , tetapi kami akan mengirimkan koneksi dan id dari to do untuk menghapusnya dari daftar dengan cara ini, kami menjaga frontend tetap diperbarui dengan setia ke server kami buat file baru bernama deletetodomutation js deletetodomutation js di dalam src/mutations src/mutations direktori yang berisi kode berikut 1 import { commitmutation, graphql } from "react relay"; 2 import { root id, connectionhandler } from 'relay runtime'; 3&#x9; 4 const connectiondeleteedgeupdater = (store, nodeid) => { 5 const parentproxy = store get(root id); 6 const connection = connectionhandler getconnection(parentproxy, 'todolist todos'); 7&#x9; 8 const newcount = connection getvalue('count'); 9 connection setvalue(newcount 1, 'count'); 10&#x9; 11 connectionhandler deletenode(connection, nodeid); 12 } 13&#x9; 14 const mutation = graphql` 15 mutation deletetodomutation($input deletetodoinput!) { 16 deletetodo(input $input) { 17 todo { 18 id 19 } 20 } 21 } 22 `; 23&#x9; 24 function commit({ environment, input, oncompleted, onerror }) { 25 const variables = { input }; 26&#x9; 27 commitmutation(environment, { 28 mutation, 29 variables, 30 oncompleted, 31 onerror, 32 updater (store) => { 33 connectiondeleteedgeupdater(store, input id) 34 } 35 }); 36 } 37&#x9; 38 export default { 39 commit, 40 }; sama seperti pada langkah sebelumnya, tambahkan fungsi berikut ke todolist todolist komponen, yang akan memanggil deletetodomutation deletetodomutation dan akan dirujuk nanti oleh sebuah tombol 1 const deletetodo = (todoid) => { 2 const input = { 3 id todoid, 4 } 5&#x9; 6 deletetodomutation commit({ 7 environment, 8 input input, 9 oncompleted () => { 10 alert alert('success!', 'todo deleted!'); 11 }, 12 onerror (errors) => { 13 alert alert('error!', errors); 14 }, 15 }); 16 } 7 menggunakan crud dalam komponen react native mari kita lengkapi kode komponen todolist todolist dengan elemen antarmuka pengguna yang bergaya, variabel status, dan panggilan ke fungsi crud anda 1 import react, {usestate} from 'react'; 2 import { 3 alert, 4 view, 5 safeareaview, 6 image, 7 scrollview, 8 statusbar, 9 stylesheet, 10 touchableopacity, 11 } from 'react native'; 12&#x9; 13 import { 14 list, 15 text as papertext, 16 button as paperbutton, 17 textinput as papertextinput, 18 } from 'react native paper'; 19 import {createfragmentcontainer} from 'react relay'; 20 import createtodomutation from ' /mutations/createtodomutation'; 21 import updatetodomutation from ' /mutations/updatetodomutation'; 22 import deletetodomutation from ' /mutations/deletetodomutation'; 23&#x9; 24 import environment from ' / /relay/environment'; 25&#x9; 26 const todolist = props => { 27 const \[newtodotitle, setnewtodotitle] = usestate(''); 28&#x9; 29 const {query} = props; 30 const {todos} = query; 31&#x9; 32 const createtodo = () => { 33 const input = { 34 fields { 35 title newtodotitle, 36 done false, 37 }, 38 }; 39&#x9; 40 createtodomutation commit({ 41 environment, 42 input input, 43 oncompleted () => { 44 alert alert('success!', 'todo created!'); 45 setnewtodotitle(''); 46 }, 47 onerror errors => { 48 alert alert('error!', errors); 49 }, 50 }); 51 }; 52&#x9; 53 const updatetodo = (todoid, done) => { 54 const input = { 55 id todoid, 56 fields { 57 done, 58 }, 59 }; 60&#x9; 61 updatetodomutation commit({ 62 environment, 63 input input, 64 oncompleted () => { 65 alert alert('success!', 'todo updated!'); 66 }, 67 onerror errors => { 68 alert alert('error!', errors); 69 }, 70 }); 71 }; 72&#x9; 73 const deletetodo = todoid => { 74 const input = { 75 id todoid, 76 }; 77&#x9; 78 deletetodomutation commit({ 79 environment, 80 input input, 81 oncompleted () => { 82 alert alert('success!', 'todo deleted!'); 83 }, 84 onerror errors => { 85 alert alert('error!', errors); 86 }, 87 }); 88 }; 89&#x9; 90 const rendertodos = () => { 91 if (!todos) { 92 return null; 93 } 94&#x9; 95 return todos edges map(({node todo}) => ( 96 \<list item 97 key={todo id} 98 title={todo title} 99 titlestyle={todo done ? styles todo text done styles todo text} 100 style={styles todo item} 101 right={props => ( 102 <> 103 {!todo done && ( 104 \<touchableopacity onpress={() => updatetodo(todo id, true)}> 105 \<list icon { props} icon="check" color={'#4caf50'} /> 106 \</touchableopacity> 107 )} 108&#x9; 109 \<touchableopacity onpress={() => deletetodo(todo id)}> 110 \<list icon { props} icon="close" color={'#ef5350'} /> 111 \</touchableopacity> 112 \</> 113 )} 114 /> 115 )); 116 }; 117&#x9; 118 return ( 119 <> 120 \<statusbar backgroundcolor="#208aec" /> 121 \<safeareaview style={styles container}> 122 \<view style={styles header}> 123 \<image 124 style={styles header logo} 125 source={ { 126 uri 127 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 128 } } 129 /> 130 \<papertext style={styles header text bold}> 131 {'react native on back4app'} 132 \</papertext> 133 \<papertext style={styles header text}>{'product creation'}\</papertext> 134 \</view> 135 \<view style={styles create todo container}> 136 {/ todo create text input /} 137 \<papertextinput 138 value={newtodotitle} 139 onchangetext={text => setnewtodotitle(text)} 140 label="new todo" 141 mode="outlined" 142 style={styles create todo input} 143 /> 144 {/ todo create button /} 145 \<paperbutton 146 onpress={() => createtodo()} 147 mode="contained" 148 icon="plus" 149 color={'#208aec'} 150 style={styles create todo button}> 151 {'add'} 152 \</paperbutton> 153 \</view> 154 \<scrollview style={styles todo list}>{rendertodos()}\</scrollview> 155 \</safeareaview> 156 \</> 157 ); 158 }; 159&#x9; 160 const todolistfragmentcontainer = createfragmentcontainer(todolist, { 161 query graphql` 162 fragment todolist query on query { 163 todos(first 1000) @connection(key "todolist todos", filters \[]) { 164 edges { 165 node { 166 id 167 title 168 done 169 } 170 } 171 } 172 } 173 `, 174 }); 175&#x9; 176 const styles = stylesheet create({ 177 container { 178 flex 1, 179 backgroundcolor '#fff', 180 }, 181 wrapper { 182 width '90%', 183 alignself 'center', 184 }, 185 header { 186 alignitems 'center', 187 paddingtop 10, 188 paddingbottom 20, 189 backgroundcolor '#208aec', 190 }, 191 header logo { 192 width 170, 193 height 40, 194 marginbottom 10, 195 resizemode 'contain', 196 }, 197 header text bold { 198 color '#fff', 199 fontsize 14, 200 fontweight 'bold', 201 }, 202 header text { 203 margintop 3, 204 color '#fff', 205 fontsize 14, 206 }, 207 flex between { 208 flexdirection 'row', 209 alignitems 'center', 210 justifycontent 'space between', 211 }, 212 create todo container { 213 flexdirection 'row', 214 paddingleft 10, 215 paddingright 10, 216 }, 217 create todo input { 218 flex 1, 219 height 38, 220 marginbottom 16, 221 backgroundcolor '#fff', 222 fontsize 14, 223 }, 224 create todo button { 225 margintop 6, 226 marginleft 15, 227 height 40, 228 }, 229 todo list { 230 paddingleft 10, 231 paddingright 10, 232 }, 233 todo item { 234 borderbottomwidth 1, 235 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 236 }, 237 todo text { 238 fontsize 15, 239 }, 240 todo text done { 241 color 'rgba(0, 0, 0, 0 3)', 242 fontsize 15, 243 textdecorationline 'line through', 244 }, 245 }); 246&#x9; 247 export default todolistfragmentcontainer; sebelum menjalankan proyek anda, jangan lupa untuk menjalankan yarn relay yarn relay dan memperbarui relay generated generated tipe jika komponen anda disetel dengan benar, anda seharusnya melihat sesuatu seperti ini setelah membangun dan menjalankan aplikasi silakan tambahkan beberapa to do dengan mengetikkan judulnya di kotak input satu per satu dan menekan tombol tambah perhatikan bahwa setelah setiap pembuatan yang berhasil, createtodo createtodo fungsi memicu callback updater ke dalam mutasi, menyegarkan daftar tugas anda secara otomatis anda sekarang seharusnya memiliki daftar to do yang cukup besar seperti ini anda sekarang dapat menandai tugas anda sebagai selesai dengan mengklik tanda centang di sampingnya, yang menyebabkan nilai selesai mereka diperbarui menjadi benar dan mengubah status ikonnya di sebelah kiri seperti yang disebutkan dalam langkah fungsi pembaruan, relay akan secara otomatis memperbarui todo dengan nilai baru dari bidang selesai selesai satu satunya operasi data yang tersisa sekarang adalah operasi hapus, yang dapat dilakukan dengan menekan ikon tempat sampah di paling kanan objek daftar tugas anda setelah berhasil menghapus objek, anda akan mendapatkan pesan peringatan seperti ini kesimpulan di akhir panduan ini, anda telah belajar bagaimana melakukan operasi data dasar (crud) dengan grapqhql dan relay modern di react native, sambil juga mempelajari api koneksi relay yang membantu kami memperbarui frontend kami