پرس و جو واکنش نشان دهید، شخصی سازی کنید. – انجمن DEV

Summarize this content to 400 words in Persian Lang
در برنامه های React، معمولا نیاز به دسترسی به داده ها از یک API خارجی است. به طور سنتی، بسیاری از توسعه‌دهندگان از روش‌های بومی جاوا اسکریپت مانند واکشی کامپوننت‌های داخلی استفاده می‌کنند که می‌تواند منجر به مشکلات مدیریت وضعیت و مدیریت عوارض جانبی پیچیده شود. اینجاست که React Query وارد عمل می شود.

React Query چیست؟

React Query کتابخانه ای است که برای ساده سازی عملیات واکشی و مدیریت داده ها در React طراحی شده است. ویژگی های قدرتمندی را ارائه می دهد:

درخواست داده از یک API.ذخیره و همگام سازی وضعیت رابط کاربری با داده ها.به طور خودکار حافظه پنهان را بازیابی و مدیریت کنید.هوک سفارشی ما

در مرحله بعد، بیایید به قلاب سفارشی خود، useCustomQuery نگاه کنیم:

import { useQuery } from ‘@tanstack/react-query’;

export type GenericObject = {
[key: string]: any;
};

export type QueryFunction = (
url: string,
token?: string,
) => Promise<GenericObject>;

export const useCustomQuery = (
queryFunction: QueryFunction,
url: string,
queryKey: string[],
token?: string,
) => {
const { isPending, isError, data, error, refetch, isLoading } = useQuery<
GenericObject | GenericObject[] >({
queryKey: [queryKey],
queryFn: () => queryFunction(url, token),
});

return { data, error, isError, isPending, refetch, isLoading };
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خرابی هوک

GenericObject y QueryFunction:

ما انواع عمومی را تعریف می کنیم که کار با اشیاء و توابعی را که واکشی داده را انجام می دهند آسان تر می کند. این تضمین می کند که کد ما می تواند با ساختارهای داده متفاوتی که ممکن است توسط API ها برگردانده شوند، سازگار شود.

useQuery:

ما از قلاب useQuery React Query استفاده می کنیم که به طور خودکار وضعیت درخواست های ما را کنترل می کند. ویژگی های مفیدی را برای رسیدگی به بارگذاری داده ها، خطاها و جابجایی مجدد ارائه می دهد.

این باعث بهبود کیفیت کد و کاهش باگ ها می شود.رابط های عمومی: با استفاده از رابط های عمومی، می توانیم ساختارهای داده ای را تعریف کنیم که با موقعیت های مختلف سازگار شوند. این باعث می شود کد قابل استفاده مجدد تر و نگهداری آسان تر باشد.مستندسازی بهتر: استفاده از TypeScript به عنوان ابزار مستندسازی ارائه شده توسط انواع، درک نحوه استفاده از توابع و نوع داده مورد انتظار را بهبود می بخشد.

لینک های مفید

React Query:

TypeScript:

GitHub de React Query:

نمونه ها و آموزش ها:

نتیجه گیری

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

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

export type GenericObject = {
  [key: string]: any;
};

export type QueryFunction = (
  url: string,
  token?: string,
) => Promise<GenericObject>;

export const useCustomQuery = (
  queryFunction: QueryFunction,
  url: string,
  queryKey: string[],
  token?: string,
) => {
  const { isPending, isError, data, error, refetch, isLoading } = useQuery<
    GenericObject | GenericObject[]
  >({
    queryKey: [queryKey],
    queryFn: () => queryFunction(url, token),
  });

  return { data, error, isError, isPending, refetch, isLoading };
};