T
TanStack•2y ago
harsh-harlequin

useSuspenseQuery fails (suspended while responding to synchronous input)

I'm attempting to follow the pattern for data loading in the file-based, react-query example. Where data is "ensured" in the loader, and loaded with a suspense query in the component. What can be seen in the photo. However, in my case, my app refuses to render, saying A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. The error is happening on initial load so adding startTransition isn't an option. I thought it may be related to not having a Suspense boundary, but I've looked all through the example and I don't see an explicit <Suspense/> boundary in it either. Does anyone know why this would be working? My code: 
export const Route = createFileRoute("/admin/")({
  component: Admin,
  loader: ({ context: { queryClient } }) => {
    queryClient.ensureQueryData(exchangesQueryOptions);
  },
});

function Admin() {
  const exchangesQuery = useSuspenseQuery(exchangesQueryOptions);
  const { data: exchanges } = exchangesQuery.data;
// ...
export const Route = createFileRoute("/admin/")({
  component: Admin,
  loader: ({ context: { queryClient } }) => {
    queryClient.ensureQueryData(exchangesQueryOptions);
  },
});

function Admin() {
  const exchangesQuery = useSuspenseQuery(exchangesQueryOptions);
  const { data: exchanges } = exchangesQuery.data;
// ...
No description
2 Replies
harsh-harlequin
harsh-harlequinOP•2y ago
Fixed it by adding defaultPreload: "intent", to createRouter 
const router = createRouter({
  routeTree,
  context: {
    queryClient,
  },
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,
});
const router = createRouter({
  routeTree,
  context: {
    queryClient,
  },
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,
});
passive-yellow
passive-yellow•2y ago
It could also do with the fact that you don't have any pending components defined. Suspense relies on there being a fallback while it suspends. defaultPendingComponent on the router, or pendingComponent on the route should do the trick

Did you find this page helpful?