React Query – Infinite Queries

هی مردم،

امروز وقت آن است که یاد بگیرید چگونه می توانید یک پرس و جو بی نهایت با React Query بسازید.

برای ساخت یک پرس و جو بی نهایت باید از آن استفاده کنید useInfiniteQuery قلاب. این قلاب شبیه به useQuery اما با چند ویژگی بیشتر برای مدیریت بارگذاری بی نهایت به بهترین شکل.

مفاهیم کلیدی، اگر با آنها کار می کنید useInfiniteQuery هستند:

• کلید : در این مورد، کلید برای هر صفحه منحصر به فرد است، useInfiniteQuery تمام صفحات داخل حالت خود را کنترل می کند

• صفحه : هر تکه از پرس و جو بی نهایت شما به عنوان یک صفحه نمایش داده می شود و صفحه اول توسط آن بازگردانده می شود useInfiniteQuery تعریف نشده است این به شما کمک می کند تا بفهمید که آیا این اولین تکرار است یا خیر.

• دارای NextPage : متغیری است که توسط هوک برگردانده می شود و دامنه آن تعیین اینکه آیا یک قطعه دیگر وجود دارد یا خیر است.

• fetchNextPage : تابعی است که برای واکشی تکه بعدی استفاده می شود

• در حال بارگذاری است : پرچمی است که تعیین می کند آیا بارگیری در حال انجام است (پرسمان هنوز داده ای ندارد)

• در حال واکشی است : پرچمی است که تعیین می کند آیا درخواست واکشی در حال انجام است یا خیر

• getNextPageParam : این تابع گزینه ای برای عبور در هوک است و برای تعیین اینکه آیا پس از پاسخ قطعه دیگری وجود دارد یا نه استفاده می شود.

خوب، بگذارید کد را واضح تر ببینیم

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

const fetchTodos = async (
  page: number,
  limit: number,
  signal: AbortSignal | undefined
): Promise<{
  totals: number;
  todos: Todo[];
}> => {
  const response = await fetch(`api/tasks?_page=${page + 1}&_limit=${limit}`, {
    signal,
  });
  if (!response.ok) {
    throw new ResponseError('Failed to fetch todos', response);
  }
  const todos: Todo[] = await response.json();
  const totals = Number.parseInt(
    response.headers.get('x-total-count') || '0',
    10
  );

  return {
    totals,
    todos,
  };
};

interface UseTodos {
  todos: Todo[];
  isLoading: boolean;
  isFetching: boolean;
  error?: string;
  hasNext: boolean;
  next?: () => void;
}

export const useTodos = (): UseTodos => {
  const [limit] = useState<number>(5);

  const { data, hasNextPage, fetchNextPage, isLoading, isFetching, error } =
    useInfiniteQuery(
      [QUERY_KEY.todos],
      ({ signal, pageParam: page = 0 }) => fetchTodos(page, limit, signal),
      {
        refetchOnWindowFocus: false,
        retry: 2,
        getNextPageParam: (lastPage, pages) => {
          if (Math.ceil(lastPage.totals / limit) > pages.length)
            return pages.length;
          return undefined;
        },
      }
    );

  return {
    todos: data?.pages.flatMap(({ todos }) => todos) || [],
    isLoading,
    isFetching,
    error: mapError(error),
    next: fetchNextPage,
    hasNext: hasNextPage || false,
  };
};

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

نکته مهم دیگری که باید در نظر داشت این است که نتیجه useInfiniteQuery یک آرایه است و هر عنصر آرایه حاوی داده های هر تکه است.

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

https://www.youtube.com/watch?v=F1KD4GY1iws

من فکر می کنم این همه از این مقاله است.

این آخرین پست این مجموعه است، امیدوارم از مطالب لذت برده باشید و اکنون از استفاده از ReactQuery در برنامه React خود مطلع شده باشید.

به زودی می بینمت مردم

بای بای 👋

ps می توانید کد ویدیو را پیدا کنید اینجا

عکس راهول میشرا در Unsplash