RTK クエリ例
例の概要
RTK クエリの様々な側面を示す、様々な例を用意しています。
これらの例は、アプリケーションの基盤とすることを意図したものではありません。アプリケーションで実際には必要ないかもしれない、または必要としない非常に具体的な動作を示すために存在します。ほとんどのユーザーにとって、クエリセクションとミューテーションセクションの基本的な例が、ニーズの大部分をカバーします。
CodeSandbox で例を試す際に、特にフォークしてファイルの編集を開始した場合、奇妙な動作が発生する可能性があることに注意してください。ホットリロード、CSB サービスワーカー、mswは、適切なページにアクセスする際に問題が発生することがあります。その場合は、CSB ブラウザーペインで更新してください。
キッチンスインク
React 楽観的更新
以下の例では、いくつかの点に注目してください。サイドバーには2つのPostsリストがあります。上のリストは、ミューテーションが成功し、サーバーと再同期した後にのみ更新されます。サブスクライブされたリストは、楽観的更新によりすぐに更新されます。エラーが発生した場合、この変更はロールバックされます。
この例には、意図的に不安定な動作が含まれています…投稿の名前を編集すると、ランダムなエラーが発生する可能性が高くなります。
GraphQL を使用した React
認証
RTK クエリでは、認証を処理する方法はいくつかあります。これは、ログインミューテーションから JWT を取得し、ストアに設定する非常に基本的な例です。その後、prepareHeadersを使用して、その後のすべてのリクエストに認証ヘッダーを挿入します。
ユーザー状態を設定するためのアクションのディスパッチ
この例では、ユーザーとトークンの情報を保存するためにsetCredentialsアクションをディスパッチします。
extraReducersの使用
この例では、エンドポイントのマッチャーとauthSlice内のextraReducersを使用しています。
React クラスコンポーネント
クラスコンポーネントの使用例については、PostDetailコンポーネントをご覧ください。