タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
どうも、@yuyaaar です。 最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。 自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。 今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。 まずは最初に Next.js ボイラープレートアプリを作りましょう。 作成できたら、まずは TypeScr
mutexの桝田です！ Reactのデータフェッチに、Vercel社が提供する「SWR」やTanStackコミュニティが提供する「React Query（TanStack Query）」が使われることが多くなってきています。 これらのライブラリは単なるフェッチだけでなく、キャッシュやデータの更新を担ってくれます。また、Reactが志向する「宣言的」な記述を体現できることも大きなメリットです。 本稿では、（我々が採用する）React Queryにフォーカスし、React Queryを使って実現している状態管理について説明します。SWRを普段お使いの方に関してもかなり共通する部分が多いのではないかと思います。 1. 対象読者 Reactのデータフェッチライブラリの使用を検討している方 普段SWRやReact Queryを使用している方 普段Reactを使用するすべての方
Next.js + Prisma + NextAuth.js + React Queryを試した - $shibayu36->blog;
2分コーディングの一環でNext.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代をやった。とにかく簡単に認証 + DBアクセスがあるアプリケーションを作ってvercelにデプロイできるサンプルが出来て非常に良かった。趣味プロダクトをちょっと作ってみるのに良さそう。 shibayu36/next-prisma-auth-tutorialに試した例を置いているので参考にどうぞ。 やれたこと Googleのアカウントを使ってサインインし、TODOを追加できるアプリケーション herokuのPostgreSQL dbをデータソースとして動くアプリケーションをvercelにデプロイ 作業メモ prisma、migrationのツールも入ってるし便利すぎる。 migrationしたけどpsqlでdocker内にアクセスできなか
GitHub - TanStack/query: 🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
（※ この記事は API およびそこから導かれる設計のしやすさ観点での比較をしています。実際にキャッシュが有効に効いたか、などについてはまた別の機会に ）
React Query のレンダリング最適化を目指した話 - Techtouch Developers Blog
エンジニアの macchii です。この記事はテックタッチアドベントカレンダー 14 日目の記事です。 テックタッチでは React を利用して WEB フロントエンドを開発しています。あわせて、リモートデータの取得、更新、キャッシングには React Query を導入しています。本記事では、簡単なタスク管理アプリを題材に、「React Query の再レンダリングを最適化するテクニック」紹介します。 ja.reactjs.org react-query.tanstack.com TL;DR はじめに React Query は取得データを厳密に比較（deep compare）する 参照していないプロパティの変更でも再レンダリングが発生する notifyOnChangeProps オプション select オプション まとめ TL;DR React Query は取得データを厳密に比較（
JSConf jp 2021 kaonavi front-end development in the monolithic service
React Queryを使いこなすために試したこと
はじめに タイトルで大きくふろしきを広げてしまいましたが、結論から言うといろいろと試してみた結果、現時点ではまだ着地点を見出せていません。現時点での自分なりの最適解として、useQuery、usePrefetch、useMutationと楽観的更新の実装例についていくつか紹介させていただきます。 モチベーション 現在、Redux Sagaをふんだんに利用したアプリケーションのメンテナンス・機能拡張に携わっているのですが、ページ数やAPIエンドポイントが多数あることからコード量が多く構造も複雑になっており、メンテナンスコストの増大が懸念されるようになってきました。そこで今後のメンテナンス性の向上、また新規に参画するメンバーにも入りやすいようRedux SagaをはがしReact Queryへ少しずつ移行してくための検証を兼ねてReact Queryの使い方を探っています。 React Que
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はデータフェッチライブラリではない。非同期の状態管理ライブラリだ。 - Qiita
はじめに この記事はDominikさんが執筆された「Thinking in React Query」を参考にReact Queryの考え方をまとめたものになります。DominikさんはTanStack Query（以下ではReact Queryと呼ぶ）のコアメンテナーであり、彼のブログからReact Queryについての知見を吸収することができます。 目次 React Queryはデータフェッチライブラリではない ではReact Queryとは何か？ Client StateとServer Stateの違い React Queryは非同期の状態（Server State）管理ライブラリである キャッシュを有効活用する React Queryのキャッシュについて staleTimeでキャッシュをコントロールする queryKeyを適切に設定する まとめ 🎆 React Queryはデータフ
今までは State 管理といえば、Redux でしたが、ここ最近いろんな State 管理ライブラリが出てきています。その中でも私が一番使いやすいなと思っているのが、React Queryです。 実際、今携わっているプロジェクトでは Redux を使っているのですが、action,reducer,api 周りなどやっぱりコード量が多くなってしまうことがつらみになっています。 React Queryの特徴としては 取得したデータをキャッシュに持たせる キャッシュされたデータをどのコンポーネントからでも簡単に利用可能 Fetch の状態を返してくれる(isLoading, error など) があります。個人的には以前に Apollo を使っていたので、isLoading などの Fetch の状態があるのはとても好印象でした。 そこで、実際に携わっている Redux のプロダクトに Rea
TanStack Query (react query) でパフォーマンス問題に遭遇したので解決してみた - Techtouch Developers Blog
テックタッチアドベントカレンダー 12 日目を担当する、フロントエンドエンジニアの taka です。 今回は TanStack Query を利用する上でパフォーマンスの問題に遭遇してしまったので、その内容について共有したいと思います。 tl;dr TanStack Query (react query) とは 遭遇したパフォーマンス問題 react query で再描画を抑制するためのポイント object rest destructuring を利用してはいけない プロパティ参照は描画中に行う selector を使って必要なデータのみを参照する おわりに tl;dr useQueryの返り値を非同期処理内で参照してしまっていたのが原因だった react query でパフォーマンス問題に陥らないために、useQuery を利用する際は以下のポイントを抑えておきましょう 返り値のobj
Thinking in React Query07.06.2023 — ReactJs, React Query, TypeScript, JavaScript — 1 min read #1: Practical React Query#2: React Query Data Transformations#3: React Query Render Optimizations#4: Status Checks in React Query#5: Testing React Query#6: React Query and TypeScript#7: Using WebSockets with React Query#8: Effective React Query Keys#8a: Leveraging the Query Function Context#9: Placeholder
はじめに NTTテクノクロスの上原です。 この記事はNTTテクノクロスアドベントカレンダー2021 24日目の記事です。昨日は@watanyさんの記事」、明日は@j-yamaさんの記事になります。 自分は過去のAdvent CalenderではReact関連では(React Meets Grails、Grails React Scaffold、Redux Saga、Gatsby、React Spring、AirTableのAPPSをReactで作ろう)などを書いて来ましたが、結局1年ぶりに記事を書いています。もっともっとアウトプットしないといけないですね。 それはともかく、今回は「状態管理ライブラリとしてのReact Query」を紹介し、「useState感覚でクライアント状態管理する手法」 を提案してみたいと思います。何はともあれその手法とやらを先にみたい方はこちらのuseQState
const { isLoading, error, data } = useQuery('repoData', () => fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res => res.json() ) ) 一見、ほとんど一緒じゃん、となるが、SWRは「キーをfetcheの実行するためのパラメータ」になっている。 一方、react-queryは「キーと実行APIは独立している」。これはイメージとしてReduxのActionなどのconstantのような印象を受ける APIの違い Core API RQ : https://react-query.tanstack.com/docs/api SWR https://swr.vercel.app/docs/options#parameters これ
Breaking React Query's API on purpose16.04.2023 — ReactJs, React Query, JavaScript, TypeScript — 7 min read Designing APIs for library interfaces is a pretty hard thing to do. You want your APIs to be flexible and cater to all needs. At the same time, you'd want them to be minimal and intuitive to avoid a steep learning curve. Those things are two sides of the same coin, and you'd likely want to b
Reactを利用してサーバからデータを取得する際に利用する関数やライブラリは何かと聞かれた場合にすぐに思いつくのはfetch関数やaxiosライブラリではないでしょうか。 React QueryはReactのData Fetchingライブラリでサーバからデータを取得する際に利用することができます。サーバからデータを取得するだけならfetch関数とaxiosを利用することで実現できるのでReact Queryを理解するためにはfetch関数とaxiosが持っていない機能が何かを理解する必要があります。 React Queryの機能について動作確認を行う前にReact Queryをドキュメントを確認しておきましょう。説明では”React Query makes fetching, caching, synchronizing and updating server state in Reac
Have you ever thought about why a specific piece of technology gets popular? Usually there's never a single reason, but I do have a theory that I think is one of the primary drivers. I call it The 5 O'Clock Rule. With The 5 O'Clock Rule, the level of abstraction for solving a problem will bubble up until it allows the average developer to stop thinking about the problem. Unfortunately, it doesn't
自分内 SWR vs React Query のメモ
SWR と React Query どっち使ってるの 2021年12月の現状として、ついこの間まではSWRを使っていたが、最近React Queryに乗り換えた。 両方触ってみた感じ、たしかにReact Queryのほうが多機能（そのぶんバンドルサイズもデカいけど） ただ解決したい課題と解決手法は同じなので、APIはほとんど一緒。 腐敗防止層になる中継ファイルを作り、適切にAPIやOptionsを中継しておけば、乗り換えはそのファイル内の書き換えのみで済む。 機能比較ページ： https://react-query.tanstack.com/comparison React Queryの優位性（2021/12現在） キャッシュを参照しないオプション 乗り換えに至った直接的な理由。 あるリソース詳細を取得済みだったとしても、そのリソースの編集フォームではそのキャッシュを使いたくない。 なぜな
はじめに この記事はDominikさんが執筆された「Thinking in React Query」を参考にReact Queryの考え方をまとめたものになります。DominikさんはTanStack Query（以下ではReact Queryと呼ぶ）のコアメンテナーであり、彼のブログからReact Queryについての知見を吸収することができます。 目次 React Queryはデータフェッチライブラリではない ではReact Queryとは何か？ Client StateとServer Stateの違い React Queryは非同期の状態（Server State）管理ライブラリである キャッシュを有効活用する React Queryのキャッシュについて staleTimeでキャッシュをコントロールする queryKeyを適切に設定する まとめ 🎆 React Queryはデータフ
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
はじめに こんにちは。株式会社HRBrainでインターンをしている安井です。 この記事では今業務で採用しているReact Queryの特性を生かした設計を考察してまとめていきます。 本記事はHRBrain Advent Calendar 2022の24日目の記事です。 前提 本記事で使用するライブラリ等のversion React: v18.2.0 TypeScript: v4.9.3 React Query（TanStack Query）: v4.19.1 axios: v1.2.1 vite: v4.0.0 React Queryはv4から名前が変更されTanStack Queryとなりましたが、記事の中ではReact Queryと呼ぶこととします。 使用するOpenAPIの定義 https://jsonplaceholder.typicode.com/posts また、本記事で使用す
React-Queryとは？使い方と重要性を分かりやすく解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React-Queryとは？ ReduxやuseEffectとの違いは？ React-Queryを使用する理由 React-Queryを使用したデータ取得 QueryClientProvider クエリ クエリキー クエリを実行する関数 バックグラウドでのデータ取得をユーザーに通知 Mutations クエリの無効化と停止 最後に React-Queryを開始する前の前提条件ございます。 ・ React フックと関数コンポーネントに関する中級レベルのスキルが不可欠です。 ・ JavaScriptでのREST APIとデータ取得の基本的な理解。 ・マシンにNode.jsがインストールされていることを確認してください。 React-Queryとは？ React-Queryは、ReactおよびNext.jsコードベース用に構築されたライブラリであり、ネットワークリクエストを作成する際に従うべきす
こんにちは。intdash グループ フロントエンドエンジニアの佐藤です。 Next.js を使った管理画面を作成するプロジェクトを担当する機会がありました。 管理画面は「頻繁にデータが更新されることがない」、「同時アクセスはあまり起きない」という前提の元に作成することが多いと考えています。 なのでサーバー、表示ともにパフォーマンス的に無駄なリクエストを投げたくはありません。 それを解決するため、プロジェクトにReact Query を導入しました。 今回はその導入事例をご紹介したいと思います。 SSRを使用してデータを表示する データを更新する まとめ SSRを使用してデータを表示する SSR については下記のリンクが参考になります。 nextjs.org まずサーバーサイドはgetServerSideProps でデータを取得します。 // index.tsx const USER_K
Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router | TanStack Query React Docs
Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router This comparison table strives to be as accurate and as unbiased as possible. If you use any of these libraries and feel the information could be improved, feel free to suggest changes (with notes or evidence of claims) using the "Edit this page on Github" link at the bottom of this page. Feature/Capability Key: ✅ 1st-class, bui
【Web】バックエンドから受け取ったデータってどう扱うの？React Query を使ったイマドキな状態管理｜F Lab｜Fixel株式会社
特に、React に React Hooks が導入されたり、async/await 記法が普及してきたりしたことなどを背景に、コンポーネントから直接 API を呼び出すことも簡単にできるようになってきました。 ちなみに、React Query などライブラリの話に入る前に注記しますが、この「Redux を剥がしてコンポーネントから直接 API データを取得する」ということは React だけの機能で（=他のライブラリ不要で）実現することもできます。具体的には以下のようなコードになります： さて、上記のような議論から、最近ではグローバルステートから「サーバーステート」（API から取得したデータに基づくステート）を切り出す流れも見られるようになりました。サーバーステートが切り出された後のグローバルステートは「クライアントステート」として扱うこともでき、以下のように整理することができます:
私の考えるReact Queryベストプラクティス
はじめに こんにちは。株式会社HRBrainでインターンをしている安井です。 この記事では今業務で採用しているReact Queryの特性を生かした設計を考察してまとめていきます。 本記事はHRBrain Advent Calendar 2022の24日目の記事です。 前提 本記事で使用するライブラリ等のversion React: v18.2.0 TypeScript: v4.9.3 React Query（TanStack Query）: v4.19.1 axios: v1.2.1 vite: v4.0.0 React Queryはv4から名前が変更されTanStack Queryとなりましたが、記事の中ではReact Queryと呼ぶこととします。 また、本記事で使用するコードは下記のレポジトリで公開しています。 React Queryとは React Query is often
React Query meets React Router28.08.2022 — ReactJs, React Query, React Router, TypeScript, JavaScript — 6 min read Remix is changing the game, and they are bringing their data fetching concepts (loaders and actions) to purely client side rendered applications with React Router 6.4. I went through their great tutorial that shows the concept very well and demonstrates how you can quickly build a sma
はじめに 本ドキュメントは、 React Queryを用いた開発事例の紹介です。 React Queryは、Reactで非同期データをフェッチ、キャッシング、更新するためのフックを提供するライブラリです。 React Queryを用いることで、効率的なバックエンド連携が実現できます。 本ドキュメントでは、このライブラリをどのように開発に適用したかを、ライブラリの機能説明を交えながら紹介します。 また、React Queryの特徴を活かしたシステム改善案についても紹介します。 想定読者 バックエンドと連携するシングルページアプリケーションをReactで開発するエンジニア。 参考文献・URL https://github.com/tannerlinsley/react-query 背景 昨今、フロントエンドをシングルページアプリケーション（以下、SPA）として構築するケースが増えてきました。
Concurrent, Suspenseの文脈でキャッシュ管理と理想的なデータフェッチを考える (Recoil, Aspida, React Query, GraphQL)
データフェッチで考えられるシナリオ パラメータ無しのGET パラメータ有りのGET キャッシュ保持 キャッシュのinvalidate キャッシュしたデータに対するモデリング ReduxでいうcreateEntityAdapter的な プリフェッチ(+並行リクエスト) SSR対応 APIコールを行わずに初期値を渡せる 最大要件とインタフェースはReact Queryを参考にする すごいオプションあるけど実際に作ってて欲しくなるのは以下 onStart onEnd onSuccess onError refetchOnMount( or staleTime) また、ユーザー体験の観点で以下の要件を満たせると良い 楽観的UI Suspendせずにリフェッチ可能 (画面のチラつき防止) こうして考えたときにReact Queryはほぼ全ての要求を満たしていてさすがだと思う。 キャッシュも効くのでR
React Query で optimistic-update な UI を実装してみる - Studyplus Engineering Blog
こんにちは @okupara です。 去年から Studyplus for School の API 周りの state 管理を Redux から React Query にし始めました。キャッシュや無限スクロールでのリクエストのサポート、ページネーションのサポートなど、隈雑になりがちな処理を抽象化してくれてるので、かなり使いやすいです。 最近個人的に React Query を使った optimistic-update な UI の実装方法をどうすれば良いのか試行錯誤していたので、現時点での実装案を共有できればと思います。 optimistic-update (optimistic-ui) "楽観的な更新・UI"とはなんぞやについてはカミナシさんの開発者ブログでわかりやすく解説されてます。 Reduxによるいいねボタンの実装例もありますので是非ともそちらををご参考ください。 今回自分が試
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ - Qiita
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ReactreduxSWRRecoilreact-query 2021/09/24 追記 これまでは状態管理にReduxやVuexなどの状態管理用ライブラリを使いますが、Graphqlを採用した場合にApollo Clientを利用することでフロントエンドの状態管理の実装がかなり楽になります。 追記終了 2021/01/17 追記 2020年版 満足度ランキング State of JS 2020: JavaScript Flavors https://2020.stateofjs.com/ 最近よく聞く状態管理 pmndrs/jotai: 👻 Primitive, flexible state management for React https://github.com/pmnd
All About React Query
All About React Query Topics: ReactSoftware ArchitecturePerformance There‘s a lot of buzz about React Query and how much it can simplify your development workflow. In this episode, we’ll learn all about it from the #TanStack creator himself! Repo Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to f
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
When GraphQL and especially Apollo Client became popular in ca. 2018, there was a lot of fuss about it completely replacing redux, and the question Is Redux dead yet? has been asked a lot. I distinctly remember not understanding what this was all about. Why would some data fetching library replace your global state manager? What does one even have to do with the other? I was under the impression t
React Query as a State Manager20.08.2021 — ReactJs, React Query, JavaScript, TypeScript — 7 min read React Query is loved by many for drastically simplifying data fetching in React applications. So it might come as a bit of a surprise if I tell you that React Query is in fact NOT a data fetching library. It doesn't fetch any data for you, and only a very small set of features are directly tied to
Not gonna lie that (as a maintainer of a library in the data fetching space) I'm feeling mostly afraid of server components and suspense. "How will this work with react-query" is a good question. It feels like I'm supposed to have an answer but I don't. Huge imposter syndrome rn That said, I now had some time to look at this topic a bit closer, and I also discussed this with some folks who know wa
こんにちは、@nerusan_main です。 フロントエンド開発において、API 経由でデータを取得や送信するサービスは多いです。その時、axios や fetch 関数を利用して try/catch でデータを取得するかなって思います。例えば以下のようなソースコードです。 // データを取得する const [data, setData] = useState({name: ''}) // このページに法問した時に一度だけ実行 React.useEffect(() => { try { (async () => { // データを取得 const data = await axiod.get('https://endopoint.url'); // 正常系レスポンスの処理 // 取得データ尾をステートで管理 setData(data); })(); } catch (err) { //
SSR data fetching + caching mechanism is a bit tricky in next js. In this article, we will learn how to improve initial load time via SSR and have a high speed client side navigation with the help of CSR and React Query. We will create a blog app using the JSON Placeholder API. We are going to see just important sections here. To see the full source code checkout the github repo. You can also chec
Using Suspense and React Query: Tutorial with examples - LogRocket Blog
Editor’s note: This article was last updated 14 July 2022 to reflect updates to Create React App. In an effort to make writing React components easier with less code, the React team introduced Hooks to manage states in functional apps. Despite these improvements to React, one major functionality was still missing, caching. Suspense simplifies managing loading states in React components, supporting
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代
【脱Redux】SWRやReact Queryを使った状態管理戦略
SWR vs React Query - fsubal
JSConf JP 2022 introduce React Query
React Query を使っていて気になった SWR とのいくつかの違い | DevelopersIO
REST API なら React Query がファーストチョイス
Thinking in React Query
React Queryを状態管理ライブラリとして使い倒そう！/useQStateのススメ - Qiita
SWRとReact Queryどっち使おうか検討したメモ
Breaking React Query's API on purpose
初めてReact Queryを使う人のため設定方法と動作の理解 | アールエフェクト
Why React Query?
React Queryはデータフェッチライブラリではない。非同期の状態管理ライブラリだ。
私の考えるReact Queryベストプラクティス - Qiita
Next.js とReact Query でデータを表示したり更新する - aptpod Tech Blog
React Query meets React Router
React Queryを用いた開発事例の紹介 | Fintan
Practical React Query
React Query as a State Manager
You Might Not Need React Query
みんな使ってる？React Queryで快適なAPI通信を実現しよう！
React Query v4 + SSR in Next JS
itest.5ch.net
note.com/shu_yamaguchi
www.zakzak.co.jp
leewaynote.com
anond.hatelabo.jp
aya2.nk.awe.jp