Relational Queries

การค้นหาข้อมูลเชิงสัมพันธ์ใน react native โดยใช้ parse บทนำ ในคู่มือนี้ คุณจะทำการค้นหาข้อมูลเชิงสัมพันธ์ใน parse และนำไปใช้ในคอมโพเนนต์ react native โดยใช้การค้นหาเหล่านี้ คุณจะได้เรียนรู้วิธีการตั้งค่าและค้นหาข้อมูลที่สมจริงโดยใช้ back4app และ react native ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป react native ที่สร้างและเชื่อมต่อกับ back4app หากคุณต้องการทดสอบ/ใช้เลย์เอาต์หน้าจอที่จัดเตรียมโดยคู่มือนี้ คุณควรตั้งค่า react native paper react native paper ไลบรารี เป้าหมาย ค้นหาข้อมูลเชิงสัมพันธ์ที่เก็บไว้ใน back4app จากแอป react native 1 การเข้าใจคลาส parse query การดำเนินการค้นหาใด ๆ ใน parse จะใช้ parse query parse query ซึ่งจะช่วยให้คุณดึงข้อมูลเฉพาะจากฐานข้อมูลของคุณตลอดทั้งแอปของคุณ เป็นสิ่งสำคัญที่ต้องรู้ว่า parse query parse query จะถูกแก้ไขเฉพาะหลังจากเรียกใช้วิธีการดึงข้อมูล (เช่น parse query find parse query find หรือ parse query first parse query first ) ดังนั้นการค้นหาสามารถตั้งค่าและมีการปรับแต่งหลายอย่างที่สามารถเชื่อมโยงกันได้ก่อนที่จะถูกเรียกใช้งานจริง ในการสร้าง parse query parse query ใหม่ คุณต้องส่งพารามิเตอร์เป็น parse object parse object ซึ่งเป็นคลาสที่จะเก็บผลลัพธ์การค้นหาของคุณ ตัวอย่างการค้นหาสามารถดูได้ด้านล่าง ซึ่งมีการค้นหาคลาส book book ที่เป็นนิยาย 1 // this will create your query 2 let parsequery = new parse query("book"); 3 // the query will resolve only after calling this method 4 let queryresult = await parsequery find(); คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ parse query parse query คลาส ที่นี่ในเอกสารทางการ https //parseplatform org/parse sdk js/api/master/parse query html 2 บันทึกข้อมูลบางอย่างบน back4app เรามาสร้างกลุ่มคลาส ซึ่งจะเป็นเป้าหมายของการค้นหาในคู่มือนี้ คลาสที่เราจะสร้างมีดังนี้ ผู้เขียน ผู้เขียน , หนังสือ หนังสือ , ผู้จัดพิมพ์ ผู้จัดพิมพ์ และ ร้านหนังสือ ร้านหนังสือ , ซึ่ง หนังสือ หนังสือ มีความสัมพันธ์แบบ 1\ n กับ ผู้จัดพิมพ์ ผู้จัดพิมพ์ และ n\ n กับ ผู้เขียน ผู้เขียน , และ ร้านหนังสือ ร้านหนังสือ มีความสัมพันธ์แบบ n\ n กับ หนังสือ หนังสือ ใน parse js console สามารถรันโค้ด javascript ได้โดยตรง โดยการค้นหาและอัปเดตเนื้อหาฐานข้อมูลแอปพลิเคชันของคุณโดยใช้คำสั่ง js sdk รันโค้ดด้านล่างจาก js console ของคุณและแทรกข้อมูลลงใน back4app นี่คือรูปลักษณ์ของ js console ในแดชบอร์ดของคุณ ไปข้างหน้าและสร้างคลาสด้วยเนื้อหาตัวอย่างต่อไปนี้ 1 // add objects and create tables 2 // authors 3 const authora = new parse object('author'); 4 authora set('name', 'aaron writer'); 5 await authora save(); 6&#x9; 7 const authorb = new parse object('author'); 8 authorb set('name', 'beatrice novelist'); 9 await authorb save(); 10&#x9; 11 const authorc = new parse object('author'); 12 authorc set('name', 'casey columnist'); 13 await authorc save(); 14&#x9; 15 // publishers 16 const publishera = new parse object('publisher'); 17 publishera set('name', 'acacia publishings'); 18 await publishera save(); 19&#x9; 20 const publisherb = new parse object('publisher'); 21 publisherb set('name', 'birch distributions'); 22 await publisherb save(); 23&#x9; 24 // books 25 const booka = new parse object('book'); 26 booka set('title', 'a love story'); 27 booka set('publisher', publishera); 28 booka set('publishingdate', new date('05/07/1998')); 29 const bookarelation = booka relation("authors"); 30 bookarelation add(authora); 31 await booka save(); 32&#x9; 33 const bookb = new parse object('book'); 34 bookb set('title', 'benevolent elves'); 35 bookb set('publisher', publisherb); 36 bookb set('publishingdate', new date('11/31/2008')); 37 const bookbrelation = bookb relation("authors"); 38 bookbrelation add(authorb); 39 await bookb save(); 40&#x9; 41 const bookc = new parse object('book'); 42 bookc set('title', 'can you believe it?'); 43 bookc set('publisher', publisherb); 44 bookc set('publishingdate', new date('08/21/2018')); 45 const bookcrelation = bookc relation("authors"); 46 bookcrelation add(authora); 47 bookcrelation add(authorc); 48 await bookc save(); 49&#x9; 50 // bookstore 51 const bookstorea = new parse object('bookstore'); 52 bookstorea set('name', 'books of love'); 53 const bookstorearelation = bookstorea relation("books"); 54 bookstorearelation add(booka); 55 await bookstorea save(); 56&#x9; 57 const bookstoreb = new parse object('bookstore'); 58 bookstoreb set('name', 'fantasy books'); 59 const bookstorebrelation = bookstoreb relation("books"); 60 bookstorebrelation add(bookb); 61 await bookstoreb save(); 62&#x9; 63 const bookstorec = new parse object('bookstore'); 64 bookstorec set('name', 'general books'); 65 const bookstorecrelation = bookstorec relation("books"); 66 bookstorecrelation add(booka); 67 bookstorecrelation add(bookc); 68 await bookstorec save(); 69&#x9; 70 console log('success'); 3 สืบค้นข้อมูล ตอนนี้ที่คุณได้กรอกข้อมูลในคลาสทั้งหมดแล้ว เราสามารถทำการสืบค้นเชิงสัมพันธ์ในนั้นได้ มาลองเริ่มต้นด้วยการกรอง หนังสือ หนังสือ ผลลัพธ์ตามผู้จัดพิมพ์ โดยค้นหาผลลัพธ์ที่เป็นของ ผู้จัดพิมพ์ ผู้จัดพิมพ์ “acacia publishings” (หรือ “publisher a”) โดยใช้ parse query equalto parse query equalto วิธีการ 1 // get publishera object 2 const publisheraquery = new parse query('publisher'); 3 publisheraquery equalto('name', 'acacia publishings'); 4 const publishera = await publisheraquery first(); 5&#x9; 6 // query books with publishera 7 const bookquery = new parse query('book'); 8 bookquery equalto('publisher', publishera); 9 let queryresults = await bookquery find(); 10&#x9; 11 // let's show the results 12 for (let result of queryresults) { 13 // you access `parse objects` attributes by using ` get` 14 console log(result get('title')); 15 }; ตอนนี้เรามาค้นหาว่า bookstore bookstore วัตถุใดบ้างที่มี book book วัตถุที่มีวันที่เผยแพร่มากกว่า 01/01/2010 โดยใช้การค้นหาภายในด้วย parse query greaterthan parse query greaterthan และจากนั้นใช้ parse query matchesquery parse query matchesquery วิธีการ 1 // create inner book query 2 const bookquery = new parse query('book'); 3 bookquery greaterthan('publishingdate', new date('01/01/2010')); 4&#x9; 5 // query bookstore using inner book query 6 const bookstorequery = new parse query('bookstore'); 7 bookstorequery matchesquery('books', bookquery); 8 let queryresults = await bookstorequery find(); 9&#x9; 10 // let's show the results 11 for (let result of queryresults) { 12 // you access `parse objects` attributes by using ` get` 13 console log(result get('name')); 14 }; ตอนนี้เรามาสร้างการค้นหาที่ซับซ้อนมากขึ้น โดยมองหาว่า bookstore bookstore วัตถุใดบ้างที่มีอย่างน้อยหนึ่ง book book ที่เขียนโดย author author “aaron writer” (หรือ “authora”) โดยใช้ equalto equalto และ matchesquery matchesquery 1 // get authora object 2 const authoraquery = new parse query('author'); 3 authoraquery equalto('name', 'aaron writer'); 4 const authora = await authoraquery first(); 5&#x9; 6 // create inner book query 7 const bookquery = new parse query('book'); 8 bookquery equalto('authors', authora); 9&#x9; 10 // query bookstore using inner book query 11 const bookstorequery = new parse query('bookstore'); 12 bookstorequery matchesquery('books', bookquery); 13 let queryresults = await bookstorequery find(); 14&#x9; 15 // let's show the results 16 for (let result of queryresults) { 17 // you access `parse objects` attributes by using ` get` 18 console log(result get('name')); 19 }; 4 ค้นหาจากคอมโพเนนต์ react native ตอนนี้เรามาใช้คำค้นหาตัวอย่างของเราในคอมโพเนนต์ใน react native กัน โดยมีอินเทอร์เฟซที่เรียบง่ายซึ่งมีรายการแสดงผลลัพธ์และปุ่มสำหรับเรียกใช้คำค้นหา นี่คือวิธีการจัดเรียงโค้ดคอมโพเนนต์ โปรดสังเกตที่ doquery doquery ฟังก์ชัน ซึ่งมีโค้ดตัวอย่างจากก่อนหน้านี้ javascript 1 import react, {usestate} from 'react'; 2 import {alert, image, view, scrollview, stylesheet} from 'react native'; 3 import parse from 'parse/react native'; 4 import { 5 list, 6 title, 7 button as paperbutton, 8 text as papertext, 9 } from 'react native paper'; 10&#x9; 11 export const querylist = () => { 12 // state variable 13 const \[queryresults, setqueryresults] = usestate(null); 14&#x9; 15 const doquerya = async function () { 16 // get publishera object 17 const publisheraquery = new parse query('publisher'); 18 publisheraquery equalto('name', 'acacia publishings'); 19 const publishera = await publisheraquery first(); 20&#x9; 21 // query books with publishera 22 const bookquery = new parse query('book'); 23 bookquery equalto('publisher', publishera); 24&#x9; 25 try { 26 let results = await bookquery find(); 27 setqueryresults(results); 28 return true; 29 } catch (error) { 30 // error can be caused by lack of internet connection 31 alert alert('error!', error message); 32 return false; 33 } 34 }; 35&#x9; 36 const doqueryb = async function () { 37 // create inner book query 38 const bookquery = new parse query('book'); 39 bookquery greaterthan('publishingdate', new date('01/01/2010')); 40&#x9; 41 // query bookstore using inner book query 42 const bookstorequery = new parse query('bookstore'); 43 bookstorequery matchesquery('books', bookquery); 44&#x9; 45 try { 46 let results = await bookstorequery find(); 47 setqueryresults(results); 48 return true; 49 } catch (error) { 50 // error can be caused by lack of internet connection 51 alert alert('error!', error message); 52 return false; 53 } 54 }; 55&#x9; 56 const doqueryc = async function () { 57 // get authora object 58 const authoraquery = new parse query('author'); 59 authoraquery equalto('name', 'aaron writer'); 60 const authora = await authoraquery first(); 61&#x9; 62 // create inner book query 63 const bookquery = new parse query('book'); 64 bookquery equalto('authors', authora); 65&#x9; 66 // query bookstore using inner book query 67 const bookstorequery = new parse query('bookstore'); 68 bookstorequery matchesquery('books', bookquery); 69&#x9; 70 try { 71 let results = await bookstorequery find(); 72 setqueryresults(results); 73 return true; 74 } catch (error) { 75 // error can be caused by lack of internet connection 76 alert alert('error!', error message); 77 return false; 78 } 79 }; 80&#x9; 81 const clearqueryresults = async function () { 82 setqueryresults(null); 83 return true; 84 }; 85&#x9; 86 return ( 87 <> 88 \<view style={styles header}> 89 \<image 90 style={styles header logo} 91 source={ { 92 uri 93 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 94 } } 95 /> 96 \<papertext style={styles header text}> 97 \<papertext style={styles header text bold}> 98 {'react native on back4app '} 99 \</papertext> 100 {' relational queries'} 101 \</papertext> 102 \</view> 103 \<scrollview style={styles wrapper}> 104 \<view> 105 \<title>{'result list'}\</title> 106 {/ query list /} 107 {queryresults !== null && 108 queryresults !== undefined && 109 queryresults map((result) => ( 110 \<list item 111 key={result id} 112 title={ 113 result get('name') !== undefined 114 ? result get('name') 115 result get('title') 116 } 117 titlestyle={styles list text} 118 style={styles list item} 119 /> 120 ))} 121 {queryresults === null || 122 queryresults === undefined || 123 (queryresults !== null && 124 queryresults !== undefined && 125 queryresults length <= 0) ? ( 126 \<papertext>{'no results here!'}\</papertext> 127 ) null} 128 \</view> 129 \<view> 130 \<title>{'query buttons'}\</title> 131 \<paperbutton 132 onpress={() => doquerya()} 133 mode="contained" 134 icon="search web" 135 color={'#208aec'} 136 style={styles list button}> 137 {'query a'} 138 \</paperbutton> 139 \<paperbutton 140 onpress={() => doqueryb()} 141 mode="contained" 142 icon="search web" 143 color={'#208aec'} 144 style={styles list button}> 145 {'query b'} 146 \</paperbutton> 147 \<paperbutton 148 onpress={() => doqueryc()} 149 mode="contained" 150 icon="search web" 151 color={'#208aec'} 152 style={styles list button}> 153 {'query c'} 154 \</paperbutton> 155 \<paperbutton 156 onpress={() => clearqueryresults()} 157 mode="contained" 158 icon="delete" 159 color={'#208aec'} 160 style={styles list button}> 161 {'clear results'} 162 \</paperbutton> 163 \</view> 164 \</scrollview> 165 \</> 166 ); 167 }; 168&#x9; 169 // these define the screen component styles 170 const styles = stylesheet create({ 171 header { 172 alignitems 'center', 173 paddingtop 30, 174 paddingbottom 50, 175 backgroundcolor '#208aec', 176 }, 177 header logo { 178 height 50, 179 width 220, 180 resizemode 'contain', 181 }, 182 header text { 183 margintop 15, 184 color '#f0f0f0', 185 fontsize 16, 186 }, 187 header text bold { 188 color '#fff', 189 fontweight 'bold', 190 }, 191 wrapper { 192 width '90%', 193 alignself 'center', 194 }, 195 list button { 196 margintop 6, 197 marginleft 15, 198 height 40, 199 }, 200 list item { 201 borderbottomwidth 1, 202 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 203 }, 204 list text { 205 fontsize 15, 206 }, 207 });1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, image, view, scrollview, stylesheet} from 'react native'; 3 import parse from 'parse/react native'; 4 import { 5 list, 6 title, 7 button as paperbutton, 8 text as papertext, 9 } from 'react native paper'; 10&#x9; 11 export const querylist fc<{}> = ({}) reactelement => { 12 // state variable 13 const \[queryresults, setqueryresults] = usestate(null); 14&#x9; 15 const doquerya = async function () promise\<boolean> { 16 // get publishera object 17 const publisheraquery parse query = new parse query('publisher'); 18 publisheraquery equalto('name', 'acacia publishings'); 19 const publishera parse object = await publisheraquery first(); 20&#x9; 21 // query books with publishera 22 const bookquery parse query = new parse query('book'); 23 bookquery equalto('publisher', publishera); 24&#x9; 25 try { 26 let results \[parse object] = await bookquery find(); 27 setqueryresults(results); 28 return true; 29 } catch (error) { 30 // error can be caused by lack of internet connection 31 alert alert('error!', error message); 32 return false; 33 } 34 }; 35&#x9; 36 const doqueryb = async function () promise\<boolean> { 37 // create inner book query 38 const bookquery parse query = new parse query('book'); 39 bookquery greaterthan('publishingdate', new date('01/01/2010')); 40&#x9; 41 // query bookstore using inner book query 42 const bookstorequery parse query = new parse query('bookstore'); 43 bookstorequery matchesquery('books', bookquery); 44&#x9; 45 try { 46 let results \[parse object] = await bookstorequery find(); 47 setqueryresults(results); 48 return true; 49 } catch (error) { 50 // error can be caused by lack of internet connection 51 alert alert('error!', error message); 52 return false; 53 } 54 }; 55&#x9; 56 const doqueryc = async function () promise\<boolean> { 57 // get authora object 58 const authoraquery parse query = new parse query('author'); 59 authoraquery equalto('name', 'aaron writer'); 60 const authora parse object = await authoraquery first(); 61&#x9; 62 // create inner book query 63 const bookquery parse query = new parse query('book'); 64 bookquery equalto('authors', authora); 65&#x9; 66 // query bookstore using inner book query 67 const bookstorequery parse query = new parse query('bookstore'); 68 bookstorequery matchesquery('books', bookquery); 69&#x9; 70 try { 71 let results \[parse object] = await bookstorequery find(); 72 setqueryresults(results); 73 return true; 74 } catch (error) { 75 // error can be caused by lack of internet connection 76 alert alert('error!', error message); 77 return false; 78 } 79 }; 80&#x9; 81 const clearqueryresults = async function () promise\<boolean> { 82 setqueryresults(null); 83 return true; 84 }; 85&#x9; 86 return ( 87 <> 88 \<view style={styles header}> 89 \<image 90 style={styles header logo} 91 source={ { 92 uri 93 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 94 } } 95 /> 96 \<papertext style={styles header text}> 97 \<papertext style={styles header text bold}> 98 {'react native on back4app '} 99 \</papertext> 100 {' relational queries'} 101 \</papertext> 102 \</view> 103 \<scrollview style={styles wrapper}> 104 \<view> 105 \<title>{'result list'}\</title> 106 {/ query list /} 107 {queryresults !== null && 108 queryresults !== undefined && 109 queryresults map((result parse object) => ( 110 \<list item 111 key={result id} 112 title={ 113 result get('name') !== undefined 114 ? result get('name') 115 result get('title') 116 } 117 titlestyle={styles list text} 118 style={styles list item} 119 /> 120 ))} 121 {queryresults === null || 122 queryresults === undefined || 123 (queryresults !== null && 124 queryresults !== undefined && 125 queryresults length <= 0) ? ( 126 \<papertext>{'no results here!'}\</papertext> 127 ) null} 128 \</view> 129 \<view> 130 \<title>{'query buttons'}\</title> 131 \<paperbutton 132 onpress={() => doquerya()} 133 mode="contained" 134 icon="search web" 135 color={'#208aec'} 136 style={styles list button}> 137 {'query a'} 138 \</paperbutton> 139 \<paperbutton 140 onpress={() => doqueryb()} 141 mode="contained" 142 icon="search web" 143 color={'#208aec'} 144 style={styles list button}> 145 {'query b'} 146 \</paperbutton> 147 \<paperbutton 148 onpress={() => doqueryc()} 149 mode="contained" 150 icon="search web" 151 color={'#208aec'} 152 style={styles list button}> 153 {'query c'} 154 \</paperbutton> 155 \<paperbutton 156 onpress={() => clearqueryresults()} 157 mode="contained" 158 icon="delete" 159 color={'#208aec'} 160 style={styles list button}> 161 {'clear results'} 162 \</paperbutton> 163 \</view> 164 \</scrollview> 165 \</> 166 ); 167 }; 168&#x9; 169 // these define the screen component styles 170 const styles = stylesheet create({ 171 header { 172 alignitems 'center', 173 paddingtop 30, 174 paddingbottom 50, 175 backgroundcolor '#208aec', 176 }, 177 header logo { 178 height 50, 179 width 220, 180 resizemode 'contain', 181 }, 182 header text { 183 margintop 15, 184 color '#f0f0f0', 185 fontsize 16, 186 }, 187 header text bold { 188 color '#fff', 189 fontweight 'bold', 190 }, 191 wrapper { 192 width '90%', 193 alignself 'center', 194 }, 195 list button { 196 margintop 6, 197 marginleft 15, 198 height 40, 199 }, 200 list item { 201 borderbottomwidth 1, 202 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 203 }, 204 list text { 205 fontsize 15, 206 }, 207 }); นี่คือวิธีที่ส่วนประกอบควรมีลักษณะหลังจากการเรนเดอร์และการค้นหาผ่านฟังก์ชันการค้นหาหนึ่งในนั้น บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้ว่าการค้นหาที่สัมพันธ์กันทำงานอย่างไรใน parse และวิธีการดำเนินการใน back4app จากแอป react native ในคู่มือต่อไป คุณจะได้เรียนรู้วิธีการทำงานกับผู้ใช้ใน parse