Reactクエリを使用する方法と理由
Reactクエリを使用する方法と理由 react-queryのカスタムフックを使用してデータフェッチを簡素化します。 Reactを使用してアプリケーションを構築するときに直面する課題の1つは、サーバーからデータをフェッチするためのコードパターンを決定することです。Reactでデータフェッチを処理する最も一般的な方法は、グローバル状態をメカニズムとして使用して、フェッチ操作の現在のステータスを判別することです。 Star WarsAPIからデータをフェッチする例を次に示します。 import React, {useState, useEffect} from 'react'; import axios from 'axios'; // regular fetch with axios function App() { const [isLoading, setLoading] = useSt
REST API なら React Query がファーストチョイス
今までは State 管理といえば、Redux でしたが、ここ最近いろんな State 管理ライブラリが出てきています。その中でも私が一番使いやすいなと思っているのが、React Queryです。 実際、今携わっているプロジェクトでは Redux を使っているのですが、action,reducer,api 周りなどやっぱりコード量が多くなってしまうことがつらみになっています。 React Queryの特徴としては 取得したデータをキャッシュに持たせる キャッシュされたデータをどのコンポーネントからでも簡単に利用可能 Fetch の状態を返してくれる(isLoading, error など) があります。個人的には以前に Apollo を使っていたので、isLoading などの Fetch の状態があるのはとても好印象でした。 そこで、実際に携わっている Redux のプロダクトに Rea
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using React Query with Next.js App Router and Supabase Cache Helpers
Next.js, GraphQL-CodeGen, & React Query: JWT Authentication - CodevoWeb
Effective React Query Keys
Getting Started with React Query and TypeScript
[TypeScript] How to type guard to avoid "possibly undefined" · TanStack/query · Discussion #748
