리액트쿼리 어떤부분이 잘못되었을까요?
안녕하세요.
인피니티스크롤 을 따라하는데 잘안되서요.
const queryClient = new QueryClient();
await queryClient.prefetchInfiniteQuery({
queryKey: ["member", "sales", sawonCode],
queryFn: getSales,
initialPageParam: 0,
})
const dehydratedState = dehydrate(queryClient);
return <>
<Suspense fallback={<Loading />}>
<HydrationBoundary state={dehydratedState}>
<SalesList sawonCode={sawonCode} />
</HydrationBoundary>
</Suspense>
</>const {
data,
fetchNextPage,
hasNextPage,
isFetching,
} = useInfiniteQuery<Item[], Object, InfiniteData<Item[]>, [_1: string, _2: string, _3: number], number>({
queryKey: ["member", "sales", sawonCode],
queryFn: getSales,
initialPageParam: 0,
getNextPageParam: (lastPage) => lastPage.at(-1)?.page,
staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준
gcTime: 300 * 1000,
});
const { ref, inView } = useInView({
threshold: 0,
delay: 0,
});
useEffect(() => {
if(inView) {
console.log(data);
!isFetching && hasNextPage && fetchNextPage();
}
}, [inView, isFetching, hasNextPage, fetchNextPage]);useEffect에 콘솔에찍은 data는 undefined 이 찍히고 그후에 getSales에 찍은 api 로 가져온 데이터가 찍힙니다.
어떤게 잘못되서 data에 값이 안들어가는지 몇시간을 봐도 잘모르겠네요..ㅜㅜ
답변 1
0
data도 useEffect deps 배열에 넣으셔야 콘솔로그 찍힙니다.
0
늦은시간에 빠른 답변까지 정말 감사합니다. ㅜㅜ
콘솔에 undefind가 찍힌것보다 data, fetchNextPage, hasNextPage, isFetching, 값들이 변하질않아 아무것도 출력을 못해서 혹시 다른데 뭘 수정이나 추가해야할부분들이 있을까해서 문의 드립니다. 감사합니다.
0
const {
data,
fetchNextPage,
hasNextPage,
isFetching,
} = useInfiniteQuery<Item[], Object, InfiniteData<Item[]>, [_1: string, _2: string, _3: number], number>({
queryKey: ["member", "sales", sawonCode],
queryFn: getSales,
initialPageParam: 0,
getNextPageParam: (lastPage) => lastPage.at(-1)?.page,
staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준
gcTime: 300 * 1000,
});
const { ref, inView } = useInView({
threshold: 0,
delay: 0,
});
useEffect(() => {
if(inView) {
console.log(data);
!isFetching && hasNextPage && fetchNextPage();
}
}, [inView, isFetching, hasNextPage, fetchNextPage]);getSales에서 결과값을 받았는데 아무런 변화가 없어서요... ㅜㅜ
0
type Props = { pageParam?: number, queryKey: any };
export async function getSales({pageParam, queryKey}: Props) {
const [_1, _2, sawonCode] = queryKey;
const res = await fetch(`/api/mobile/sales-list?page=${pageParam}&sawonCode=${queryKey[2]}`, {
next: {
tags: ["member", "sales"],
},
});
const data = await res.json();
if (!res.ok) {
throw new Error('Failed to fetch data')
}
console.log(data);
return data;
}getSales 이고요
이렇게 나옵니다.
1
ㅜㅜ 감사합니다.
제가만든 api형식이 다른게 나간다라는걸... page는 마지막페이지번호를 넣어서 해결했습니다.
아직미흡하지만 좀 더 하다보면 좋아지겠죠.
답변 정말 감사드립니다. 이제 젠킨스만 남았네요.. ^^
캡처링부분 질문있습니다.
0
74
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
109
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
130
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
171
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
108
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
131
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
97
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
229
2
fetch 캐싱과 revalidate 관련
0
84
2