<suspense>

Can the React suspense features be used with tRPC ?

5 Replies

react query supports suspense, just pass {suspense: true} to the query:

const query = api.router.endpoint.useQuery({postId}, {suspense: true})

const query = api.router.endpoint.useQuery({postId}, {suspense: true})

ibamseyOP•3y ago

but with tRPC ?

Brendonovich•3y ago

the example above is with tRPC, anything that react query can do tRPC can do

isaac_way•3y ago

Yeah useQuery in trpc is literally calling from react query… the above example is in trpc syntax

Hunter•3y ago

Thanks for this response, it makes sense to me. However run into another issue when using Suspense and either useSuspenseQuery or passing the {suspense: true option as you suggested. Error:

 Text
Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

 Text
Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

This is the code I've got:

function ReviewList() {
  const query = api.strains.getStrain.useQuery(
    {
      id: 1,
    },
    { suspense: true }
  );
  return (
    <>
      <h1>Review Page</h1>
      <ul>
        {query.data?.strain?.Reviews.map((review, index) => (
          <li key={index}>{review.comment}</li>
        ))}
      </ul>
    </>
  );
}

function ReviewList() {
  const query = api.strains.getStrain.useQuery(
    {
      id: 1,
    },
    { suspense: true }
  );
  return (
    <>
      <h1>Review Page</h1>
      <ul>
        {query.data?.strain?.Reviews.map((review, index) => (
          <li key={index}>{review.comment}</li>
        ))}
      </ul>
    </>
  );
}

I can't use startTransition since I do not have access to the set method of the trpc hook AFAIK. Which is listed as a limitation in reacts docs

Gaming

Programming

<suspense>

Did you find this page helpful?