Data Validation Issue When Modifying the Address Bar in Next.js 14

[Sevansi]

Context: Using Next.js version 14.2.1 along with tanstack/react-query version 5.29.2. The application features a mechanism where the category ID is dynamically added to the URL when operations are performed in a modal window (for instance, updating a category). This facilitates maintaining context across page reloads and enhances user experience by providing smoother navigation.

Problem: When a user opens the modal window and performs an update, the category ID in the URL changes dynamically. After sending data to the server, two queries are invalidated through react-query. However, one of the queries (getCategoriesById-21) fails to complete and remains in a loading state. This issue occurs when the category ID is removed from the URL, likely affecting the query's state update process.

Reproducing the Problem:

1. Open the sandbox environment.
2. Open developer tools and go to the devtools tab for tanstack-query.
3. Open the modal window and click 'click me'.
4. Observe how the query getCategoriesById-21 gets stuck in the loading state after the id is removed from the address bar.

LINK: sanbox

[TkDodo]

not exactly sure what happens here, but if you keep the mutation pending while the invalidations happen, you don't run into this:

    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["getAllCategories"] }),
        queryClient.invalidateQueries({
          queryKey: [`getCategoriesById-${21}`],
        }),
      ]);

[TkDodo]

Here's the link LINK

Sorry, I can't access that. Seems to be a private sandbox.

Moreover, I suspect there might be a bug either in Next.js or tanstack-query, as such a problem does not exist in plain React.

I think we should try to reproduce with react-router and react-query, and if that works, the issue seems to be on next-js side. If it also occurs in this setup, it' s on RQ's side.

[Sevansi]

I apologize, there was an error, and it became private, although it's set to public in the settings. I recreated the sandbox with React + tanstack-query, and there are no errors there! It seems that tanstack-query may have some compatibility issues with Next.js. I'll try other builds when I have more time. :)

New Link

[Sevansi]

I can assume that the error might be on the side of tanstack-query. I tried many different versions and methods, and here's what I noticed: first, I installed Next.js 14.0.1 and tried it with react-query when it was still called that :) I got the same error. Then, I tried using window.history.pushState for a modal window, which seemed to work. Using it upon closing doesn't cause the page to hang, but in all other cases, I don't know why, it doesn't help. Then I tried changing the address bar in useEffect, and here window.history.pushState no longer helps. Most importantly, I tried placing two requests at page load for 10 seconds, and during them, I changed the address bar. Here, the behavior is very strange: the first request goes through despite the address bar change, but the second one does not; it hangs. I don’t even know where to dig or what to do next. :)

P.S. I also tried using window.history.pushState with the request that lasts 10 seconds, and it also hangs with it.

[Sevansi]

I found the problem, and on one hand, I'm glad, but on the other, I'm disappointed that I now need to rewrite 20 requests. :) The issue lies with Next.js, specifically in their new approach where you can use requests on the server side in a regular file using 'use server'—I forgot what this approach is called. The problem is that it breaks any requests if they happen simultaneously and there is a change in the address bar. I tried writing my function through fetch to the data retrieval function where 'use server' is used and got the same behavior as with tanstack-query. The solution is very simple: use API routes for data retrieval. In this case, both tanstack-query and fetch, and everything else works fine, at least I haven't noticed any errors and bugs as with 'use server'. It would be advisable to report this issue to Next.js so that they can address it in future versions.