نحوه مدیریت واکشی داده در React.js با استفاده از Tanstack Query

این ابزار فرآیند واکشی و ذخیره سازی کارآمد داده ها را در برنامه های React ساده می کند.

Tanstack Query، AKA React Query، یک کتابخانه محبوب برای واکشی داده ها در برنامه های React است. React Query فرآیند واکشی، کش کردن و به روز رسانی داده ها را در برنامه های کاربردی وب ساده می کند. در این مقاله استفاده از React Query برای مدیریت واکشی داده در برنامه React مورد بحث قرار خواهد گرفت.

نصب و راه اندازی React Query

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

npm i @tanstack/react-query

برای نصب آن با استفاده از yarn، دستور زیر را در ترمینال خود اجرا کنید:

yarn add @tanstack/react-query

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

QueryClient قطعه مرکزی React Query است. QueryClient تمام منطق واکشی و ذخیره اطلاعات را مدیریت می کند. کامپوننت QueryClientProvider QueryClient را به عنوان یک پایه می گیرد و آن را در دسترس بقیه برنامه های شما قرار می دهد.

برای استفاده از QueryClientProvider و QueryClient در برنامه خود، باید آنها را از کتابخانه @tanstack/react-query وارد کنید:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getEementd('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
)

درک useQuery Hook

قلاب useQuery تابعی است که توسط کتابخانه React Query ارائه شده است که داده ها را از یک سرور یا API واکشی می کند. یک شی با ویژگی های زیر را می پذیرد: queryKey (کلید پرس و جو) و queryFn (عملکردی که وعده ای را برمی گرداند که به داده هایی که می خواهید واکشی کنید حل می شود).

queryKey پرس و جو را مشخص می کند. باید برای هر پرس و جو در برنامه شما منحصر به فرد باشد. کلید می تواند هر مقداری باشد، مانند یک رشته، یک شی یا یک آرایه.

برای واکشی داده‌ها با استفاده از قلاب useQuery، باید آن را از کتابخانه @tanstack/react-query وارد کنید، یک queryKey ارسال کنید و از queryFn برای واکشی داده‌ها از یک API استفاده کنید.

مثلا:

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

function Home() {

  const postQuery = useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      const data = await response.data;
      return data;
    }
  })

  if( postQuery.isLoading ) return ( <h1>Loading....</h1>)
  if( postQuery.isError ) return (<h1>Error loading data!!!</h1>)
  
  return (
    <div>
      <h1>Home</h1>
      { postQuery.data.map( (item) => ( <p key={item.id}>{item.title}</p>)) }
    </div>
  )
}

export default Home;

قلاب useQuery یک شی را برمی گرداند که حاوی اطلاعات مربوط به پرس و جو است. شی postQuery شامل حالات isLoading، isError و isSuccess است. حالت های isLoading، isError و isSuccess چرخه حیات فرآیند بازیابی داده ها را مدیریت می کنند. ویژگی postQuery.data حاوی داده های واکشی شده از API است.

وضعیت isLoading یک مقدار بولی است که نشان می‌دهد آیا کوئری در حال بارگیری داده است یا خیر. هنگامی که وضعیت isLoading درست است، پرس و جو در حال انجام است و داده های درخواستی در دسترس نیستند.

وضعیت isError نیز یک مقدار بولی است که نشان می‌دهد آیا خطا در حین بازیابی داده رخ داده است یا خیر. وقتی isError درست است، پرس و جو در بازیابی داده ها شکست خورده است.

وضعیت isSuccess یک مقدار بولی است که نشان می دهد آیا پرس و جو با موفقیت داده ها را بازیابی کرده است یا خیر. وقتی isSuccess درست باشد، می توانید داده های بازیابی شده را در برنامه خود نمایش دهید.

توجه داشته باشید که می توانید با استفاده از queryFn به queryKey دسترسی داشته باشید. queryFn یک آرگومان واحد می گیرد. این آرگومان یک شی حاوی پارامترهای مورد نیاز برای درخواست API است. یکی از این پارامترها queryKey است.

مثلا:

useQuery({
    queryKey: ['posts'],
    queryFn: async (obj) => {
      console.log( obj.queryKey );
    }
  })

برخورد با داده های قدیمی

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

با استفاده از گزینه‌های staleTime و refetchInterval می‌توانید کنترل کنید که داده‌هایتان چقدر سریع بیات می‌شوند و فاصله زمانی بین هر درخواست واکشی خودکار. گزینه staleTime خاصیتی است که تعداد میلی‌ثانیه‌هایی را که داده‌های کش قبل از بیات شدن معتبر هستند، مشخص می‌کند.

گزینه refetchInterval یک ویژگی است که تعداد میلی ثانیه بین هر درخواست واکشی خودکار کتابخانه React Query را مشخص می کند.

مثلا:

useQuery({
  queryKey: ['...'],
  queryFn: () => {...},
  staleTime: 1000;
})

در این مثال، staleTime 1000 میلی ثانیه (1 ثانیه) است. داده‌های واکشی شده پس از 1 ثانیه بیات می‌شوند و سپس کتابخانه React Query درخواست واکشی دیگری را به API ارائه می‌کند.

در اینجا از گزینه refetchInterval برای کنترل فاصله زمانی بین هر درخواست واکشی خودکار استفاده می کنید:

useQuery({
  queryKey: ['...'],
  queryFn: () => {...},
  refetchInterval: 6000;
})

RefetchInterval 6000 میلی ثانیه (6 ثانیه) است. React Query به طور خودکار یک درخواست واکشی جدید برای به روز رسانی داده های ذخیره شده پس از 6 ثانیه راه اندازی می کند.

درک useMutation Hook

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

در زیر، ما یک جزء AddPost ایجاد کرده‌ایم که یک فرم را با یک فیلد ورودی و یک دکمه ارسال ارائه می‌کند. این جزء فرم از قلاب useMutation برای به‌روزرسانی وضعیت استفاده می‌کند:

import React from 'react'

function AddPost() {

    const[post, setPost] = React.useState({
        title: ""
    })

    function handleChange(event) {
        setPost( (prevState) => ({
            ...prevState,
            [event.target.name]: event.target.value
        }) )
    }

  return (
    <form onSubmit={handleSubmit}>
      <input 
 type="text" 
 placeholder='Add Title' 
 name='title' 
 onChange={handleChange} 
 value={post.title}
 />
      <button>Add Post</button>
    </form>
  )
}

export default AddPost;

داخل کامپوننت AddPost یک پست حالت است که به عنوان یک شی با یک ویژگی، عنوان، عمل می کند.

تابع handleChange هر زمان که کاربران در فیلدهای ورودی تایپ کنند، پست وضعیت را به روز می کند. پس از ایجاد کامپوننت AddPost، قلاب useMutation را وارد کرده و از آن برای به روز رسانی API استفاده می کنیم.

مثلا:

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

const newPostMutation = useMutation({
    mutationFn: async () => {
      const response = await axios.post('<https://jsonplaceholder.typicode.com/posts>', {
        title: post.title,
      });
      const data = response.data;
      return data;
    }
 })

قلاب useMutation درخواست HTTP را برای ایجاد یک پست جدید مدیریت می کند. ثابت newPostMutation تابع جهش و گزینه های پیکربندی آن را نشان می دهد.

mutationFn یک تابع ناهمزمان است که یک درخواست POST را به نقطه پایانی API ارسال می کند. درخواست شامل یک شی حاوی مقدار عنوان از شی پست است.

برای اجرای mutationFn، باید متد newPostMutation.mutate() را فراخوانی کنید:

const handleSubmit = async (event) => { 
  event.preventDefault();

  newPostMutation.mutate();
}

return (
    <form onSubmit={handleSubmit}>
      <input 
 type="text" 
 placeholder='Add Title' 
 name='title' 
 onChange={handleChange} 
 value={post.title}
 />
      <button>Add Post</button>
    </form>
  )
}

با ارسال فرم، تابع handleSubmit اجرا می شود. تابع handleSubmit یک تابع ناهمزمان است که تابع جهش newPostMutation.mutate() را راه اندازی می کند.

واکشی کارآمد داده با پرس و جوی Tanstack

این مقاله به بررسی نحوه مدیریت واکشی داده در یک برنامه React با استفاده از کتابخانه tanstack/react-query می پردازد.

کتابخانه tanstack/react-query ابزاری قدرتمند و انعطاف پذیر برای واکشی و ذخیره سازی داده ها در برنامه های React فراهم می کند. استفاده از آن آسان است و قابلیت های کش آن باعث کارآمد و پاسخگو می شود.

چه در حال ساخت یک پروژه شخصی کوچک یا یک برنامه کاربردی سازمانی گسترده باشید، کتابخانه tanstack/react-query می تواند به شما در مدیریت و نمایش داده ها به طور موثر و کارآمد کمک کند. همراه با React، Next.js چندین فرآیند داخلی و کتابخانه های شخص ثالث را برای مدیریت واکشی داده ها ارائه می کند.

منبع مقاله