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•4mo 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

fotoflo•3mo ago

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

fotoflo•3mo ago

fotoflo•3mo ago

this config option isnt available

fotoflo•3mo ago

turning it off and pushing to dev

fotoflo•3mo 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