markshuggah
markshuggah9mo ago

2 react renders causing 4 trpc query executes

I see that my nextjs page is rendering twice on initial load. This is causing 4 executes of my query procedure / API call. Is there any way to dedupe these calls? I would expect there to be some caching, or no callout if the initial one was loading. code:

const productsQuery = trpc.products.getAll.useQuery();

const productsQuery = trpc.products.getAll.useQuery();
export const productsRouter = router({
getAll: procedure.query(async () => {
return fetchAllProducts();
}),
export const productsRouter = router({
getAll: procedure.query(async () => {
return fetchAllProducts();
}),
console:
wait - compiling /store (client and server)...
event - compiled client and server successfully in 150 ms (405 modules)
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
calling fetch products
fetching products...
Rendering
Rendering
calling fetch products
fetching products...
calling fetch products
fetching products...
calling fetch products
fetching products...
calling fetch products
fetching products...
wait - compiling /store (client and server)...
event - compiled client and server successfully in 150 ms (405 modules)
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
calling fetch products
fetching products...
Rendering
Rendering
calling fetch products
fetching products...
calling fetch products
fetching products...
calling fetch products
fetching products...
calling fetch products
fetching products...
1 Reply
markshuggah
markshuggah8mo ago
bumping this