T
TanStack•13mo ago
dependent-tan

How to retrigger the pendingComponent when using `useSuspenseQuery`

Hello everyone! I have a posts component that is a list of posts, and a button that caps the limit of the amount of posts to 10. When loading this route initially I have a pendingComponent that reveals my pending ui. When I click the limit button I want to retrigger this pending UI, and then rerender the data in my component with the updated data What actually ends up happening is that it refetches my /api/posts endpoint, and then the component rerenders, but the pendingComponent doesn't come back or show. Here's my component structure 
export const postsRoute = createRoute({
  getParentRoute: () => dashboardRoute,
  path: 'posts',
  validateSearch: z.object({
    limit: z.string().optional(),
  }),
  loaderDeps: ({ search: { limit } }) => ({ limit }),
  loader: ({ context: { queryClient }, deps: { limit } }) =>
    queryClient.ensureQueryData(postsQueryOptions(limit)),
  component: () => <PostsComponent />,
  pendingComponent: () => <div>I am pending</div>,
  errorComponent: () => <div>An error occurred while loading the logs for this connection</div>,
})
export const postsRoute = createRoute({
  getParentRoute: () => dashboardRoute,
  path: 'posts',
  validateSearch: z.object({
    limit: z.string().optional(),
  }),
  loaderDeps: ({ search: { limit } }) => ({ limit }),
  loader: ({ context: { queryClient }, deps: { limit } }) =>
    queryClient.ensureQueryData(postsQueryOptions(limit)),
  component: () => <PostsComponent />,
  pendingComponent: () => <div>I am pending</div>,
  errorComponent: () => <div>An error occurred while loading the logs for this connection</div>,
})
and then my component: 
function PostsComponent() {
  const router = useRouter()
  const search = postsRoute.useSearch()
  const navigate = postsRoute.useNavigate()
  const { limit } = search
  const { data, refetch, isRefetching } = useSuspenseQuery(postsQueryOptions(limit))
  return (
    <div>
      <button
        onClick={async () => {
          await router.invalidate()
          await navigate({ search: { limit: 10 } })
          await refetch()
        }}
      >
        Limit by 10 posts
      </button>
      {/* posts stuff here */}
    </div>
  )
}
function PostsComponent() {
  const router = useRouter()
  const search = postsRoute.useSearch()
  const navigate = postsRoute.useNavigate()
  const { limit } = search
  const { data, refetch, isRefetching } = useSuspenseQuery(postsQueryOptions(limit))
  return (
    <div>
      <button
        onClick={async () => {
          await router.invalidate()
          await navigate({ search: { limit: 10 } })
          await refetch()
        }}
      >
        Limit by 10 posts
      </button>
      {/* posts stuff here */}
    </div>
  )
}
Another approach to get around this is instead of navigate I call refetch and write additional pending UI in my PostsComponent by using isRefetching, but Ideally I want to show the pending component in the suspense boundary Is there any way around this? Do I have the right approach? Thanks in advance
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?