首頁 >web前端 >js教程 >安裝並使用 TanStack Query(以前稱為 React Query)

安裝並使用 TanStack Query(以前稱為 React Query)

Patricia Arquette
Patricia Arquette原創
2025-01-26 02:31:14347瀏覽

Instalación y uso de TanStack Query (antes React Query)

TanStack 查詢簡介

TanStack Query(以前稱為 React Query)是一個強大的函式庫,用於管理 React 應用程式中的資料請求狀態。 簡化高效取得、快取、同步和更新資料的過程。

安裝

要將 TanStack Query 整合到您的 React 專案中,請使用 npm 或 Yarn:

<code class="language-bash">npm install @tanstack/react-query</code>

<code class="language-bash">yarn add @tanstack/react-query</code>

要使用開發工具 (DevTools),請安裝:

<code class="language-bash">npm install @tanstack/react-query-devtools</code>

設定

使用 QueryClientProvider 包裝您的應用程式來管理資料要求:

<code class="language-javascript">import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
      {/* Opcional: Si instalaste DevTools */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}</code>

useQuery

的基本使用

useQuery 鉤子可以輕鬆地從 API 取得資料:

<code class="language-javascript">import { useQuery } from '@tanstack/react-query';

function fetchData() {
  return fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json());
}

function MyComponent() {
  const { data, isLoading, error } = useQuery({ queryKey: ['post'], queryFn: fetchData });

  if (isLoading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}</code>

使用 useMutation

執行突變

要執行 POST、PUT 或 DELETE 等操作,請使用 useMutation:

<code class="language-javascript">import { useMutation } from '@tanstack/react-query';

function createPost(newPost) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newPost),
  }).then(response => response.json());
}

function CreatePost() {
  const mutation = useMutation(createPost);

  return (
    <button onClick={() => mutation.mutate({ title: 'Nuevo Post', body: 'Contenido del post' })}>
      Crear Post
    </button>
  );
}</code>

Fetcher 在 TanStack 查詢中的重要性

TanStack Query 需要一個 fetcher(向資料來源發出請求的函數)來取得外部資訊。 獲取器充當中介,提供靈活性並保持程式碼整潔。 您可以自訂它以適合您的 API。

什麼是抓取器?

獲取器是一個函數:

  1. 接收參數(請求選項等)。
  2. 提出請求(使用fetchaxios等)。
  3. 傳回帶有資料或錯誤的承諾。

取得範例:

<code class="language-javascript">const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  const json = await response.json();
  return json;
};</code>

結論

TanStack Query 優化了 React 中的資料管理,透過其快取和重新驗證系統提高了效能。 再見! ?

以上是安裝並使用 TanStack Query(以前稱為 React Query)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn