شروع کار با React Query

React Query یک کتابخانه قدرتمند برای مدیریت وضعیت سرور در برنامه های React شما است. این به شما امکان می‌دهد تا داده‌ها را به راحتی واکشی، کش و به‌روزرسانی کنید، بدون اینکه خودتان با پیچیدگی‌های مدیریت وضعیت مقابله کنید. در این پست وبلاگ، نحوه شروع با React Query و نحوه استفاده از آن در پروژه های خود را به شما آموزش خواهیم داد.

مرحله 1: React Query را نصب کنید

اولین قدم برای استفاده از React Query نصب آن است. با اجرای دستور زیر در ترمینال خود می توانید این کار را انجام دهید:

npm install react-query

مرحله 2: React Query Provider را راه اندازی کنید

مرحله بعدی این است که React Query Provider را در برنامه خود راه اندازی کنید. این ارائه دهنده به شما امکان می دهد از React Query در سراسر برنامه خود استفاده کنید.

برای انجام این کار، باید برنامه خود را با کامپوننت QueryClientProvider بپیچید. این کامپوننت یک نمونه QueryClient را به عنوان یک پایه می گیرد. QueryClient شی اصلی است که برای تعامل با React Query از آن استفاده می کنید.

در اینجا مثالی از نحوه راه اندازی QueryClientProvider آورده شده است:

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      // Your application code goes here
    </QueryClientProvider>
  );
}

مرحله 3: واکشی داده ها با React Query

اکنون که QueryClientProvider را راه اندازی کرده اید، آماده شروع واکشی داده ها با React Query هستید. ساده ترین راه برای انجام این کار استفاده از قلاب useQuery است.

قلاب useQuery دو آرگومان می گیرد: یک کلید منحصر به فرد برای درخواست شما و یک تابع که داده های شما را واکشی می کند. در اینجا یک مثال است:

import { useQuery } from 'react-query';

function App() {
  const { isLoading, error, data } = useQuery('todos', () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then(res =>
      res.json()
    )
  );

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

  if (error) return <p>An error has occurred: {error.message}</p>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

در این مثال، ما داده‌ها را از JSONPlaceholder API واکشی می‌کنیم و آن‌ها را در یک لیست نمایش می‌دهیم.

مرحله 4: به روز رسانی داده ها با React Query

React Query همچنین به روز رسانی داده ها را در پاسخ به اقدامات کاربر آسان می کند. قلاب useMutation به شما امکان می دهد یک تابع جهش تعریف کنید که داده های شما را در سرور به روز می کند.

در اینجا مثالی از نحوه استفاده از useMutation آورده شده است:

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

function AddTodo() {
  const [text, setText] = useState('');
  const queryClient = useQueryClient();

  const addTodoMutation = useMutation(
    text =>
      fetch('https://jsonplaceholder.typicode.com/todos', {
        method: 'POST',
        body: JSON.stringify({
          title: text,
          completed: false,
          userId: 1,
        }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      }).then(res => res.json()),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('todos');
      },
    }
  );

  const handleSubmit = event => {
    event.preventDefault();
    addTodoMutation.mutate(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
<input
  type="text"
  value={text}
  onChange={event => setText(event.target.value)}
/>
<button disabled={addTodoMutation.isLoading}>Add Todo</button>
  </form>
  );
}

در این مثال، ما یک تابع جهش را تعریف می کنیم که یک کار جدید به API ما اضافه می کند. وقتی جهش موفقیت آمیز بود، کوئری todos را باطل می کنیم تا داده ها را دوباره واکشی کنیم و UI را به روز کنیم.

مرحله 5: ذخیره داده ها با React Query

یکی از قدرتمندترین ویژگی های React Query سیستم کش آن است. React Query به طور خودکار داده‌های شما را در حافظه پنهان ذخیره می‌کند و هنگام درخواست به API، آن‌ها را به‌روز نگه می‌دارد.

در اینجا مثالی از نحوه استفاده از کش با React Query آورده شده است:

import { useQuery } from 'react-query';

function App() {
  const { isLoading, error, data } = useQuery('todos', () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then(res =>
      res.json()
    )
  );

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

  if (error) return <p>An error has occurred: {error.message}</p>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

در این مثال، ما از همان قلاب useQuery مانند قبل استفاده می کنیم، اما اکنون React Query به طور خودکار داده های ما را کش می کند. وقتی درخواست‌های بعدی را برای داده‌های todos انجام می‌دهیم، React Query به جای درخواست جدید، داده‌های کش شده را برمی‌گرداند.

مرحله 6: نتیجه گیری

خودشه! اکنون یاد گرفته‌اید که چگونه React Query را شروع کنید و چگونه از آن برای واکشی، به‌روزرسانی و کش کردن داده‌ها در برنامه‌های React خود استفاده کنید.

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