[React][React-Query] React-Query를 통해 fallback을 구현해 보자

목차

 

리액트 라우터와 함께 react-query로 fallback을 구현하는 방법에 대해 알아보자

아래 라우터의 기본적인 사용방법이 나와있다..

참고

https://be-senior-developer.tistory.com/180

[React][Tanstack Query] 개념과 활용 방법에 대해 알아보자

 

fallback이란?

어떤 기능이 약해지거나 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작을 말한다. fallback은 api 호출시 발생하는 예외처리를 위한 클래스를 정의한다. 실패에 대해서 후처리를 위해 설정해 두는 method이다.

fallback시 대체 화면

 

단일 쿼리 데이터 fallback

import { defer } from "react-router-dom";
import { queryClient } from "../../util/http";
import EventsList from "../components/EventsList";
import { loadEvents } from "../../util/http";
import { useSuspenseQuery } from "@tanstack/react-query";
import { QueryErrorBoundary } from "@suspensive/react-query";
function EventsPage() {
  //캐쉬된 데이터가 사용됨
  const { data } = useSuspenseQuery({
    queryKey: ["events"],
    queryFn: loadEvents,
    staleTime: 10000,
  });

  return (
  //쿼리 에러가 발생하거나 로딩 fallback시에 사용된다. -> 쿼리의 유용한 Suspense대체
    <QueryErrorBoundary
      fallback={<p style={{ textAlign: "center" }}>Loading...</p>}
    >
      <EventsList events={data} />
    </QueryErrorBoundary>
  );
}

export default EventsPage;

export function loader() {
  //데이터 캐쉬
  //defer를 쓰지 않으면 오류에 걸린다.
  return defer(
    queryClient.fetchQuery({
      queryKey: ["events"],
      queryFn: loadEvents,
    })
  );
}

 

다중 쿼리 데이터 fallback

import { json, redirect, defer } from "react-router-dom";
import { QueryErrorBoundary } from "@suspensive/react-query";
import EventItem from "../components/EventItem";
import EventsList from "../components/EventsList";
import { getAuthToken } from "../../util/auth";
import { loadEvent, queryClient } from "../../util/http";
import { loadEvents } from "../../util/http";
import { useSuspenseQueries } from "@tanstack/react-query";
import { useParams } from "react-router-dom";

function EventDetailPage() {
  //const { event, events } = useRouteLoaderData("event-detail");
  const params = useParams();
  
  //여러개의 데이터 쿼리를 받기 때문에 useSuspenseQueries를 사용하자
  const [query1, query2] = useSuspenseQueries({
    queries: [
      {
        queryKey: ["events", { id: params.eventId }],
        queryFn: loadEvent(params.eventId),
      },
      {
        queryKey: ["events"],
        queryFn: loadEvents(),
      },
    ],
  });

  return (
    <>
      <QueryErrorBoundary fallback={<p style={{ textAlign: "center" }}>Loading...</p>}>
        <EventItem event={query1.data} />
      </QueryErrorBoundary>
      <QueryErrorBoundary fallback={<p style={{ textAlign: "center" }}>Loading...</p>}>
        <EventsList events={query2.data} />
      </QueryErrorBoundary>
    </>
  );
}

export default EventDetailPage;


export async function loader({ request, params }) {
  const id = params.eventId;

  return defer({
  //await를 통해 먼저 로딩될 데이터를 기다려 준다.
    event: await queryClient.fetchQuery({
      queryKey: ["events", { id: id }],
      queryFn: () => loadEvent(id),
    }),
    // 그 후 로딩될 데이터
    events: queryClient.fetchQuery({
      queryKey: ["events"],
      queryFn: loadEvents,
    }),
  });
}

 

이렇게 fallback을 구현하고 테스트하고 싶은데 확인을 하고 싶다면 다음과 같이 해보자

 

fallback 시각적 확인 방법

 

1. 네트워크 탭에 들어간다.

 

2. 느린 4g 설정 (이것보다 더 정확히 확인하고 싶다면 다음과 같이 커스텀 네트워크를 추가해주자)

 

3. 추가에 들어가서 다음과 같이 입력해 준다.