TanStackT
TanStack•2y ago
wet-aqua

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>,
})


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>
  )
}


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
Was this page helpful?