TRPC global loading page

Rrustclan

1/29/2023

Hey. With trpc/nextjs I'm wondering if its possible to have a global loading context/state which is used across my whole app, whenever a TRPC endpoint .isFetched property is false, it will display a "loading" symbol. Currently I have to do something like this on every page:

  if (!getMailQuery.isFetched) {
    return (
      <AppShell navbar={<AdminNavBar selected={6} />}>
        <PublicLoadingScreen />
      </AppShell>
    );
  }
return (pageContent...)

  if (!getMailQuery.isFetched) {
    return (
      <AppShell navbar={<AdminNavBar selected={6} />}>
        <PublicLoadingScreen />
      </AppShell>
    );
  }
return (pageContent...)

Nnlucas

1/29/2023

You could use something like this https://tanstack.com/query/v4/docs/react/reference/useIsFetching This is also essentially the problem that Suspense is solving, so you could enable Suspense and use that

Rrustclan

1/29/2023

Thank you very much 🙂

Looking for more? Join the community!

tRPC

TRPC global loading page

Join Server

tRPC

TRPC global loading page

Join Server

Recommended Posts

Multiple Clients/Services In tRPC ContextI know it's typical to pass around the prisma client in the trpc context, is the same true for other Use middleware to send responseHello, how can I send a response from the middleware without executing the input, such as making a c dynamic router creationhas anyone been able to create a dynamic router? e.g. i pass in the schema and some metadata and it Type issue react query with enabled.We migrate to trpc and using @tanstack/react-query directly to the trpc syntax of trpc.procedureName TRPCClientError: Unexpected end of JSON inputHey I am running into this issue when calling a `mutateAsync` in production in Vercel (**the error d Is it ok to use a createCaller() router within ServerSideProps?The official trpc docs shown an example of how to use the SSGHelper router within SSPs. The procedur tRPC Cors Authentication ErrorHey, I was mainly looking to enable CORS locally for calling my tRPC endpoints in localhost:3000 (Ne Demo code `trpc.infinitePosts.add` on infinitedQuery not workingDoc here: https://trpc.io/docs/useInfiniteQuery#getinfinitedata, I created an my query like this: ``