GraphQL Code Generator + React Queryの紹介 | HiCustomer Lab - HiCustomer Developer's Blog
こんにちは、エンジニアの尾島(@daikiojm)です。 最近は HiCustomer のオフィスがある五反田周辺の飲食店の入れ替わりが激しく、開店/閉店に一喜一憂しております。 五反田、目黒周辺でおすすめのお店があったら教えてください。 React + Vite で新規プロダクトを開発している話で紹介した新プロダクトの開発では、GraphQL を採用しています。 今回はこの記事では紹介しきれなかった GraphQL Code Generator と React Query の活用について紹介します。 この記事で紹介する内容は次のとおりです。 GraphQL Code Generator + React Query の組み合わせを採用した理由 GraphQL Code Generator を使った型/React Query のクライントコード生成 Custom Hooks の実装例 Gra
React Query を使っていて気になった SWR とのいくつかの違い | DevelopersIO
MAD 事業部の高橋ゆうきです。 REST API である場合、プライベートでは SWR を使うことが多いのですが、昨年から案件では React Query を使っているのでいくつかの違いを感じることがありました。ここでは React Query のドキュメントにある表 から気になった違いをいくつかピックアップしてみます。 比較 Query Key Change Detection React Query - Deep Compare (Stable Serialization) SWR - Shallow Compare Deep Compare (Stable Serialization) 2021 年 2 月 20 日現在上記のように記載されていますが、SWR も 1.1.0 以降は ドキュメントにも記載されているように、stable serialization となっています。 Q
React Queryを用いた開発事例の紹介 | Fintan
はじめに 本ドキュメントは、 React Queryを用いた開発事例の紹介です。 React Queryは、Reactで非同期データをフェッチ、キャッシング、更新するためのフックを提供するライブラリです。 React Queryを用いることで、効率的なバックエンド連携が実現できます。 本ドキュメントでは、このライブラリをどのように開発に適用したかを、ライブラリの機能説明を交えながら紹介します。 また、React Queryの特徴を活かしたシステム改善案についても紹介します。 想定読者 バックエンドと連携するシングルページアプリケーションをReactで開発するエンジニア。 参考文献・URL https://github.com/tannerlinsley/react-query 背景 昨今、フロントエンドをシングルページアプリケーション（以下、SPA）として構築するケースが増えてきました。
ReactQueryでキャッシュを最大限利用する
こんにちは、柴田（@shibe97）です。 久々に普通の技術記事です。 microCMSでは状態管理ライブラリとしてReact hooksベースのReactQueryを利用しています。 ReactQueryといえば、主にデータの取得時の状態管理の例が紹介されていることが多いです。 本家の例： function Example() { const { isLoading, error, data } = useQuery('repoData', () => fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res => res.json() ) ) if (isLoading) return 'Loading...' if (error) return 'An error has occurred: '
react-query：invalidate と reset の挙動の違い - OITA: Oika's Information Technological Activities
お勉強メモ。嘘ついたらごめんなさい。 React Query で、cacheTime, staleTime と、invalidateQueries, resetQueries あたりの使い分けの話。 お試し用コードは最後に載せてます。 cacheTime, staleTime について QueryClient には以下の設定がある。 cacheTime : 取得済みのデータ（以下「キャッシュ」と呼ぶ）を保持する時間（デフォルト5分） staleTime : キャッシュが古くなったと見なして再取得する時間（デフォルト0） 以下のようなコンポーネントの場合、 const SomeComponent = () => { const { data, isLoading } = useQuery("foo", fetchData); if (isLoading) return <div>Loadin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
