Strange network activity in devtools
Hi I'm learning t3 stack with this project (https://github.com/t3dotgg/chirp)
I noticed a strange behavior on the live Chirp project page (https://xn--uo8h.t3.gg/)
A network request is being made everytime I click somewhere in the devtools then back on the page.
Steps to reproduce:
- Go to the live project page and open the devtools' network tab
- Refresh the page and wait 3s for it to load everything
- Click anywhere on the page (notice a trpc request is made to posts.getAll)
- Click anywhere in the devtools, then back on the page (notice the same request is made again)
This happen also when I alt-tab away then back to the browser, or when I switch browser tabs.
I tried in chrome and firefox, it's the same.
So my question is why does it do that? And how can I prevent it?
GitHub
GitHub - t3dotgg/chirp
Contribute to t3dotgg/chirp development by creating an account on GitHub.
2 Replies
Solution
Found the culprit, it was react-query
Basically refetchOnWindowFocus was set to true (https://tanstack.com/query/v4/docs/react/guides/window-focus-refetching)
Window Focus Refetching | TanStack Query Docs
If a user leaves your application and returns and the query data is stale, TanStack Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus option:
Disabling Globally