リアルタイム更新を実現するReactフックの実装ガイド

9 分

parseを使用したリアルタイム更新のためのreactフックの始め方はじめに parse react native libへようこそ！このガイドでは、parse react libとは何か、どのようにインストールしてreact nativeプロジェクトで使用を開始するかを学びます。動機 parse/back4appをjavascriptベースのプロジェクトに統合する最も簡単な方法は、 parse javascript sdk https //www npmjs com/package/parse を通じてです。このライブラリは、nodejs、reactjs、vuejs、angularjs、react nativeなどの複数のjavascript環境で動作し、back4appの機能にアクセスできます。 parse react nativeの目標は、react native開発者にとってこの体験をさらに良くすることです。最小限の設定、コードの再利用、androidおよびios向けのネイティブ最適化を提供する軽量で使いやすいレイヤーを提供します。このパッケージを使用することで、資格情報の設定、httpリクエスト、リアルタイム同期、オフラインファーストのインタラクションなどの項目が自動的にreact nativeアプリに利用可能になります。このライブラリは完全にtypescriptで書かれており、 parse javascript sdk https //www npmjs com/package/parse の上に構築されており、現在はアルファ版です。この初期ガイドでは、@parse/react nativeライブラリをreact nativeプロジェクトにインストールして設定します。 parse react nativeは現在アルファ版です。このライブラリはテスト中ですので、慎重に進めることをお勧めします。皆様のフィードバックを非常に感謝していますので、ライブラリを自由に使用し、質問や最初の印象をcommunity\@back4app comまでメールでお送りください。前提条件このチュートリアルを完了するには、次のものが必要です： back4appでのアプリ作成：「ライブクエリを有効にする」チュートリアルに従ってください。 npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm またはyarnがインストールされていること： npx https //www npmjs com/package/npx パッケージランナーがインストールされていること。 1 インストール react nativeアプリケーションがない場合は、次のコマンドラインを使用して、 npx npx パッケージランナーで新しいプロジェクトを作成してください。次に、react nativeアプリケーションに @parse/react native @parse/react native とそのピア依存関係である parse parse をインストールします。 2 アプリケーション設定アプリがback4appサーバーに安全に接続できるように、parse javascript sdkにアプリの資格情報を提供する必要があります。 1 //in your app js 2 import { initializeparse } from '@parse/react native'; 3	 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); あなたのアプリid アプリid と javascriptキー javascriptキーの資格情報は、あなたのアプリのダッシュボードダッシュボードを開いて back4appウェブサイト https //www back4app com/ をクリックすることで見つけることができますアプリ設定アプリ設定 > コア設定コア設定 , の下にサーバー設定サーバー設定あなたのサブドメインはアプリ設定アプリ設定 > コア設定コア設定 > サーバーurlとライブクエリサーバーurlとライブクエリ詳細については、このガイドを確認してくださいこちら https //www back4app com/docs/platform/parse live query 3 最初のクエリを作成する次に、最初のクエリを構築し、アプリに表示します。 @parse/react native @parse/react native ライブラリは useparsequery useparsequery フックをエクスポートしているので、オフラインサポートやリアルタイムの変更などの機能を実装する方法を探す時間を無駄にすることはありません。それは parse query parse query を取り、クエリによって返されたデータにアクセスするために使用できるいくつかのプロパティを持つオブジェクトを返します 1 // in your app js 2	 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6	 7 // remember to call initializeparse with your credentials before using useparsequery 8 initializeparse( 9 'https //your subdomain b4a io/', 10 'application id', 11 'javascript key' 12 ); 13	 14 export default function app() { 15 const parsequery = new parse query('todo'); 16 const { 17 islive, 18 isloading, 19 issyncing, 20 results, 21 count, 22 error, 23 reload 24 } = useparsequery(parsequery); 25	 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29	 30 return ( 31 \<flatlist 32 data={results} 33 renderitem={({item}) => ( 34 \<view 35 style={ { 36 height 70, 37 flex 1, 38 alignitems 'center', 39 justifycontent 'center', 40 } }> 41 \<text>task {item get('title')}\</text> 42 \</view> 43 )} 44 />); 45 } フックにクエリを渡すと、最初にキャッシュされた結果を探します。次に、back4app livequery サーバーと通信するための websocket 接続を作成し、自動的に同期します。言い換えれば、オフラインファーストのアプローチとリアルタイムの変更がデフォルトで有効になっています。クエリの状態を確認するには、フックによって返された props props を使用します islive islive もし true true , クエリがリアルタイム更新にサブスクライブしていることを示します。 isloading isloading もし true true , クエリが結果を取得しています。 issyncing issyncing もし true true , クエリがback4appサーバーから更新された結果を取得しています。 results results これはクエリから返されたデータです。 count count クエリに一致したオブジェクトの数を示します。 error error クエリに何か問題が発生した場合、エラーが返されます。 reload reload クエリ結果を再読み込みします。「 useparsequery useparsequery 」は任意の parse query parse query を受け入れ、完全なドキュメント https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs を例とともに見ることができます。 4 アプリフックをテストする今、あなたはreact nativeアプリを実行し、結果を見ることができるはずです。アプリにアイテムを表示するには、back4appプロジェクトにデータを追加する必要があることを忘れないでください。完了しました！この時点で、プロジェクトに @parse/react native @parse/react native をインストールし、back4appとの接続を設定し、最初のクエリを書きました。次のガイドでは、このライブラリの主な機能の1つである使用方法を見ていきます。さらに「リアルタイムの変更」 https //reactnavigation org/docs/1 x/hello react navigation に進んで、さらにいくつかのクエリを書き始めましょう。