React Native GraphQL CRUD Tutorial for Developers

react native graphql crud สอน บทนำ การจัดการข้อมูลบน back4app โดยใช้ graphql เป็นตัวเลือกที่ทรงพลังสำหรับแอปพลิเคชันทุกประเภท ช่วยเร่งความเร็วในการค้นหาและทำให้การค้นหาที่ซับซ้อนที่สุดง่ายขึ้น back4app ใช้แนวทางปฏิบัติทั่วไปสำหรับการกำหนดค่า graphql และให้เครื่องมือที่ยอดเยี่ยมเพื่อช่วยในการตั้งค่าสภาพแวดล้อมของคุณสำหรับการพัฒนา ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการดำเนินการพื้นฐานเกี่ยวกับข้อมูลผ่านแอปตัวอย่าง crud ซึ่งจะแสดงให้คุณเห็นวิธีการสร้าง อ่าน อัปเดต และลบข้อมูลจากฐานข้อมูลเซิร์ฟเวอร์ parse ของคุณใน react native โดยใช้ graphql และ relay คุณจะเริ่มต้นด้วยการสร้างฟังก์ชันคอมโพเนนต์สำหรับแต่ละการดำเนินการ crud โดยใช้ฟังก์ชันเหล่านี้ในเลย์เอาต์หน้าจอที่สมบูรณ์ ซึ่งจะส่งผลให้เกิดแอปพลิเคชันรายการที่ต้องทำ ในทุกช่วงเวลา คุณสามารถเข้าถึงโครงการนี้ได้ผ่านที่เก็บ github ของเราเพื่อตรวจสอบสไตล์และโค้ดที่สมบูรณ์ https //github com/templates back4app/react native graphql relay js users ข้อกำหนดเบื้องต้น สำหรับการสอนนี้เราจะใช้ parse server ในเวอร์ชัน 4 4 หากคุณต้องการใช้เวอร์ชันอื่น คุณสามารถตรวจสอบโค้ดการเปลี่ยนแปลงที่เกี่ยวข้องได้ที่ https //www back4app com/docs/parse graphql/graphql logout mutation ตัวอย่างสำหรับเวอร์ชันที่คุณต้องการ แอป react native ที่สร้างและเชื่อมต่อกับ back4app; สรุป https //www back4app com/docs/react native/graphql/relay setup ความเข้าใจที่ดีเกี่ยวกับ relay store และ relay connection updater; คุณสามารถอ่านเพิ่มเติมได้ที่ https //app archbee com/docs/ roxiyumxobue9i7uv49e/h4vz hqkkijx7yl2doahj เราจะใช้ javascript เป็นการใช้งานเริ่มต้น เป้าหมาย เพื่อสร้างแอปพลิเคชัน crud เบื้องต้นใน react native โดยใช้ parse, graphql, และ relay 1 การสร้างคลาส todo ในขั้นตอนแรกนี้ เราจำเป็นต้องกำหนดคลาสที่แอปพลิเคชันจะทำงานด้วย คลาส todo todo ต้องมีเพียงฟิลด์ title( string string ) ที่อธิบายงานและฟิลด์ done( boolean boolean ) ที่บ่งบอกว่างานเสร็จสมบูรณ์หรือไม่ คุณสามารถใช้การเปลี่ยนแปลงทั่วไปเพื่อสร้างคลาสในฐานข้อมูลของคุณหากคุณยังไม่มี โดยทำตามคำแนะนำใน https //www back4app com/docs/parse graphql/graphql mutation create object คุณยังสามารถสร้างคลาสโดยใช้แดชบอร์ดของ back4app ผ่านเบราว์เซอร์ฐานข้อมูลเองหรือจาก js หรือคอนโซล graphql หลังจากสร้างคลาสใหม่แล้ว อย่าลืมดาวน์โหลดไฟล์ schema json schema json จากแดชบอร์ดและบันทึกไว้ในแอปพลิเคชันของคุณภายใน data data ไดเรกทอรี นี่เป็นสิ่งจำเป็นสำหรับ relay compiler ในการสร้างประเภทจากการค้นหา การเปลี่ยนแปลง ฯลฯ โดยอัตโนมัติ ในจุดนี้ แดชบอร์ด back4app ของคุณจะสร้างการเปลี่ยนแปลง crud โดยอัตโนมัติสำหรับวัตถุคลาส หากต้องการดูคุณสามารถไปที่คอนโซล graphql เปิดแท็บเอกสาร และค้นหา todo todo 2 การสอบถามและการเรนเดอร์วัตถุ ตอนนี้เรามาสร้างคอมโพเนนต์ที่จะรับผิดชอบในการทำการสอบถามรายการในเซิร์ฟเวอร์ back4app สร้างการเชื่อมต่อสำหรับวัตถุ และทำการเรนเดอร์และอัปเดตเนื้อหารายการโดยอัตโนมัติตามที่มีการเปลี่ยนแปลง สร้างไฟล์ใหม่ชื่อ todolistqueryrenderer js todolistqueryrenderer js ใน src src ไดเรกทอรีของคุณด้วยโค้ดต่อไปนี้ 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 สร้างคอมโพเนนต์รายการและ fragment ของวัตถุ ตอนนี้เรามาสร้างคอมโพเนนต์รายการของเรา ซึ่งจะเรนเดอร์ข้อมูลที่ดึงมาจาก queryrenderer คอมโพเนนต์นี้จะมีเพียงมุมมองการเลื่อนแบบง่ายที่มีฟังก์ชันการแมพเรนเดอร์แต่ละโหนด ไปข้างหน้าและสร้างไฟล์ใหม่ในไดเรกทอรี src ของคุณชื่อ todolist js todolist js และเพิ่มโค้ดต่อไปนี้ 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 }); ตัวเรนเดอร์คำถามในขั้นตอนที่ 2 คาดหวังข้อมูลบางส่วนที่ชื่อว่า todolist query todolist query , ดังนั้นเราจึงเพิ่มมันลงในส่วนประกอบรายการเช่นกันที่ส่วนท้ายของไฟล์ จำไว้ว่าฟรากเมนต์ graphql เป็นโครงสร้างที่รับผิดชอบในการเรียกข้อมูลที่ส่วนประกอบต้องการเพื่อเรนเดอร์และระบุสิ่งที่ต้องส่งคืน 4 การสร้างวัตถุ ขั้นตอนแรกในการจัดการข้อมูลของคุณในฐานข้อมูล graphql ของ back4app คือการมีข้อมูลบางอย่างในนั้น เราจำเป็นต้องสร้างฟังก์ชันเพื่อเรียกใช้ในการสร้าง todo todo ใหม่ในส่วนประกอบรายการของเราด้วยการกลายพันธุ์ที่รับผิดชอบสำหรับมัน เริ่มต้นด้วยการกลายพันธุ์ ดังนั้นให้สร้างไฟล์ใหม่ชื่อ createtodomutation js createtodomutation js ใน src/mutations src/mutations ไดเรกทอรีที่มีโค้ดดังต่อไปนี้ 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 ให้ api endpoints จำนวนมากที่สามารถใช้ในการอัปเดตข้อมูลหลังจากการเรียก mutation ในฟังก์ชันนี้ เราใช้ฟังก์ชันบางอย่างเพื่อดึงข้อมูลใหม่ที่สร้างขึ้นและอัปเดตรายการที่มีอยู่แล้วใน frontend ด้วยวิธีนี้ เราหลีกเลี่ยงการเรียกใหม่ไปยัง backend ซึ่งช่วยประหยัดเวลาในการทำคำขอใหม่ การใช้อินเทอร์เน็ตของผู้ใช้ การดึงข้อมูลมากเกินไป และอื่น ๆ ตอนนี้ให้เพิ่มฟังก์ชันต่อไปนี้ไปยัง todolist todolist คอมโพเนนต์ ซึ่งจะเรียก createtodomutation createtodomutation และจะถูกอ้างอิงในภายหลังโดยปุ่ม 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 การอัปเดตวัตถุ การอัปเดตวัตถุมีความคล้ายคลึงกับการสร้างมัน โดยมีการเพิ่มเติมว่า เมื่อคุณกำลังอัปเดตวัตถุโดยใช้ relay modern คุณเพียงแค่ต้องขอฟิลด์ที่คุณต้องการอัปเดตด้วยสถานะใหม่ในผลลัพธ์ของการกลายพันธุ์ สร้างไฟล์ใหม่ชื่อ updatetodomutation js updatetodomutation js ใน src/mutations src/mutations ไดเรกทอรีที่มีโค้ดดังต่อไปนี้ 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 }; เช่นเดียวกับในขั้นตอนก่อนหน้า ให้เพิ่มฟังก์ชันต่อไปนี้ไปยัง todolist todolist คอมโพเนนต์ ซึ่งจะเรียกใช้ updatetodomutation updatetodomutation และจะถูกอ้างอิงในภายหลังโดยปุ่ม 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 การลบวัตถุ เมื่อคุณลบวัตถุ ด้วย relay store apis คุณสามารถอัปเดตรายการและลบวัตถุเก่าออกจากส่วนหน้า เราจะเรียกใช้ callback updater ซึ่งคล้ายกับการอัปเดตจาก createtodo createtodo , แต่เราจะส่งการเชื่อมต่อและ id ของ to do เพื่อที่จะลบมันออกจากรายการ ด้วยวิธีนี้ เราจะทำให้ส่วนหน้าได้รับการอัปเดตอย่างถูกต้องตามเซิร์ฟเวอร์ของเรา สร้างไฟล์ใหม่ชื่อ deletetodomutation js deletetodomutation js ใน src/mutations src/mutations ไดเรกทอรีที่มีโค้ดดังต่อไปนี้ 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 }; เช่นเดียวกับในขั้นตอนก่อนหน้า ให้เพิ่มฟังก์ชันต่อไปนี้ไปยัง todolist todolist คอมโพเนนต์ ซึ่งจะเรียกใช้ deletetodomutation deletetodomutation และจะถูกอ้างอิงในภายหลังโดยปุ่ม 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 การใช้ crud ในคอมโพเนนต์ react native ตอนนี้เรามาเสร็จสิ้นโค้ดของ todolist todolist คอมโพเนนต์ด้วยองค์ประกอบของอินเทอร์เฟซผู้ใช้ที่มีสไตล์ ตัวแปรสถานะ และการเรียกใช้ฟังก์ชัน crud ของคุณ 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; ก่อนที่จะรันโปรเจกต์ของคุณ อย่าลืมรัน yarn relay yarn relay และอัปเดต relay generated generated ประเภท หากส่วนประกอบของคุณถูกตั้งค่าอย่างถูกต้อง คุณควรเห็นสิ่งที่คล้ายกับนี้หลังจากสร้างและรันแอป ไปข้างหน้าและเพิ่มรายการที่ต้องทำโดยพิมพ์ชื่อในกล่องป้อนข้อมูลทีละรายการและกดปุ่มเพิ่ม โปรดทราบว่าหลังจากการสร้างที่สำเร็จทุกครั้ง ฟังก์ชัน createtodo createtodo จะเรียกใช้การอัปเดต callback ในการเปลี่ยนแปลง ทำให้รายการงานของคุณรีเฟรชโดยอัตโนมัติ ตอนนี้คุณควรมีรายการที่ต้องทำที่มีขนาดใหญ่เช่นนี้ คุณสามารถทำเครื่องหมายงานของคุณว่าเสร็จแล้วโดยการคลิกที่เครื่องหมายถูกข้างๆ ซึ่งจะทำให้ค่าที่เสร็จแล้วถูกอัปเดตเป็นจริงและเปลี่ยนสถานะไอคอนทางด้านซ้าย ตามที่กล่าวในขั้นตอนฟังก์ชันอัปเดต relay จะอัปเดต todo โดยอัตโนมัติโดยใช้ค่าของฟิลด์ใหม่ เสร็จแล้ว เสร็จแล้ว การดำเนินการข้อมูลที่เหลืออยู่เพียงอย่างเดียวคือการลบ ซึ่งสามารถทำได้โดยการกดที่ไอคอนถังขยะที่อยู่ทางด้านขวาสุดของวัตถุในรายการที่ต้องทำของคุณ หลังจากลบวัตถุสำเร็จแล้ว คุณควรได้รับข้อความแจ้งเตือนเช่นนี้ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการดำเนินการข้อมูลพื้นฐาน (crud) ด้วย grapqhql และ relay modern บน react native พร้อมกับเรียนรู้เกี่ยวกับ relay connection apis ที่ช่วยให้เราสามารถอัปเดตส่วนหน้าได้