رفتارها و تنظیمات پیشفرض React Query

تو این مقاله میخواهیم بطور کامل رفتارها و تنظیمات پیشفرض React Query را برسی کنیم. ری اکت کوئری این تنظیمات و رفتارهای پیشفرض را تهاجمی اما هوشمند مینامه و میگه این رفتارهای پیشفرض خیلی جاها ممکنه باعث حله مشکلات بشه یا کاربرا رو در قالب چندتا فیچر غافلگیر کنه.

همچنین این تنظیمات و رفتارهای پیشفرض ری اکت کوئری را در دوره آموزش React Query هم بطور کامل توضیح  دادیم و در این دوره میتونید بصورت عملی و ویدیویی این تنظیمات را مشاهده کنید.

چطور تنظیمات React Query را دستکاری کنیم ؟

برای اعمال یکسری تغییرات و دستکاری تنظیمات ری اکت کوئری میتونیم به 2 شکل عمل کنیم، هم بصورت کلی و هم بصورت تکی.

اعمال تنظیمات بصورت کلی

برای دستکاری تنظیمات پیشفرض و یا بطور کل اعمال یکسری تنظیمات بصورت عمومی باید بریم سراغ QueryClient :

import "@/styles/globals.css";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

const client = new QueryClient({
 // کانفیگ های مدنظر
});

export default function App({ Component, pageProps }) {
  return (
    <QueryClientProvider client={client}>
      // کامپوننت اصلی app
    </QueryClientProvider>
  );
}

اعمال تنظیمات بصورت تکی

برای اعمال یکسری تنظیمات بصورت تکی و برای هربار استفادمون از هوک ها هم که میریم سراغ هوک مدنظر و تنظیمات مدنظر را به عنوان پارامترهای ورودی به هوک پاس میدیم:

const HomePage = () => {
  const {} = useQuery({
    // پارامترها و تنظیمات مدنظر
});

  return <p>Home</p>;
};

export default HomePage;

تنظیمات و رفتارهای پیشفرض React Query چیا هستن ؟

بریم سراغ رفتارها و تنظیمات پیشفرضی که روی ری اکت کوئری اعمال شدن و تک تک اونهارو باهم دیگه ببینیم.

staleTime

پارامتری به نام staleTime توی توی هوک هایی مثل useQuery و یا useInfiniteQuery در ری اکت کوئری وجود داره که مقدار پیشفرض برابر با 0 هستش. این عدد به ری اکت کوئری میگه تا چند دقیقه مجاز به استفاده از حافظه cache هست.

اگر این مقدار مساوی 0 باشه، ری اکت کوئری دیتای موجود در حافظه cache را کهنه در نظر میگیره و بهش اعتنایی نمیکنه و http request مارو میزنه و دیتای تازه رو از سرور دریافت میکنه. اما اگر این مقدار مساوی عددی غیر از صفر مثلا 10000 باشه که به معنای ده هزار میلی ثانیه یا به عبارتی ده ثانیه هستش، ری اکت کوئری تا ده ثانیه به همین دیتای توی cache اکتفا میکنه و صرفا دیتای موجود در حافظه cache را به کاربر نشون میده و دیگه http request به سمت سرور نمیزنه.

refetch در حالت های مختلف

یکسری زمان ها هست که ری اکت کوئری تصمیم میگیره بطور خودکار query های مارو مجددا fetch کنه ( منظور از refetch زدن یک ریکوئست مجدد به سمت سرور هستش ) که این حالت هارو میتونیم در زیر ببینیم:

• refetchOnWindowFocus: که درصورتی که کاربر بین تب ها یا مرورگر و یک برنامه دیگه جابجا بشه، به محض برگشتش به وبسایت ما، ری اکت کوئری بطور خودکار query هارو refetch میکنه. برای غیرفعال کردن این بخش باید refetchOnWindowFocus را مساوی false قرار بدیم.
• refetchOnReconnect: زمانیکه نت کاربر قطع بشه و بعد مجدد وصل بشه، به محض اتصال کاربر به اینترنت، ری اکت کوئری query هارو refetch میکنه.

مدت زمان نگه داری حافظه کش

ری اکت کوئری بطور پیشفرض دیتاهای کش شده را به مدت 5 دقیقه در حافظه کش نگه داری میکنه و درصورتی که تا مدت 5 دقیقه، هیچ query دیگه ایی با مشخصات کش ایجاد نشه، حافظه کش شده پاکسازی میشه. برای تغییر این زمان در نسخه 5 از react query باید یک مقداری را با واحد میلی ثانیه به پارامتر gcTime بدیم و در نسخه های قبل از 5 هم به پارامتر cacheTime

retry و retryDelay

react query بطور پیشفرض اگر یک query به ارور بخوره، میاد 3 بار اون query را با یک تاخیر کوتاهی refetch میکنه. یعنی چی ؟ یعنی اگر شما یکی از useQuery هاتون به ارور بخوره، ری اکت کوئری قبل از برگرداندن ارور، 3 بار دیگه اون useQuery را اجرا میکنه و اگر عینه 3 بار تکرار به ارور بخوره، اونوقت میاد و ارور رو به کاربر نشون میده.

برای تغییر این رفتار کافیه retry را مساوی false یا عدد دلخواه قرار بدیم.

اشتراک گذاری ساختاریه داده ها

ری اکت کوئری نتیجه query هارو بطور ساختاری به اشتراک میگذاره تا بتونه تشخیص بده چه زمانی واقعا دیتا تغییر میکنه. ری اکت کوئری برای این قسمت میگه که اگر بنظرتون عجیب میاد این موضوع، نیاز به هیچ نگرانی نیست چراکه این قسمت در 99.99% مواقع به بهترین شکل ممکن کار میکنه و تماما منفعته بدون ضرر هست برای اپلیکیشن شما.

اما اگر حس کردید که داره بد کار میکنه یا بخشی از برنامه شما بشدت سنگین و کند عمل میکنه، کافیه که structuralSharing  را مساوی false قرار بدید.