Memasang dan menggunakan TanStack Query (dahulunya React Query)

Pengenalan kepada pertanyaan Tantstack

pertanyaan tanstack (sebelum ini React Query) adalah kedai buku yang kuat untuk menguruskan status permintaan data dalam aplikasi React. Memudahkan proses mendapatkan, menyimpan dalam cache, menyegerakkan dan mengemas kini data dengan cekap

pemasangan

untuk mengintegrasikan pertanyaan tanam ke dalam projek React anda, gunakan npm atau benang:

>

atau

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

untuk menggunakan alat pembangunan (devotools), pasang:

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

>

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

konfigurasi

bungkus permohonan anda dengan

untuk menguruskan permintaan data:

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>

Penggunaan Asas dengan

useQuery cangkuk

memudahkan mendapatkan data dari API:

> useQuery Mutasi

<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>

dengan

useMutation untuk melaksanakan operasi seperti pos, letakkan atau padam, gunakan

:

> 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>

kepentingan perap dalam pertanyaan tanstack

Pertanyaan Tantang memerlukan

fetcher

(fungsi yang melaksanakan permintaan kepada sumber data) untuk mendapatkan maklumat luaran. The Fetcher bertindak sebagai perantara, memberikan fleksibiliti dan mengekalkan pembersihan kod. Anda boleh menyesuaikannya untuk menyesuaikannya dengan API anda Apa itu perap?

A Fetcher adalah fungsi yang:

menerima parameter (pilihan petisyen, dan lain -lain)

Buat permintaan (menggunakan

,

, dan lain -lain)

Mengembalikan janji dengan data atau ralat
Contoh Fetcher:
2. fetch axios
Kesimpulan

Tantang pertanyaan mengoptimumkan pengurusan data dalam React, meningkatkan prestasi dengan sistem cache dan revalidationnya. Jumpa lagi! ?

Atas ialah kandungan terperinci Memasang dan menggunakan TanStack Query (dahulunya React Query). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!