작성
·
263
0
"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
는 잘 작동합니다
답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다.
i1004gy님의 질문에 대한 내용을 검토해 보았으며, useQuery
관련 오류가 발생하는 상황에 대해 답변드리겠습니다.
먼저, 제공해주신 정보를 바탕으로 useQuery
를 사용할 때 발생하는 오류는 두 가지 일반적인 원인으로 인해 발생할 수 있습니다.
1. 서버에서의 응답 처리: getPostRecommends
함수에서 서버로부터의 응답이 정상적이지 않아 (res.ok
가 false
일 때) 에러를 발생시키는 경우입니다. 이는 네트워크 문제뿐만 아니라 데이터의 형식이 예상과 다르거나 서버에서 처리 중 발생한 문제일 수 있습니다.
2. React Query 사용 방식: useQuery
와 queryClient.prefetchQuery
의 사용 방식에 문제가 없는지 확인해야 합니다. 특히 useQuery
의 옵션으로 주어진 staleTime
, gcTime
설정이 적절한지 검토해볼 필요가 있습니다. 이 설정들이 캐싱과 데이터 갱신 주기에 영향을 줍니다.
i1004gy님께서 언급하신 queryClient.prefetchQuery
가 정상적으로 작동한다면, 문제는 useQuery
에서의 데이터 사용 방식 또는 서버 응답 처리에 있을 가능성이 높습니다.
이런 상황에서 참고할 만한 유사 질문 및 답변은 다음과 같습니다:
- “tanstack query 타입 지정”에서는 useQuery
의 사용 예와 타입 지정에 관한 내용이 다루어져 있습니다. 여기서는 타입스크립트를 사용한 타입 지정에 초점을 맞추고 있으니, 문제 상황과 직접적인 연관은 적을 수 있습니다.
이 경우와 유사한 상황이지만, 정확한 에러 메시지나 오류 내용을 파악하지 못하는 상황입니다. 따라서, 추가적인 디버깅이 필요할 수 있습니다. 다음과 같은 점검 사항을 고려해보시기 바랍니다.
- 서버 응답이 정상적인 JSON 형태인지 확인
- 네트워크 탭에서 실제 요청과 응답을 검토
- React Query의 오류 핸들링이 적절히 이루어지고 있는지 검토
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
관리자 텝에서 확인해보니 cors문제여서 mock 설정 확인해서 해결했습니다 감사합니다