react-query : クラスコンポーネントのコードで導入するいくつかの方法 - OITA: Oika's Information Technological Activities

引き続き React Query のターン。 useQuery か、なるほどいいねこれということで導入しようと思っても、手元のコードは全然 class component ですよっていう場合に、どうやって導入していく方法があるかという整理。 おおよそそのまま、クラスコンポーネントでhooks使うにはどうするかっていう話になります。 検証コード 例として、以下のようなシンプルなコードを考える。 外部リソースとしてユーザ一覧を管理している 画面からユーザの追加を行う 画面でユーザ一覧を表示する 検証用コードとして、今は以下のようなダミーのストアを作っておきます。 本来はこの addUser , fetchUserList から APIへのリクエストを投げているイメージ。 （以下、サンプルコードは TypeScript です） export type User = { name: string

[carolina04]

“全体を書き直すのが厳しい場合は、queryを利用する部分だけをうまく子コンポーネントとして切り出すことを考える”