현재 상황

이벤트 대기 페이지

대기큐 페이지

예매 페이지

3개의 페이지에서 이벤트에 대한 정보를 사용하기 위해서 eventDetail api를 요청하고 있다. 하지만 이 데이터는 static한 데이터이고 변경될 여지가 없어서 매번 호출할 필요가 없다. 그래서 tanstack query 의 cache 기능으로 처음 호출된 데이터를 계속 사용한다. tanstack query의 data 상태에는 fresh, stale, inactive 상태가 있다. 여기서 데이터 상태가 fresh 하다면 tanstack query는 같은 api에 대해서 재요청이 들어와도 캐싱된 데이터를 바로 반환해준다.

처음에 api 요청 후 받은 데이터를 어떻게 fresh 한 상태로 가지고 있을까?

• staleTime을 통해서 데이터를 얼마동안 fresh한 상태로 가지고 있을지 설정 할 수 있다.
• staleTime 은 queryClient 설정시 할 수 있고, useQuery와 같이 api 요청시에도 할 수 있다.

import { QueryClient } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity, //이 queryClient를 사용한 요청은
											     //  staleTime이 inifinity가 default 설정 된다.
											     // default 설정은 
    },
  },
})

useQuery({queryKey:[....], queryFn:... , staleTime:staleTime 설정}

ReactQuery에서는 어떻게 같은 요청을 구분할까?

• reactquery에서는 queryKey를 통해서 같은 요청을 구분할 수 있다.

페이지 적용된 코드

//page.tsx
...
const eventDetailData= useSuspenseQuery({ queryKey:['event', eventId], queryFn:api, stailTime:Infinity})
...
//같은 이벤트에 대해서 처음 호출된 데이터를 공유할 수 있다. 

Navbar에서 예매 내역 관리