React
TanStack Queryの useQuery には refetchInterval という設定値があります。 以下の公式ドキュメントにある通り、これは定期的にデータ取得を行うための設定のようです。これを使うことにより、APIへのポーリングも容易に実装できそうです。 refetchInterval…
TanStack Queryの useQuery を使うとき staleTime cacheTime という2つの設定値があります。 それらの違いについてよく分からなかったので調べてみたところ、Githubのdiscussionsに色々記載がありました。 staleTime vs cacheTime · TanStack/query · Discus…
TanStack Queryの useQuery のドキュメントを見ていたところ、 select オプションがありました。 This option can be used to transform or select a part of the data returned by the query function. It affects the returned data value, but does not a…
TanStack Queryの useQuery や invalidateQueries を使うときは Query Key を指定します。 Query Keyとはなにかを公式ドキュメントで見たところ At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an …
最近、状態管理ライブラリ TanStack Query を使う機会がありました。 TanStack Query は公式ドキュメントが充実しています。 TanStack Query | React Query, Solid Query, Svelte Query, Vue Query TanStack/query: Powerful asynchronous state management…
前回の記事で、Playwrightを使ってDjango + ReactのE2Eテストができると分かりました。 WSL2 + Playwrightな環境にて、codegen機能によりReactアプリやDjango管理サイト向けのテストコードを自動生成してみた - メモ的な思考的な 前回は自動生成したテストコ…
前回の記事にて、WSL2上にPlaywrightをインストールして動作することを確認しました。 WSL2上にインストールしたPlaywrightを、Visual Studio Codeから動かしてみた - メモ的な思考的な これにより環境ができたため、次はPlaywrightのcodegen機能でテストコ…
これは Djangoのカレンダー | Advent Calendar 2022 - Qiita 12/6の記事です。 フロントエンドのビルドツール Vite を使って、ReactをDjangoで動かす方法を調べたところ、awesome-viteのページに django-vite の記載がありました。 Integrations with Backen…
Rails + React + OpenAPI な環境で、クエリパラメータに配列を指定することがありました。 ただ、実装するまでにいろいろ調べたことがあったため、メモを残します。 目次 環境 わかったこと Railsでは ids[]=1&ids[]=2 な書式のクエリパラメータを受け取れる…
以前、 React17 + MUI + React Hook Form なアプリを作り、以下のリポジトリとして保存していました。 https://github.com/thinkAmi-sandbox/react_mui_with_vite-sample 公開から時間が経過していたこともあり、せっかくなので最新のReactなどに追随するべ…
React Hook Form 7系とMUI 5系を組み合わせてフォームを作る時に、色々悩んだことがあったのでメモを残します。 目次 環境 controlled component と uncontrolled component について Reactのフォームでは MUIでは React Hook Formでは 実装 フォームを作る …
JetBrainsの資料にある通り、RubyMineではRailsに加えてReactもデバッグできます。 Debug a React application - React | RubyMine Debugging React Apps Created With Create React App in WebStorm | The WebStorm Blog Reactのデバッグについては、公式…
React Hook Form に MUI の DateTime Picker を組み込んだところ、いくつか悩んだことがあったため、メモを残します。 目次 環境 作るもの 実装の流れ MUI で Modal を作る React Hook Form を使ってフォームを作る MUI DateTime Picker と組み合わせる セッ…
以前、MUI DataGrid の列の filterOperators に自作の Custom Operator を設定して、独自のフィルタ機能を実装したことがありました。 React + MUI のDataGridにて、ある列が複数の日付を持つデータに対し、valueFormatter・sortComparator・filterModelを使…
前回、MUI の Breadcrumbs のサンプルコードが React Router v6 では動かなかったため、React + React Router v6 + use-react-router-breadcrumbs を使って、パンくずリストを作ってみました。 React + React Router v6 + use-react-router-breadcrumbs でパ…
React + MUI の Breadcrumbs では、 React Router と統合して扱えます。 Integration with react-router | React Breadcrumbs component - MUI ただ、サンプルコードは React Router v5用のもののようで、 codesandbox で公開されているデモがエラーで止まっ…
以前、 MUI DataGrid の Custom Operator を作りました。 React + MUI のDataGridにて、ある列が複数の日付を持つデータに対し、valueFormatter・sortComparator・filterModelを使って表示・ソート・フィルタしてみた - メモ的な思考的な この時に作成した C…
React の MUI (旧 Material UI) では、コンポーネントとして DataGrid が提供されていることから、グリッド表示したい時に便利です。 React Data Grid component - MUI そんな中 const rows = [ { id: 1, name: 'シナノドルチェ', purchaseDate: [new Date(2…
RailsでWebpacker以外の方法で React のSPAアプリが作れないかを調べたところ、 vite_rails がありました。 Rails Integration | Vite Ruby webpackやRailsのWebpackerに詳しくないため、React と Rails と Vite.js を組み合わせてSPAが作れそうなのは魅力的…
Play Framework アプリに React を組み込んでみる機会がありました。 ただ、Reactを使って SPA にするのではなく、まずは ルーティングは Play Framework (バックエンド)が担当 Play Framework の View上で React が動く Scriptタグでコンパイルした React …
アプリケーションの権限設計について調べていたところ、以下の記事に出会いました。 アプリケーションにおける権限設計の課題 - kenfdev’s blog 権限設計で考えなければいけないことがまとまっていて、とても参考になりました。ありがとうございました。 上…
今までPyCharmでDjango REST framework(以下、DRF)のデバッグを行ったことはありました。 そんな中、以前 React + TypeScript + DRFでアプリを作りました。 ただ、ReactとDRFをPyCharmだけでデバッグしたことがなかったため、どのように設定すればデバッグで…
先日、大岡由佳さんの「りあクト！ 第3.1版 (2020年12月26日 初版第1刷発行)」を読みました。書籍では理由や経緯などが書かれており、とてもためになりました。ありがとうございました。 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語…
