인프런 커뮤니티 질문&답변

"use client";
import { useQuery } from "@tanstack/react-query";
import { getPostRecommends } from "@/app/(afterLogin)/home/_lib/getPostRecommends";
import Post from "@/app/(afterLogin)/_component/Post";
import { Post as IPost } from "@/model/Post";

export default function PostRecommends() {
  const { data, error, isLoading } = useQuery<IPost[]>({
    queryKey: ["posts", "recommends"],
    queryFn: getPostRecommends,
    // gcTime은 staleTime보다 길어야한다
    staleTime: 5 * 1000, // 새로 가져온 데이터를 몇 초 후에 fresh에서 stale로 바꿀 것인지
    gcTime: 300 * 1000,
  });
  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Failed to load posts</div>;
  }
  return data?.map((post) => <Post key={post.postId} post={post} />);
}

react query에서 에러가 발생합니다 이유는 모르겠지만 useQuery부분에서 에러가 발생하는 것 같습니다

getPostRecommend.ts는 이렇게 작성한 상태입니다

export async function getPostRecommends() {
  const res = await fetch(`http://localhost:9090/api/postRecommends`, {
    next: {
      tags: ["posts", "recommends"],
    },
    //캐시를 저장하라고 지정하는 태그
    // 너무 강력하게 캐싱을 하면 새로운 데이터가 안불러와 질 수 있다
    // 이런 일을 방지하기위해 새로고침을 해야하는 이때 tags를 사용한다
  });
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error("Failed to fetch data");
  }
  // 이렇게 하면 recommends를 키로 가지고 있는 서버에 있는 캐시가 날아감
  // revalidateTag("recommends")
  // home으로 온 요청이 왔을때 페이지 전체의 캐시를 새로고침한다
  // revalidatePath('/home')
  return res.json();
}

근데 getPostRecoomed.ts가 잘못된거 같지는 않은것이

처음 작동하는 queryClient.prefetchQuery는 잘 작동합니다