業務で react-query のリントルールを導入したのでメモ

---

ESLint Plugin Queryとは

TanStack Query 公式で提供している ESLint Plugin

https://tanstack.com/query/v4/docs/react/eslint/eslint-plugin-query

導入

公式で紹介している手順に従うだけで導入できる。

$ yarn add -D @tanstack/eslint-plugin-quer

現時点で提供されている2つのルールのどちらも自動で修正してくれるため、少しずつ移行したいといった理由が無い限りは recommended(両方エラー扱い) にしておいて問題ない。

Exhaustive Deps

useEffect 等の hooks の deps に依存が発生している変数が含まれていなかった時にエラーにする eslint-plugin-react-hooks と同じようなルールを提供する。

useQuery({
	// queryFn 内で todoId を使っているが queryKey に指定されていないためエラーになる
	queryKey: ['todo'],
	queryFn: () => api.getTodo(todoId)
})

キャッシュを無効にしているケースなど queryKey を気にしない場合でも将来のパフォーマンス改善を見越して有効にしておいて問題ないでしょう。

Dependencies を Deps と略して話したいが Depth と勘違いされるリスクがあるので文章だけにしときます。

Prefer Object Syntax

useQuery の引数をオブジェクト形式に強制する。将来的にオブジェクト形式のみサポートする予定とのこと。

これに限らず複数の書き方がある箇所はなるべくリントを使って書き方を統一したい。

---

ほぼ公式で言っている内容なので15分もかからないと思って書き始めたら日本語で言い換えたり文章の校正で1時間以上かかったのでアウトプットの練習は大事だなぁ。。