slow trpc query seems to be delaying render of non-dependant components

I have a simple Page component:

const Page: NextPage = () => {
  const { data: urlRecord } = trpc.urls.getByUrn.useQuery("string");
  return (
      <div record={urlRecord}>
          <ComponentOne record={urlRecord}  />
          <ComponentTwo  record={urlRecord}  />
          <ComponentThree record={urlRecord}  />
        </div>
  );
};

const Page: NextPage = () => {
  const { data: urlRecord } = trpc.urls.getByUrn.useQuery("string");
  return (
      <div record={urlRecord}>
          <ComponentOne record={urlRecord}  />
          <ComponentTwo  record={urlRecord}  />
          <ComponentThree record={urlRecord}  />
        </div>
  );
};

All three sub Components have tRPC queries in them, they return a loader if isLoading. The urlRecord returns quickly (10ms), <ComponentOne> and <ComponentTwo>'s queries return in under 100ms, but <ComponentThree>'s query make take a few seconds ore more. the page loads quickly and the loaders are seen until the slowest query (CompnentThree) returns its data. Then all of the components render with data at once. Why is this? is it possible to get the components to all render when they';re ready?

6 Replies

Eilinis•9mo ago

do you use batched trpc requests ? if so then only one request is sent instead of three and if the third request takes longer it makes them all take longer

fotofloOP•9mo ago

@Eilinis ooh let me google and see if its configured like that

fotofloOP•9mo ago

fotofloOP•9mo ago

this config option isnt available

fotofloOP•9mo ago

turning it off and pushing to dev

fotofloOP•9mo ago

now that i've optimized the database queries its not really a concern though

Gaming

Programming

slow trpc query seems to be delaying render of non-dependant components