React Query

qiita.com

引き続き React Query のターン。 useQuery か、なるほどいいねこれということで導入しようと思っても、手元のコードは全然 class component ですよっていう場合に、どうやって導入していく方法があるかという整理。 おおよそそのまま、クラスコンポーネントでhooks使うにはどうするかっていう話になります。 検証コード 例として、以下のようなシンプルなコードを考える。 外部リソースとしてユーザ一覧を管理している 画面からユーザの追加を行う 画面でユーザ一覧を表示する

引き続き React Query の話。 ある関数コンポーネントが useQuery によって取得される外部データに依存している場合に、そのuseQueryで取得される外部データをダミーに置き換えて、コンポーネントテストを書く方法。 なかなかまとまった情報が見つからなかったので記録しておく。 テストには Jest & React Testing Library を使用。

お勉強メモ。嘘ついたらごめんなさい。 React Query で、cacheTime, staleTime と、invalidateQueries, resetQueries あたりの使い分けの話。 お試し用コードは最後に載せてます。

React Query Firebaseとは、Firebaseを使いやすくするためのHookのセットを提供してくれるパッケージです。提供されているHookでは、React Queryをラップしていて、React Queryの利点を融合することでフックをプロジェクトに対して簡単に導入できるようにしている。 TL;DR 今回作成したプロジェクトはこちらのリポジトリから見ることができる。 github.com React Nativeプロジェクトの準備 React Nativeプロジェクトの作成方法やReact Queryの導入方法や簡単な使い方に関してはこちらの記事を参照してほしい。 takagi…

モチベーション 自分のフロンエンド技術を維持するため、サンプルアプリを作って試していたり、依存関係のバージョンも最新で動かすようにしている。 だけど最近テスト実行時にこれまで遭遇しなかったエラーが出るようになって対応が難しかった。 一応、テストは全て通るようにはなったけど、結構大掛かりな対応になりそうなので、まとめておく。 多分、内容は更新していくかm エラーになったpackage.json サンプルアプリケーションとエラーとなった時点のpackage.json を基点として記載しておく github.com { "name": "project-frontend-dev-process", …

僕がWebアプリを開発するときはもっぱらRemixフレームワークを利用する。 remix.run 理由は単純で、loader関数とaction関数の考え方が大好きだからだ。 React Nativeのアプリの開発をするときも、Remixのloader関数とaction関数を使いたい。 しかし、そんな機構はもちろんReact Nativeには存在しない。 そこで、action関数もどきをReact Nativeで再現するためにuseActionDataもどきを作ってみる。 useLoaderは別の機会に作ることにする。 引数 引数としてaction関数を受け取れるようにする。 T型は、formで…

Vite で作成した React (TypeScript) のプロジェクトで MSW (Mock Service Worker) を使って開発環境で API へのリクエストにモックを返すようにしたいと思っていたのですが React からのリクエストがことごとく net::ERR_FAILED [MSW] Failed to mock a "POST" request になってしましました。 問題を切り分ける I think it's the error message that's confusing. return event.respondWith( handleRequest(event…

Next.js のgetServerSidePropsとswrやReact Queryなどのデータフェッチライブラリを一緒に使うと、効率が悪い場合があるという話を聞いた getServerSidePropsとはNext.jsのデータフェッチ手法で、getServerSidePropsという関数をページからexportすると、リクエストごとにこの関数で返されるデータを使ってページ単位で事前フェッチする仕組み もう一方のswrやReact Queryなどは、Hooks時代から利用され始めたコンポーネント単位でフェッチするデータフェッチライブラリ これら２つは相互補完的に使うことができるが組み合わせ…

初めまして、開発本部の細木です。 21年度新卒でトヨクモに入社し1年が経ちました。 今回は就職から1年経って今までの経験などを振り返ってみたいと思います。 就職までの経緯 医師以外の道 ITエンジニアという職業 内定を得るまで Progate(5年生の10月頃〜) AtCoder(5年生の11月頃〜) Web開発 就職活動 入社後にやったこと 4〜5月 スケジューラーチームに配属 6〜9月 React Query導入 バックエンド入門 仕事の仕方について 10〜11月のファーストリリースまで 11月ファーストリリース後〜3月 Zoom連携機能 予定詳細ポップアップの全画面表示 最近 応用情報技…

はじめに ドワンゴ教育事業 Web フロントエンドチームの berlysia です。 ドワンゴ教育事業が提供するオンライン学習サービス『N予備校』は、この 4 月でリリース 6 周年を迎えました。N 予備校の Web フロントエンドはリリース以来、全面的な書き換えを行い、今も続けています。 この記事では書き換えに伴う N 予備校の Web フロントエンド実装の変遷を説明し、これら書き換えの経験やWebフロントエンドという領域の性質を踏まえて、すべてを書き換え続ける選択をしていることを述べます。 この記事は berlysia が他社様イベント*1にて発表させていただいた話題を元に再構成しています…

システム技術部の野阪です。以前カブコムにおけるフロントエンド領域の技術選定について紹介しました。今回はそのふりかえりとなります。 engineering.kabu.com プレスリリースにてお知らせしている 通り、貸株サービスのASP提供を証券会社及びそのお客様向けに行っています。お客様向け画面及び管理画面を紹介した技術スタックで構築しています。貸株サービスは2022年2月にリリースをしましたので実際に採用した技術についてふりかえりをしていきたいと思います。 TypeScript Boilerplate CSS in JS UIコンポーネント 状態管理 非同期処理 スキーマ管理 まとめ Typ…

React Query を使っていて気になった SWR とのいくつかの違い | DevelopersIO dev.classmethod.jp インターコムのIT資産管理ツール「MaLionCloud」、OBCの「奉行Edge 勤怠管理クラウド」とAPI連携 cloud.watch.impress.co.jp 「秀丸アドレス帳シンクロナイザ」が10年ぶりのメジャーアップデート／「Google Contacts API」から「Google People API」に移行し、動作不能から復活 forest.watch.impress.co.jp 「Off-line Position Finder A…

みなさん一度は「Blitz.js」というRailsにインスパイアされて作られたフルスタックReactフレームワークを聞いたことがあるのではないでしょうか。 触ったことがない方は是非触ってみてください。 https://blitzjs.com 本記事ではタイトルにあるように実際に使用したquery情報をまとめてみました。 また、Blitz.js は next + prisma で railsのようにフルスタックなフレームワークを実現しているので、Blitzの理解のためにもprismaとnextを理解していると学習が捗ること間違いなしです。 ちなみにドキュメントにも以下の記載があるようにuseQu…