استفاده از React Query

یکی از قسمت های اصلی هر پروژه فرانت‌اندی اینه که بلد باشیم چطور requestها رو هندل کنیم.

به طور معمول میشه با axios یا fetch ریکوست ها رو هندل کرد ولی می دونیم که یکی از کارهایی که لازمه انجام بدیم اینه که توی پروژه‌مون وضعیت های مختلف ریکوست رو داشته باشیم یا data رو cache کنیم که بتونیم یه مقدار پیش‌فرض موقع mount شدن صفحه داشته باشیم و کارهای دیگه‌ای که توی پروژه نیازه با API ها انجام بدیم.

خب React Query ساخته شده که این کارها رو برامون آسون‌تر کنه، قابلیت‌هایی داره که خیلی مدیریت request ها رو راحت‌تر می‌کنه،‌ مثلا پارامتری با عنوان state برمی‌گردونه که وضعیت درخواست رو توی خودش داره یا پارامتر data رو داره که response دریافتی رو میشه ازش کشید بیرون و به صورت خودکار هم data رو cache می‌کنه.

حالا چطور میشه ازش استفاده کرد؟

نصب

واسه نصب این package با npm دستور زیر رو لازمه توی پروژه‌تون وارد کنید:

$ npm i @tanstack/react-query
# or
$ yarn add @tanstack/react-query

همچنین می‌تونین CDN اون رو به پروژه‌تون اضافه کنید:

<script src=&quothttps://unpkg.com/react-query/dist/react-query.production.min.js&quot>

یه چیزی!‌ این CDN رو سایت رسمی‌ش منتشر کرده ولی مشکل داره فعلا و بالا نمیاد! به جاش میتونین از CDN پایین استفاده کنین:

<script src=&quothttps://unpkg.com/@tanstack/react-query&quot>

همچنین میتونید devtools ی که خود سایت رسمی‌ش معرفی کنه رو با کامند های زیر نصب کنید که بتونید وضعیت ریکوست هایی که ارسال میشه رو پیگیری کنید:

$ npm i @tanstack/react-query-devtools
# or
$ yarn add @tanstack/react-query-devtools

راه‌اندازی

قبل از هر کاری لازمه یه client بسازیم و به پروژه معرفی‌ش کنیم:

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
    },
  },
});

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
        <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

دو تا option که معمولا خودم توی پروژه هام ازش استفاده می‌کنم یکی refetchOnWindowFocus: false که وقتی توی مرورگر میایم روی تب‌ِ پروژه ‌مون دوباره دیتایی که قبلا گرفته رو اپدیت نمی‌کنه و یکی retry: false که وقتی درخواستی fail بشه دوباره براش ریکوست‌ نمی‌ده.

واسه اضافه کردن devtools توی مودdevelopmentمی‌تونید به شکل زیر عمل کنید:

import ReactDOM from 'react-dom'; 
import App from './App';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';

const queryClient = new QueryClient({
   defaultOptions: {
     queries: { 
      refetchOnWindowFocus: false,
       retry: false,
     },
   },
 });
ReactDOM.render( 
  <QueryClientProvider client={queryClient}>
         <App /> 
         { process.env.NODE_ENV === 'development' && (
              <ReactQueryDevtools initialIsOpen={false} /> )}
  </QueryClientProvider>,   document.getElementById('root')
 );

نحوه استفاده

به طور کلی این دو پکیج دو تا هوک اصلی داره که می‌تونید بنا به استفاده‌ای که دارین از یکی از اینها یا هر دو استفاده کنید که در ادامه درباره هر کدوم به صورت مجزا صحبت می‌کنیم:

useQuery:

واسه مواردی مثل هندل کردن pagination، گرفتن دیتایی که موقع رندر اولیه نیاز بهشون داریم و موارد مشابه از این هوک استفاده می‌کنیم، این هوک حداقل دو تا پارامتر داره که لازمه ست بشن، queryKeyو queryFn.پارامتر queryKey که میتونه یه string یا یه آرایه باشه، درواقع کلیدیه که دیتای ریسپانس برای اون کلید cache میشه بنابراین اگه جای دیگه‌ از پروژه به دیتای cache شده این ریکوست توی useQueryتون نیاز دارید کافیه همین queryKey رو براش بذارید تا تو هر دو کامپوننت به اون دیتا دسترسی داشته باشید و مورد دیگه ای که به queryKey مربوط میشه اینه که ماهیتی مثل useEffect dependency ها داره یعنی اگه کلید‌تون تغییر کنه دوباره ریکوست ارسال میشه که خاصیتی‌ه که به ما کمک می‌کنه از این هوک واسه هندل کردن pagination پروژه استفاده کنیم به این صورت که page رو هم به عنوان یه key در نظر می‌گیریم. پارامتر دوم ‌queryFn ه که لازمه یه تابع باشه که یهPromiseرو برگردونه.

import { useQuery } from '@tanstack/react-query-devtools'
...
function Example() {
const queryClient = useQueryClient()
const [page, setPage] = React.useState(0)
const { status, data, error } = useQuery( ['projects', page],
    () => fetchProjects(page)
)
...

همون‌طور که مشاهده می‌کنید پارامتر اول این هوک ['projects', page] و پارامتر دوم () => fetchProjects(page) هست.

نمونه کامل مثال بالا رو میتونید توی سایت اصلی این پکیج ببینید:
https://tanstack.com/query/v4/docs/examples/react/pagination

useMutation:

کاربرد این هوک برای مواردی مثل ذخیره اطلاعات یه فرم، ارسال درخواست حذف و در کل مواردی هست که لازمه ریکوست به صورت دستی ارسال بشه. پارامتر اصلی که این هوک لازم داره mutationFnاست، که لازمه یه تابع که یه Promise رو برمیگردونه بهش پاس داده بشه. نکته‌ای که درباره‌ی این تابع هست اینه که شما فقط میتونید یه پارامتر براش ست کنید و اگه خواستید پارامتر بیشتری واسش تعریف کنید لازمه اون رو به صورت Object تعریف کنید.

لازمه بدونید که این هوک دو تا تابع بهتون میده با نام های mutateو mutateAsync که واسه ارسال ریکوست لازمه این ها رو کال کنید، از اسمشون معلومه که برای ریکوست های Async لازمه از mutateAsync استفاده کنید!

...
import { postTodo } from '../my-api'
...
function Todos() {
// Access the client
const queryClient = useQueryClient()
//Mutations
const mutation = useMutation(postTodo)
...

نمونه کامل مثال بالا رو میتونید توی سایت اصلی این پکیج ببینید:
https://tanstack.com/query/v4/docs/quick-start

در پایان

پکیج react query یکی از پکیج های شناخته شده و پرطرفدار react‌ هست و قول میدم بهتون که بعد استفاده ازش حتما ازش خوشتون میاد و یکی از پکیج های خواهد بود که همون ابتدای پروژه نصبش می‌کنید.

موفق باشید!