RTK Query を使った ポーリングの実装

はじめに

React × Redux × (RTK Query) で開発しているチームに参加してから10ヶ月経ちました。
画面からジョブを実行し、その画面にジョブ実行後のステータスを表示したいよねという場面に出くわしました。
まれによく出会う場面ですが、 WebSocket を使うのも大げさだったので、一定時間おきのポーリングで対応することになりました。

ざっとググりましたがいい感じで参考になる記事がなく、結局 RTK Query にポーリングのオプションないか調べたらやっぱりありました。(初めから公式調べようね。)

詳細は Redux Toolkit 公式の 「Polling」 のページを見てください。
こんな感じでいつもの RTK Query にオプション渡すだけで簡単にできますよという備忘＆紹介です。

結論

useQuery で pollingInterval オプションを指定しましょう。

実装内容

まずは API 側の実装。
普通の RTK Query の使い方通りなので、詳しくは公式を見てください。
そもそも RTK Query の使い方に馴染みないんだけどという場合は、こちらの記事にざっと目を通すと雰囲気がつかめると思います。

API 側

export const jobApi = createApi({
    reducerPath: 'jobApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com/api/' }),
    tagTypes: ['Job'],
    endpoints: (build) => {
        readLatestJob: build.query<{item: Job}, void>({
            query: () => {
              return 'job/latest';
            }
        })
    }
})

作った api を store に登録します。
こちらの書き方も定型なので詳細は割愛します。

store 側

import {jobApi} from 'api'

export const store = configureStore({
    reducer: {
        [jpbApi.reducerPath]: jobApi.reducer
    },
    middleware: (getDefaulktMiddleware) => {
        return getDefaultMiddleware().concat(jobApi.middleware)
    }
})

利用側では ifxJobApi.useReadLatestJobQuery という感じで呼び出します。
RTK Query に馴染みがないと useReadLatestJobQuery どこから出てきたよ？となりますが、use[endpoints で指定した名前]Query という形になっています。
第一引数はクエリで利用するパラメータを指定するのですが、エンドポイントにパラメータを渡す必要がない場合は undefined を渡せばOKです。
第二引数のオプションのオブジェクトに、 pollingInterval を指定するとポーリングされるようになります。

利用側

import {jobApi} from 'api'
  const { data } = jobApi.useReadLatestJobQuery(undefined, { pollingInterval: 5000});

最後に

RTK Query は機能豊富で、api利用側も非常にシンプルに書けます。
React 歴が浅い私でも、決められた書き方に沿って書けばやりたいことが実現できるので、日々楽しく開発できています。

RTK Query の記事はまだまだ少ないので今後増えてくれると嬉しいですね。