useParseQueryフックによるリアルタイムReact Native技術ガイド

useparsequeryフックを使用してリアルタイムreact nativeアプリを構築する はじめに このガイドでは、todo react nativeアプリの例を使用して、 @parse/react native @parse/react native ライブラリの主な機能を探ります。 useparsequery useparsequery フックを使用して、リアルタイムでタスクをクエリし、このアプリに結果をローカルに保存します。さまざまなparseクエリを使用して、プロジェクトで新しいparseライブラリを使用する方法を発見します。 parse react nativeは現在アルファ版です。このライブラリはテスト中ですので、慎重に進めることをお勧めします。あなたのフィードバックは非常に感謝されますので、ライブラリを使用して、質問や最初の印象をcommunity\@back4app comにメールで送信してください。 目標 todoアプリを作成することで、parse react nativeライブラリの主なユースケースを探ります。 前提条件 このチュートリアルを完了するには、 back4appで作成されたアプリ。 次の ライブクエリを有効にする チュートリアルを参照してください。 注意 次の parse react nativeチュートリアル を参照して、@parse/react nativeの使い方を学んでください。 1 初期プロジェクトのセットアップ 始める前に、このチュートリアルの出発点として設定したブートストラップreact nativeプロジェクトを取得する必要があります。それはシンプルな react native init react native init プロジェクトで、すべての依存関係とスタイルが事前に定義されているため、 @parse/react native @parse/react native 機能を探求することに集中できます。あなたは zipをダウンロードする https //github com/templates back4app/react native todo app/archive/main zip か、プロジェクトをクローンすることができます。 次に、プロジェクトの依存関係をインストールします iosの場合、ポッドをインストールします 前のガイドでは、 始める https //www back4app com/docs/react native/parse react native sdk/getting started , initializeparse initializeparse を使用してback4appサーバーとの接続を有効にする方法を学びました。 app id app id と javascriptkey javascriptkey を、 src/index js src/index js にあるエントリーポイントコンポーネントで設定します。 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); プロジェクトを実行してください その後、スタータープロジェクトが正常にセットアップされ、アプリは以下のようになります プロジェクトのディレクトリ構造 初期プロジェクトには主に4つのページがあります 学習ページ 学習カテゴリに属するタスクを表示します ショッピングページ ショッピングカテゴリに属するタスクを表示します 仕事ページ 仕事カテゴリに属するタスクを表示します addtodoページ 新しいタスクを作成するための基本フォーム 2 新しいタスクの作成 todoアプリの一般的な機能は、ユーザーが新しいタスクを作成できるようにすることです。そのために、タスク作成機能はparse javascript sdkを使用して新しいparseオブジェクトを作成し、back4appに保存します。スタートプロジェクトの addtodo addtodo ページには、タスクの説明を挿入するための入力フィールド、タスクのカテゴリを選択するためのチェックボックス、送信ボタンを含む基本的なフォームがあります。このチュートリアルでは、次の属性を持つタスク用の parse object parse object を作成します。 parse javascript sdkの データの保存 ガイドを参照して、parseオブジェクトの作成に関する詳細情報を確認してください。 1 { 2 description 'simple string of task descrition', 3 author 'person creating the task', 4 completed false, // or true 5 createdat date, // automatically created by back4app 6 } 次に、ユーザーが送信ボタンをクリックしたときにタスクを作成するメソッドを実装します。 pages/addtodo/index js pages/addtodo/index js コンポーネントで、 handlesubmit handlesubmit メソッドを実装しましょう。 1 async function handlesubmit() { 2 try { 3 const task = new parse object extend('task'); 4 // create a new instance of that class 5 const task = new task(); 6 task set('description', description); 7 task set('category', category); 8 task set('author', 'anonymous'); 9 task set('completed', false); 10 await task save(); 11&#x9; 12 alert alert('new task created '); 13 } catch (error) { 14 console log('error while creating task ', error); 15 } 16 } その後、いくつかのタスクを作成できるようになります。好きなだけタスクを作成してください。次のステップでは、それらをクエリします。 3 タスクのクエリとフィルタリング タスクをいくつか作成したので、parse react native libを使用する時が来ました。いくつかのクエリを書いて、 useparsequery useparsequery フックに渡します。クエリは、学習カテゴリの未完了のタスクをすべてリストします。これはフックの最初のユースケースであり、 enablelivequery\ false enablelivequery\ false を設定することで、一度だけフェッチクエリを構築します。これは、学習ページコンポーネントがレンダリングされるときに実行されます。 enablelivequery enablelivequery はデフォルトで true true であり、 false false に変更すると、リアルタイムの変更サブスクリプションが無効になります。 「 pages/learning/index js pages/learning/index js 」コンポーネントで、私たちの parse query parse query を書きましょう 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'learning'); クエリを引数として useparsequery useparsequery フックに渡します 上記のコードは、parseフックの基本的な使用法を示しています。useparsequeryフックは、任意のparse queryと一緒に使用できる新しいリソースです。 すべてのparse query機能 https //docs parseplatform org/js/guide/#queries を使用してデータオブジェクトを取得し、このフックはこの体験をさらに良くします。結果を取得したら、それらをtasklistコンポーネントに渡して、アプリにタスクを表示します 1 //learning/index js 2 import react, {useeffect} from 'react'; 3 import {activityindicator} from 'react native'; 4 import tasklist from ' / /components/tasklist'; 5 import parse from 'parse/react native js'; 6 import {useparsequery} from '@parse/react native'; 7&#x9; 8 const learning = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'learning'); 13&#x9; 14 const {results, isloading} = useparsequery(query, {enablelivequery false}); 15&#x9; 16 if (isloading) { 17 return \<activityindicator/>; 18 } 19&#x9; 20 return \<tasklist todos={results} />; 21 }; 22&#x9; 23 export default learning; あなたのアプリは、次のようにタスクのリストを正常に表示する必要があります 4 リアルタイムの変更 あなたが探求する第二の使用法は、リアルタイムの更新です。 useparsequery useparsequery フックはparse live queryをカプセル化し、リアルタイムの変更に対する即時サポートを提供します。フックにクエリを渡すと、back4app livequeryサーバーと通信するためのwebsocket接続が作成され、自動的に同期されます。この機能をショッピングカテゴリのタスクに追加します。 live queryとback4appのサブドメインは、back4app dashboard appで有効にする必要があることに注意してください。それを行ったら、 initializeparse initializeparse にサブドメインのurlを追加すると、parse react nativeフックからの結果は常に更新されたデータを持つことになります。サブドメインを構成しない場合、 useparsequery useparsequery フックはリアルタイムでデータを取得できなくなります。 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); 次に、 pages/shopping/index js pages/shopping/index js コンポーネントで、 parse query parse query を書きましょう 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'shopping'); 次に、クエリを引数として useparsequery useparsequery フックに渡します リアルタイムの変更はデフォルトで有効になっているため、追加のパラメータは必要ありません。結果を取得したら、それを tasklist tasklist コンポーネントに渡して、アプリにタスクを表示します 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import tasklist from ' / /components/tasklist'; 4 import parse from 'parse/react native js'; 5 import {useparsequery} from '@parse/react native'; 6&#x9; 7 const shopping = () => { 8 const task = new parse object extend('task'); 9 const query = new parse query(task); 10 query equalto('completed', false); 11 query equalto('category', 'shopping'); 12&#x9; 13 const {results, isloading, issyncing} = useparsequery(query); 14&#x9; 15 if (isloading || issyncing) { 16 return \<activityindicator />; 17 } 18 return \<tasklist todos={results || \[]} />; 19 }; 20&#x9; 21 export default shopping; 5 オフラインサポート 「 @parse/react native @parse/react native 」の3つ目のユースケースは、クエリ結果のオフラインキャッシングを使用することです。これは、ユーザーがネットワークの遅延やインターネット接続の問題を抱えている場合に、react nativeアプリが機能する必要がある場合に便利です。オフラインサポートは、react nativeアプリの応答性とユーザー体験を向上させます。素晴らしいニュースは、追加の手順は必要ないということです！オフラインファーストのアプローチとリアルタイムのサブスクリプションはデフォルトで有効になっています。 要するに、単に「 useparsequery useparsequery 」フックを使用することで、アプリがオフラインサポートのためにクエリ結果をキャッシュし、ユーザーがオンラインに戻ったときにライブクエリのサブスクリプションと組み合わせることが保証されます。 6 クエリの制限とソート 作業カテゴリのタスクリストが多すぎて、1人の人が処理できない場合、1日のサブセットのみを表示したいとします。また、作成日で並べ替えます。 「 pages/shopping/index js pages/shopping/index js 」コンポーネントで、私たちの「 parse query parse query 」を書きましょう 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'work'); 5 query ascending('createdat'); // order by creation date 6 query limit(5); // limit to 5 tasks 次に、クエリを引数として useparsequery useparsequery フックに渡し、 tasklist tasklist コンポーネントに渡して、アプリにタスクを表示します 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import parse from 'parse/react native js'; 4 import {useparsequery} from '@parse/react native'; 5 import tasklist from ' / /components/tasklist'; 6 // import { container } from ' /styles'; 7&#x9; 8 const work = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'work'); 13 query ascending('createdat'); 14 query limit(5); 15&#x9; 16 const {results, isloading} = useparsequery(query, { 17 enablelivequery false, 18 }); 19&#x9; 20 if (isloading) { 21 return \<activityindicator />; 22 } 23 return \<tasklist todos={results} />; 24 }; 25&#x9; 26 export default work; 7 useparsequeryの引数を指定する あなたは @parse/react native @parse/react native を使用して、前のステップでlive queryの機能を持つback4appからデータを取得しました。したがって、エクスポートされたインターフェースの説明が必要です。 useparsequery useparsequery フックは、 parse query parse query と useparsequeryoptions useparsequeryoptions オブジェクトを引数として受け取ります。デフォルトのオプション設定オブジェクトは次のとおりです 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery リアルタイムライブクエリ機能はデフォルトで有効です enablelocaldatastore データ結果のローカルキャッシングを有効にします。デフォルトは true true ですが、設定を false false にすることで無効にできます。 initialload すでにメモリにデータがロードされている場合は、ユーザーにデータのプレビューを表示するためにそれらを設定できます。 完了しました！ この時点で、あなたは @parse/react native @parse/react native ライブラリを使用して、back4app上でreact nativeのtodoアプリを作成する方法を学びました。