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
Eilinis8mo 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
fotoflo8mo ago
@Eilinis ooh let me google and see if its configured like that
fotoflo
fotoflo8mo ago
No description
fotoflo
fotoflo8mo ago
this config option isnt available
fotoflo
fotoflo8mo ago
turning it off and pushing to dev
No description
fotoflo
fotoflo8mo ago
now that i've optimized the database queries its not really a concern though
Want results from more Discord servers?
Add your server