tanstack query의 initialPageParam에 대하여 오늘 배운 것

자손킴 @jasonkim@hackers.pub

TIL: tanstack query의 useInfiniteQuery에서 initialPageParam은 처음 렌더링 때 pageParams[0]으로 기록되고, 동일한 queryKey로 연결된 캐시가 유지되는 동안 계속 그 값이 재사용된다.

따라서 서로 다른 컴포넌트에서 initialPageParam 값을 달리해 useInfiniteQuery를 호출하더라도, queryKey가 동일하다면 처음 호출된 initialPageParam으로 고정된다. 즉, 시작 cursor가 다르면 queryKey도 달리 지정해야 한다.

알고 나면 자연스럽고 당연한 동작이지만, 익숙하지 않으면 헷갈리기 쉬운 설계라고 생각한다. initialPageParam이 queryKey와 강결합된다는 사실이 InfiniteQueryOptions에서 타입 제약으로 더 잘 표현되면 좋겠다.

결론: 양방향 커서 기반 페이지네이션이 필요하면 Relay를 쓰자(?)

6

No comments

If you have a fediverse account, you can comment on this article from your own instance. Search https://hackers.pub/ap/articles/0197a20e-c8f4-730a-a148-74650d91ff1f on your instance and reply to it.