TanStack Query makes next.js freeze
Hi Folks
Anyone facing some issues with next.js 13.4 app router when i go to some page in my blog that has anything related with Tanstack Query makes the page freeze.
here is the scenario that i found
1. when i'm in development mode sometime the page is not refreshed and if i manually refreshing the page in the browser it seems like freezing and keep like that for an hours, and i need to kill it via terminal or task manager.
2. when i go to page and comeback to previous page that have anything related with tanstack query.
is there anyone facing same issues with me? or any solution for this one?
I might just do wrong implementation, and i positively this is had something to do with tanstack query in my webapps
I attach the video so hoping giving you more context
7 Replies
wise-white•3y ago
I was having the exact same issue
Using useQuery worked fine on page load. But useMutation froze as soon as mutate function is run
Are you using mutations on your page?
sensitive-blueOP•3y ago
Im not mutating at all
Just only useQuery
sensitive-blueOP•3y ago
@PotatisMannen do you use nextjs 13?
https://stackoverflow.com/questions/76402871/tab-freezes-when-using-browser-forward-button-for-page-accessed-via-link
i see this article
there is 2 way.
1. change Link to traditional a tag again, i tested it and it is works, but i want to use Link Tag due to excellent ux experience with prefetching feature.
2. remove async and maybe use .then, and i will try this later on. but some of my components use .then instead of async, and it is works.
Stack Overflow
Tab freezes when using browser forward button for page accessed via...
I have a minimal Next.JS app with two pages: a home page and a dashboard page. I have an nav bar at the top of all pages with a Link object that links to the dashboard page. When I click the Link and
wise-white•3y ago
Yes i use next13 as well. Everything seems fine for me except mutations. For regular data fetches prefetching the data with ‘use’ and then passing it to the target component works great as well
But honestly if i cant get mutations to work i might just abandon react-query on next13 and go full next13 utilities like server actions etc
@alka_99 i got mutations to work on my end with pages that have Link navigations
can you share some code? maybe im able to help you debug
one thing i noticed is that you cant use the react query hooks inside of a async components at all
sensitive-blueOP•3y ago
sure
i have that in my codesandbox here is it https://rb.gy/hizeo
CodeSandbox
CodeSandbox is an online editor tailored for web applications.
sensitive-blueOP•3y ago
sorry i use link shorthener, there is a limit for discord.
wise-white•3y ago
@alka_99 couldnt open the sandbox anymore once i got around to it
says project not found