White(aegis4206)

tanstack/react-query V5

非同步fetch data工具

套件安裝

npm i @tanstack/react-query 或 yarn add @tanstack/react-query

需要使用Provider來包，才能在組件中使用該功能

layout.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
    <Layout>
        {children}
    </Layout>
    // React Query開發工具 
    // 可直接看到fetch到的data
    <ReactQueryDevtools />
</QueryClientProvider>

fetch Data，若失敗不會重新fetch，需設置retry
chace機制預設保留五分鐘

import { useQuery } from '@tanstack/react-query';
    
const fetchData = async ({ QueryKey }) => {
    const res = await fetch("url");
    const data = await res;
    return data
}

// useQuery(QueryKey,API FN,{參數項設定})
const { data, isSuccess, isError, dataUpdatedAt, error, isLoading, isIdle, refetch } = useQuery( 
    {
        queryKey: [...QueryKey],
        queryFn: () => fetchAPI(id),
        {
            // 預設0次
            retry : 3,
            // 快取預設保留五分鐘 單位毫秒
            gcTime : 1000,
            // 設置初始化不請求 
            // 後續搭配isIdle、refetch使用
            enabled : false
    }
})

useQueries (Parallel Queries)

import { useQueries } from '@tanstack/react-query';

const queries = useQueries(
    queryIdList.map(id=>{
        return {
            queryKey: [...QueryKey],
            queryFn: () => fetchAPI(id)
        }
    })
)

useMutation & invalidateQueries

import { useMutation, useQueryClient  } from '@tanstack/react-query';

const postData = async ({...variables}) => {
    const res = await fetch('url', {
        method: "POST",
        header:{
            "content-type": "application/json"m
        },
        body: JSON.stringify({
            id,
            title,
            user,
            ...
        })
    });
    const data = await res.json();
    return data
}

const queryClient = useQueryClient()

const { mutate } = useMutation({
    mutationFn: postData,
    onMutate: ( variables )=>{

        // 執行成功後會向Success傳遞
        return context
    },
    onSuccess: ( data, variables, context )=>{

        // 成功時可透過invalidateQueries(重新抓取新資料)
        queryClient.invalidateQueries({ queryKey: QueryKey[0] })
    },
    onError: () => {

    },
    onSettled: () => {
        // 最後執行
    },
    ...Options
});

// 觸發API
mutate(variables, {
    onError,
    onSettled,
    onSuccess,
})

Copyright © 2025 white.