ReactJS
Real Time
React開発者向けParseリアルタイムフック活用ガイド
8 分
parseのリアルタイム更新のためのreactフックの使い方 はじめに parse/back4appをjavascriptベースのプロジェクトに統合する最も簡単な方法は、 parse javascript sdk を通じてです。このライブラリは、nodejs、reactjs、vuejs、angularjs、react nativeなどの複数のjavascript環境で動作し、back4appの機能にアクセスできます。 parse reactのフックの目的は、reactjs開発者にとってこの体験をさらに良くすることであり、最小限の設定とコードの再利用性を提供する軽量で使いやすいレイヤーを提供します。 このパッケージを使用することで、資格情報の設定、httpリクエスト、リアルタイム同期、オフラインファーストのインタラクションなどの項目が自動的にreactアプリに利用可能になります。このライブラリは完全にtypescriptで書かれており、 parse javascript sdk の上に構築されており、現在はアルファ版です。 この初期ガイドでは、 @parse/react @parse/react ライブラリをあなたのreactプロジェクトにインストールして設定します。 @parse/react @parse/react は現在アルファ版です。このライブラリはテスト中ですので、慎重に進めることをお勧めします。あなたのフィードバックは非常に感謝されますので、ライブラリを自由に使用し、質問や最初の印象をcommunity\@back4app comにメールで送ってください。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appで作成された アプリ ; ライブクエリを有効にする のチュートリアルをフォローしてください。 npm またはyarnがインストールされていること; npx パッケージランナーがインストールされていること。 1 インストール 次のコマンドを使用して、reactアプリケーションに @parse/react @parse/react とそのピア依存関係 parse parse をインストールします 2 アプリケーションのセットアップ アプリがback4appサーバーに安全に接続できるようにするために、parse javascript sdkにアプリの資格情報を提供する必要があります。これは、あなたの app js app js (または app tsx app tsx ) ファイルに記述します。ライブクエリを実行するためにアプリを有効にしたときに作成したback4appのサブドメインを使用することを忘れないでください。 app js or app tsx 1 import { initializeparse } from '@parse/react'; 2	 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); 次のことに注意してください。 initializeparse initializeparse メソッドは通常の parse initialize parse initialize を置き換えます。あなたの app id app id と javascript key javascript key の資格情報は、あなたのアプリの dashboard dashboard を開いて、 back4app website https //www back4app com/ をクリックすることで見つけることができます。 core settings core settings 、 server settings server settings の下にあります。 3 最初のクエリを作成する 次に、最初のクエリを作成し、アプリに表示します。 @parse/react @parse/react ライブラリは、 useparsequery useparsequery フックをエクスポートするので、オフラインサポートやリアルタイムの変更などの機能を実装する方法を調べる時間を無駄にする必要はありません。 それは parse query parse query を受け取り、クエリによって返されたデータにアクセスするために使用できるいくつかのプロパティを持つオブジェクトを返します。 app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4	 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10	 11 export default function app() { 12 //make sure your class is enabled for real time notifications (live query) checking the menu > app settings > server settings > server url and live query 13 const parsequery = new parse query('your class name here'); 14 const { 15 islive, 16 isloading, 17 issyncing, 18 results, 19 count, 20 error, 21 reload 22 } = useparsequery(parsequery); 23	 24 return ( 25 \<div> 26 {isloading && ( 27 \<p>loading \</p> 28 )} 29 {islive && ( 30 \<p>live!\</p> 31 )} 32 {issyncing && ( 33 \<p>syncing \</p> 34 )} 35 {results && ( 36 \<ul> 37 {results map(result => ( 38 \<li key={result id}> 39 {result get('class column name here')} 40 \</li> 41 ))} 42 \</ul> 43 )} 44 \<p>{count}\</p> 45 {error && ( 46 \<p>{error message}\</p> 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } フックにクエリを渡すと、最初にキャッシュされた結果を探します。次に、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 クエリ結果を再読み込みします。 詳細な設定方法や使用方法については、 完全なドキュメント を参照してください。 @parse/react @parse/react ライブラリです。 4 アプリフックのテスト これで、reactアプリを実行して結果を見ることができるはずです。 アプリにアイテムを表示するには、back4appプロジェクトにデータを追加する必要があることを忘れないでください。 完了です！ この時点で、 @parse/react @parse/react をプロジェクトにインストールし、back4appとの接続を設定し、最初のクエリを書きました。次のガイドでは、このライブラリの主な機能の1つであるサンプルライブチャットアプリを作成する方法を紹介します。