markshuggah•12mo 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•12mo ago

bumping this