3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

TanStack Query?何それ?

Posted at

TanStack Queryとは?

TanStack Queryとは、以前(バージョン3まで)はReact Queryと呼ばれていましたがバージョン4になり名称がTanStack Queryとなりました。
以前まではReact専用のライブラリでしたが、バージョンアップしてからはReactだけではなくSolid, Vue, Svelteなどでも利用できるようになりました。

TanStack Queryはデータフェッチライブラリで、APIからデータを取得したい時や更新したい時に使います。
また、取得したデータはキャッシュされ、キャッシュされたデータを取り出すことも可能です。

使い方

下準備編

  1. 以下コマンドでインストールを行います。

    # npmの場合
    $ npm i @tanstack/react-query
    
    # yarnの場合
    $ yarn add @tanstack/react-query
    
  2. TanStack Query を利用するコンポーネントをQueryClientProviderで囲みます。

    import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
    import CoreConcepts from "./core-concepts/page";
    import { Route } from "@/app/type";
    
    const queryClient: QueryClient = new QueryClient({
      defaultOptions: {
        queries: {
          refetchOnWindowFocus: false, // デフォルトでコンポーネントにフォーカスが当たるとフェッチするのを無効化
        },
      },
    });
    
    function MyApp({ Component, pageProps }: AppProps) {
      return (
        <QueryClientProvider client={queryClient}>
          <App />
        </QueryClientProvider>
      );
    }
    

useQuery編

データ取得には、useQueryを使います。
queryKeyとqueryFnオプションにキャッシュ識別のためのkeyとデータフェッチのための関数を渡すだけです。

const { isLoading, data } = useQuery({
  queryKey: ['任意の文字列'] // 配列(空の場合は実行されない)
  queryFn: hogeFugaFetch // データ取得関数(アロー関数をそのまま渡すことも可能)
});

useMutation編

データの追加や変更を行う際にはuseMutationを使います。
フォーム入力データなどを受け取ってAPIに渡したい場合は、アロー関数で引数を渡す。

// 
const mutationWithArg = useMutation({
  mutationFn: (formData) => updateHoge(formData) // データ更新関数
});

// サブミットで受け取ったformDataをmutateメソッドを使って渡してあげる
const onSubmit = (formData) => {
    mutationWithArg.mutate(formData);
};

useQueryClient & getQueryData編

キャッシュされたデータを取り出すにはuseQueryClientフックとgetQueryDataメソッドを使います。

useQueryClientフックは、その時点のQueryClient取得し、この中のキャッシュされたデータやdefaultOptionsの設定情報などを取り扱うことができます。
QueryClientクラスのgetQueryDataメソッドを使ってキャッシュされたデータを取得します。

const queryClient: QueryClient = useQueryClient();
const data = queryClient.getQueryData(['取り出したいqueryKey']);

参考

TanStack Query
TanStack Queryとは?
TanStack Queryを使ってみる
TanStack Query v5 入門
初めてでも安心TanStack Query v5の基本的な設定方法と動きを学ぶ

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?