الگوریتم اول

لطفا صبر کنید...

React Query برای کش‌کردن و مدیریت API در React

React Query یکی از محبوب‌ترین کتابخانه‌ها برای مدیریت داده‌های سرور (API)، کش‌کردن (caching) و همگام‌سازی خودکار (automatic synchronization) داده‌ها در برنامه‌های React است. این ابزار به‌ویژه زمانی مفید است که با داده‌های API کار می‌کنید و نیاز دارید که داده‌ها به طور مؤثر و بهینه در اپلیکیشن شما مدیریت شوند.

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

 

۱. چرا React Query؟

React Query به طور خاص برای مدیریت داده‌های سرور و بهینه‌سازی نحوه درخواست، کش‌کردن، به‌روزرسانی و همگام‌سازی داده‌ها در برنامه‌های React طراحی شده است.

ویژگی‌های کلیدی آن شامل:

  • کش‌کردن داده‌ها: داده‌هایی که از سرور دریافت می‌شوند به طور خودکار در کش ذخیره می‌شوند و نیازی به درخواست مجدد از سرور نیست.
  • مدیریت وضعیت بارگذاری: مدیریت وضعیت‌هایی مانند بارگذاری (loading)، خطا (error) و داده‌های موفق (success) به طور خودکار.
  • همگام‌سازی داده‌ها: داده‌ها به صورت خودکار و بهینه همگام‌سازی می‌شوند.
  • پشتیبانی از Pagination و Infinite Query: مدیریت درخواست‌های صفحه‌بندی یا بی‌نهایت به صورت ساده و مؤثر.

 

۲. نصب React Query

برای استفاده از React Query، باید ابتدا آن را نصب کنید:

npm install react-query

 

سپس، برای استفاده از React Query در اپلیکیشن خود، باید QueryClientProvider را در سطح ریشه (root) برنامه قرار دهید.

مثال:

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App';
const queryClient = new QueryClient();
ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

 

۳. استفاده از useQuery برای درخواست داده‌ها

useQuery هوکی است که برای انجام درخواست‌های GET و دریافت داده‌ها از سرور استفاده می‌شود. این هوک به صورت خودکار داده‌ها را کش می‌کند، و اگر داده‌ها قبلاً در کش موجود باشند، به جای درخواست مجدد از سرور، از کش استفاده می‌کند.

🔹 ساختار استفاده از useQuery:

import { useQuery } from 'react-query';
const fetchData = async () => {
  const res = await fetch('https://api.example.com/data');
  if (!res.ok) throw new Error('Network response was not ok');
  return res.json();
};
const MyComponent = () => {
  const { data, error, isLoading } = useQuery('dataKey', fetchData);
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};
export default MyComponent;

 

  • useQuery به سه پارامتر نیاز دارد:
    1. کلید کش (Query Key): برای شناسایی داده‌ها در کش استفاده می‌شود. این کلید باید منحصر به فرد باشد.
    2. تابع درخواست (Query Function): تابعی که داده‌ها را از سرور دریافت می‌کند.
    3. آپشن‌ها: آپشن‌هایی مانند onSuccess, onError یا enabled برای کنترل رفتار هوک.

🔹 ویژگی‌های useQuery:

  • کش‌کردن خودکار داده‌ها: به محض درخواست داده‌ها، React Query داده‌ها را در کش ذخیره می‌کند.
  • مدیریت وضعیت بارگذاری (loading): این هوک به طور خودکار وضعیت بارگذاری و خطا را مدیریت می‌کند.
  • همگام‌سازی داده‌ها: اگر داده‌ها در کش تغییر کنند یا نیاز به درخواست مجدد باشد، React Query به صورت خودکار این عملیات را انجام می‌دهد.

 

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

در کنار useQuery، برای ارسال داده‌ها (مانند درخواست‌های POST، PUT، DELETE)، از useMutation استفاده می‌شود. این هوک برای عملیات‌هایی که نیاز به تغییر وضعیت سرور دارند، مناسب است.

🔹 ساختار استفاده از useMutation:

import { useMutation } from 'react-query';
const createData = async (newData) => {
  const res = await fetch('https://api.example.com/data', {
    method: 'POST',
    body: JSON.stringify(newData),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  if (!res.ok) throw new Error('Network response was not ok');
  return res.json();
};
const CreateDataComponent = () => {
  const mutation = useMutation(createData);
  const handleSubmit = async () => {
    const newData = { name: 'New Data' };
    mutation.mutate(newData);  // ارسال داده‌ها
  };
  if (mutation.isLoading) return <p>Sending...</p>;
  if (mutation.isError) return <p>Error: {mutation.error.message}</p>;
  if (mutation.isSuccess) return <p>Data created successfully!</p>;
  return <button onClick={handleSubmit}>Create Data</button>;
};
export default CreateDataComponent;

 

  • useMutation به شما این امکان را می‌دهد که داده‌ها را به سرور ارسال کنید و نتیجه را دریافت کنید.
  • مانند useQuery, می‌توانید وضعیت‌هایی مانند در حال ارسال (isLoading), خطا (isError) و موفقیت (isSuccess) را کنترل کنید.

 

۵. کش‌کردن و به‌روزرسانی خودکار داده‌ها

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

🔹 چندین راه برای به‌روزرسانی کش:

  • refetch: با استفاده از متد refetch می‌توانید داده‌های یک درخواست خاص را مجدداً درخواست کنید.

const { data, refetch } = useQuery('dataKey', fetchData);
return <button onClick={refetch}>Refetch Data</button>;

  • invalidateQueries: اگر داده‌های یک بخش تغییر کردند، می‌توانید کش تمام داده‌های مرتبط با یک کلید را منقضی کنید تا داده‌ها به روز شوند.

    import { useQueryClient } from 'react-query';
    const queryClient = useQueryClient();
    const updateData = async () => {
      // عملیات به‌روزرسانی
      queryClient.invalidateQueries('dataKey');
    };

    ۶. مزایای React Query

 

  • کاهش تعداد درخواست‌های تکراری: داده‌هایی که قبلاً دریافت شده‌اند، در کش ذخیره می‌شوند و نیازی به ارسال درخواست مجدد نیست.
  • مدیریت وضعیت بارگذاری و خطا: React Query به طور خودکار وضعیت‌های در حال بارگذاری، خطا و موفقیت را مدیریت می‌کند.
  • همگام‌سازی خودکار: داده‌ها به طور خودکار به‌روز می‌شوند و شما نیازی به مدیریت دستی وضعیت ندارید.
  • پشتیبانی از Pagination و Infinite Scroll: React Query به راحتی از درخواست‌های صفحه‌بندی و بی‌نهایت پشتیبانی می‌کند.

 

جمع‌بندی

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