[B! ReactQuery] oinumeのブックマーク

Next.js, GraphQL-CodeGen, & React Query: JWT Authentication - CodevoWeb

oinume 2022/08/21

リンク

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

oinume 2021/12/06

react-queryがある前と後の比較がわかりやすい

ReactQuery

リンク

Effective React Query Keys

Effective React Query Keys13.06.2021 — ReactJs, React Query, JavaScript, TypeScript — 4 min read Query Keys are a very important core concept in React Query. They are necessary so that the library can internally cache your data correctly and refetch automatically when a dependency to your query changes. Lastly, it will allow you to interact with the Query Cache manually when needed, for example, w

oinume 2021/12/05

ReactQuery

リンク

REST API なら React Query がファーストチョイス

今までは State 管理といえば、Redux でしたが、ここ最近いろんな State 管理ライブラリが出てきています。その中でも私が一番使いやすいなと思っているのが、React Queryです。実際、今携わっているプロジェクトでは Redux を使っているのですが、action,reducer,api 周りなどやっぱりコード量が多くなってしまうことがつらみになっています。 React Queryの特徴としては取得したデータをキャッシュに持たせるキャッシュされたデータをどのコンポーネントからでも簡単に利用可能 Fetch の状態を返してくれる(isLoading, error など) があります。個人的には以前に Apollo を使っていたので、isLoading などの Fetch の状態があるのはとても好印象でした。そこで、実際に携わっている Redux のプロダクトに Rea