こんにちは。CURUCURUエンジニアの長尾です。 前回引き続きネタがなくなってきましたので勉強がてらtanstack-queryのお話をしようと思います。

---

Tanstack Queryって？

TanStack Queryは、Webアプリケーションでのデータ取得、キャッシュ、同期、更新を簡単に行うことができます。 非常に便利なライブラリです。 弊社ではTanStack Queryを使ってサーバとのAPI通信を行っています。

useQueryについて

Tanstack Queryを使ってデータ取得を行うにはuseQueryというメソッドを使います。

使い方はとても簡単で以下のようにして使います。

const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })

queryKey

queryKeyはTanstack QueryがAPIを通して取得してデータをキャッシュするために使うキーです。 キーを変更したりすると再度API取得が走るようになっています。

キーの書き方はさまざまですが基本は配列形式での記述です。 キーにオブジェクトも入れることができるので

useQuery({ queryKey: ['todos', { type: 'done' }], ... })

こんな書き方もできます。

queryFn

queryFnは実際のデータ取得関数です。

その他のよく使うオプション

useQueryにはたくさんのオプションがあるのでうまく使うこと自分のやりたいようにデータ取得のタイミングを変更できたりするので知っておいて損はないです。 以下に私がよく使うオプションを載せておきます。

select

これはよく使うんですがデータ取得してきた値を何かしら変換したいときにselectを使うとデータ取得と整形が同時に行うことができちゃうイメージです。 こうするとデータuseQueryの結果がすでに整形済みなのでそのままViewに使える形にしたりできます。

const result = useQuery({ 
    queryKey: ['todos'],
    queryFn: fetchTodoList,
    select: (data) => {
        // 色々データ加工してdataを返す
        return data;
    },
})

enabled

TanStackQueryがデータ取得を行うかどうかのフラグ設定。 単純にデータ取得のタイミング制御にも使えますがよく例だと連続したクエリの実行時に使ったりします。

const userResult = useQuery({ 
    queryKey: ['todos'],
    queryFn: fetchUserData,
})

const userToDoResult = useQuery({ 
    queryKey: ['todos'],
    queryFn: fetchTodoList,
    enabled: !!userResult,
})

cacheTime, staleTime

TanstackQueryにどのぐらいキャッシュさせるのかを決める設定。 デフォルトは5分で設定されていますので、それ以外の設定をした場合に使ったりしています。

cacheとstaleについてはここでは割愛します。

refetchOnWindowFocus

windowフォーカスされたときに再度取得処理を走らせるかどうか。 デフォルトはtrueになっていますが、意図的にデータ再取得を止めたいときもあり使っています。

suspense

Reactのsuspenseを使う場合にはtrueにする必要があります。 suspenseについては割愛しますが、suspense使うとViewの中で行なっていた

if (query.isLoading) {
    return <Loading />
}

みたいなコードをなくすことができるので本来表示すべきViewのみコンポーネントに記述できます。

initialData

初期データを入れる場所です。 TanstackQueryを使ってSSRを行う場合に使う場所ですが、初期データを描画時点で持ってるのであれば ここに渡すことでuseQueryの戻り値でその初期値を使って描画することができます。

まとめ

今回はTanstack Queryについてお話しました。 TanstackQueryを使うとデータ取得周りをスッキリと実装することができるので興味ある方はぜひ使ってみてください。

最近フロントエンドの話が多いので次回はバックエンドの話でも。。。 以上、長尾がお届けしました。

メンバー募集

CURUCURUでは開発メンバーを募集中です。 CURUCURUの開発に興味があったり、モダンな開発環境で挑戦してみたいという方がいましたら、ぜひこちらも覗いてみてください！