- Caching... (possibly the hardest thing to do in programming)
- Deduping multiple requests for the same data into a single request
- Updating "out of date" data in the background
- Knowing when data is "out of date"
- Reflecting updates to data as quickly as possible
- Performance optimizations like pagination and lazy loading data
- Managing memory and garbage collection of server state
- Memoizing query results with structural sharing

const result = await context.queryClient.ensureQueryData(authQueries);
const parsedResult = AuthStatusTypeSchema.safeParse(result);
if (!parsedResult.success) {
  return {
    isAuthenticated: false,
    userInfo: {
      message: "로그인이 필요합니다.",
      role: "guest",
      nickname: "",
      duck: 0,
    },
  };
}

function TodoList() {
  const { data } = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
    // 선언적 캐싱 설정
    gcTime: 5 * 60 * 1000, // 5분
    staleTime: 30 * 1000, // 30초
    retry: 3, // 실패시 3번 재시도
    refetchOnMount: true, // 컴포넌트 마운트시 재요청
    refetchOnWindowFocus: true, // 윈도우 포커스시 재요청
  });
}

const prefetchNextPage = async (currentPage) => {
  const nextPage = currentPage + 1;
  // 다음 페이지 데이터를 미리 가져와서 캐시에 저장
  await queryClient.prefetchQuery({
    queryKey: ["items", nextPage],
    queryFn: () => fetchItems(nextPage),
    staleTime: 30 * 1000, // 30초 동안 신선한 상태 유지
  });
};

// 특정 조건에 따른 캐시 무효화
const invalidateMatchingQueries = async (category) => {
  await queryClient.invalidateQueries({
    predicate: (query) =>
      query.queryKey[0] === "items" && query.queryKey[1].category === category,
  });
};

// tanstack query
const { data } = useSuspenseQuery({
  queryKey: bettingRoomQueryKey(roomId),
  queryFn: () => getBettingRoomInfo(roomId),
  staleTime: 1000 * 60 * 5, // ttl 시간을 설정
});

// swr
const { data, error } = useSWR("/api/data", fetcher, {
  refreshInterval: 3000, // ttl 시간을 설정
});

component: () => (
  <QueryClientProvider client={queryClient}>
       {" "}
    <LayoutProvider>
             {" "}
      <RootLayout>
                  <RootHeader />
                  <RootSideBar />
                  <Outlet />       {" "}
      </RootLayout>
         {" "}
    </LayoutProvider>
     {" "}
  </QueryClientProvider>
);