React Query برای مدیریت درخواست‌های API

برای استفاده از React Query در مدیریت درخواست‌های API در React، ابتدا باید این کتابخانه را نصب کرده و سپس آن را برای درخواست داده‌ها و مدیریت کش استفاده کنید. React Query به‌طور خاص برای مدیریت کش، هماهنگی درخواست‌ها و مدیریت وضعیت سرور طراحی شده است. در اینجا مراحل استفاده از React Query را برای مدیریت درخواست‌های API در React توضیح می‌دهیم:

1. نصب React Query

ابتدا باید React Query را در پروژه خود نصب کنید:

npm install @tanstack/react-query

2. راه‌اندازی React Query Client

قبل از استفاده از React Query، باید React Query Client را ایجاد کنید و آن را در پایه‌ترین کامپوننت (مثلاً App.js) استفاده کنید.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// ایجاد یک QueryClient

const queryClient = new QueryClient();

function App() {

  return (

    <QueryClientProvider client={queryClient}>

      <YourComponent />

    </QueryClientProvider>

  );

}

3. استفاده از useQuery برای گرفتن داده‌ها از API

برای انجام درخواست‌های GET و دریافت داده از یک API، از useQuery استفاده می‌کنیم. این hook به شما کمک می‌کند تا به سادگی داده‌ها را از سرور بخوانید و کش کنید.

مثال:

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

function fetchData() {

  return fetch('https://api.example.com/data')

    .then((response) => response.json());

}

function YourComponent() {

  // استفاده از useQuery برای دریافت داده‌ها

  const { data, error, isLoading } = useQuery(['data'], fetchData);

  if (isLoading) return <div>Loading...</div>;

  if (error) return <div>Error: {error.message}</div>;

  return (

    <div>

      <h1>Data:</h1>

      <pre>{JSON.stringify(data, null, 2)}</pre>

    </div>

  );

}

useQuery دو آرگومان می‌گیرد:

1. کلید (در اینجا ['data']) که به React Query کمک می‌کند تا کش داده‌ها را شناسایی کند.

2. تابع Fetching که داده‌ها را از API می‌آورد.

از سه مقدار بازگشتی استفاده می‌کنیم:

data: داده‌های دریافتی از API.

isLoading: وضعیت بارگذاری داده‌ها.

error: خطای احتمالی در هنگام درخواست.

4. استفاده از useMutation برای ارسال داده‌ها به API

برای انجام درخواست‌های POST، PUT یا DELETE از useMutation استفاده می‌کنیم.

مثال:

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

function postData(newData) {

  return fetch('https://api.example.com/data', {

    method: 'POST',

    body: JSON.stringify(newData),

    headers: { 'Content-Type': 'application/json' },

  }).then((response) => response.json());

}

function YourComponent() {

  const mutation = useMutation(postData);

  const handleSubmit = async () => {

    const newData = { name: 'New Item', description: 'New description' };

    mutation.mutate(newData); // ارسال داده‌ها

  };

  if (mutation.isLoading) return <div>Submitting...</div>;

  if (mutation.isError) return <div>Error: {mutation.error.message}</div>;

  if (mutation.isSuccess) return <div>Data submitted successfully!</div>;

  return (

    <div>

      <button onClick={handleSubmit}>Submit Data</button>

    </div>

  );

}

useMutation به شما اجازه می‌دهد که داده‌ها را به API ارسال کنید و واکنش‌های مختلف مانند در حال ارسال، خطا و موفقیت را مدیریت کنید.

5. استفاده از کش و به‌روزرسانی داده‌ها

React Query به‌طور خودکار داده‌ها را کش کرده و برای درخواست‌های بعدی آن‌ها را به‌روز می‌کند. برای به‌روزرسانی کش و داده‌ها، از متدهایی مانند refetch یا invalidateQueries استفاده می‌کنیم.

مثال: refetch کردن داده‌ها

const { data, isLoading, refetch } = useQuery(['data'], fetchData);

return (

  <div>

    <button onClick={refetch}>Refetch Data</button>

    {isLoading ? (

      <div>Loading...</div>

    ) : (

      <pre>{JSON.stringify(data, null, 2)}</pre>

    )}

  </div>

);

مثال: Invalidating Cache

اگر داده‌ای را تغییر دهید و بخواهید کش داده‌های قدیمی را پاک کنید و آن‌ها را دوباره از API بگیرید:

const queryClient = useQueryClient();

function updateData(newData) {

  return fetch('https://api.example.com/data', {

    method: 'POST',

    body: JSON.stringify(newData),

    headers: { 'Content-Type': 'application/json' },

  });

}

const mutation = useMutation(updateData, {

  onSuccess: () => {

    queryClient.invalidateQueries(['data']); // پاک کردن کش

  },

});

6. تخصیص زمان‌بندی برای درخواست‌ها

React Query امکان تخصیص زمان‌بندی برای درخواست‌ها را فراهم می‌کند تا از بارگذاری داده‌ها در زمان‌های خاص جلوگیری شود.

تنظیم staleTime:

const { data } = useQuery(['data'], fetchData, {

  staleTime: 10000, // داده‌ها پس از 10 ثانیه به‌روز خواهند شد

});

7. تخصیص Cache و تنظیمات دیگر

React Query از تنظیمات مختلفی مانند cacheTime (مدت‌زمانی که کش داده‌ها باقی می‌ماند) و retry (تعداد تلاش‌های مجدد برای درخواست‌های ناموفق) پشتیبانی می‌کند.

const { data, error } = useQuery(['data'], fetchData, {

  cacheTime: 1000 * 60 * 5, // ذخیره داده‌ها به مدت 5 دقیقه

  retry: 3, // سه بار تلاش مجدد

});

---

جمع‌بندی

React Query یک ابزار قدرتمند برای مدیریت درخواست‌های API است که شامل کش، هماهنگی درخواست‌ها و مدیریت وضعیت سرور می‌شود.

با استفاده از useQuery برای دریافت داده‌ها و useMutation برای ارسال داده‌ها، می‌توانید به راحتی مدیریت درخواست‌های API را در React انجام دهید.

همچنین امکاناتی مانند کش، به‌روزرسانی داده‌ها و retry به شما این امکان را می‌دهد که با درخواست‌ها و مدیریت وضعیت در اپلیکیشن‌های پیچیده راحت‌تر کار کنید.