Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useTransition and revalidatePath does not work as expected when inside is executed server action and that code is used in Parallel and Intercepted Route #55911

Open
1 task done
grzegorzpokorski opened this issue Sep 24, 2023 · 1 comment
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@grzegorzpokorski
Copy link

grzegorzpokorski commented Sep 24, 2023

Link to the code that reproduces this issue

https://github.com/grzegorzpokorski/next-usetransition-server-actions-revalidation-issue

To Reproduce

Strange useTransition behavior and navigation crashing:

  1. Clone bug reproduction repo, install dependencies, build and run app.
  2. Go to /
  3. Click on go to cart link which leads to /cart page - after that should apear intercepded & parallel 'modal' page.
  4. Click 'fetch data' button which execute server action using useTranstion hook to indicate if is pending.
  5. On modal page should appear fetched data but button still should have fetching label even after data are successfully fetched.
  6. Click close modal button - in browser address bar url should change from /cart to /, but modal does not disappearing, other links also stops working.

ReavalidatePath does not work in server actions executed on parallel and intercepted route:

  1. Clone bug reproduction repo, install dependencies, build and run app.
  2. Go to /cart
  3. Click 'fetch data' button which execute server action.
  4. After while fetched data should appear, but button label still displays 'fetching'; link named 'go Home' also stops working; another request on /cart does not revalidating after executing server action.

Current vs. Expected behavior

Current behavior was described in "To Reproduce" section above.

When you remove ./src/app/@modal directory from project - just simply remove parallel and intercepted route for /cart everything work fine. It means:

  • server action state is correctly indicated using useTransition hook,
  • navigation work as should,
  • another requests on /cart page are revalidating after execution server action with revalidatePath.

Above behavior is expected also to situation when parallel and intercepted route is in use.

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
Binaries:
  Node: 18.11.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 8.6.0
Relevant Packages:
  next: 13.5.3-canary.3
  eslint-config-next: 13.5.3-canary.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Routing (next/router, next/navigation, next/link)

Additional context

No response

@grzegorzpokorski grzegorzpokorski added the bug Issue was opened via the bug report template. label Sep 24, 2023
@github-actions github-actions bot added the Navigation Related to Next.js linking (e.g., <Link>) and navigation. label Sep 24, 2023
@grzegorzpokorski grzegorzpokorski changed the title useTransition and revalidatePath not work as expected when inside is executed server action and that code is used in Parallel and Intercepted Route useTransition and revalidatePath does not work as expected when inside is executed server action and that code is used in Parallel and Intercepted Route Sep 24, 2023
@johnrazeur
Copy link

Linked to #54723

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.
Projects
None yet
Development

No branches or pull requests

2 participants