Relational Queries

parseを使用したreact nativeにおけるリレーショナルクエリ はじめに このガイドでは、parseでリレーショナルクエリを実行し、これらのクエリを使用してreact nativeコンポーネントを実装します。back4appとreact nativeを使用して、現実的なデータを設定し、クエリを実行する方法を学びます。 前提条件 このチュートリアルを完了するには、次のものが必要です： 作成され、 back4app に接続されたreact nativeアプリ。 このガイドで提供される画面レイアウトをテスト/使用したい場合は、 react native paper react native paper を設定する必要があります。 ライブラリ 目標 react nativeアプリからback4appに保存されたリレーショナルデータをクエリします。 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コンソールでは、javascriptコードを直接実行し、js sdkコマンドを使用してアプリケーションデータベースの内容をクエリおよび更新することができます。以下のコードをjsコンソールから実行し、back4appにデータを挿入してください。ダッシュボードのjsコンソールは次のようになります クラスを作成し、以下の例の内容を追加してください 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 データをクエリする すべてのクラスにデータを追加したので、リレーショナルクエリを実行できます。まず、次のようにフィルタリングを始めましょう。 本 本 の結果を出版社でフィルタリングし、 出版社 出版社 「アカシア出版」（または「出版社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 オブジェクトを含み、出版日が2010年1月1日以降であるものを、 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 オブジェクトを作成し、少なくとも1つの 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 }); コンポーネントがレンダリングされ、クエリ関数の1つでクエリされた後の見た目は次のようになります 結論 このガイドの最後に、parseでのリレーショナルクエリの動作と、react nativeアプリからback4appでそれを実行する方法を学びました。次のガイドでは、parseでユーザーと作業する方法を学びます。