Update useAwaitableNavigate to handle navigations between pages reliably by nikosdouvlis · Pull Request #2889 · clerk/javascript

nikosdouvlis · 2024-02-28T22:13:11Z

We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted

Description

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-02-28T22:13:15Z

🦋 Changeset detected

Latest commit: 86eb801

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/nextjs	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

nikosdouvlis · 2024-02-28T22:14:13Z

!snapshot

clerk-cookie · 2024-02-28T22:18:44Z

Hey @nikosdouvlis - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	0.6.12-snapshot.v91efa8f
@clerk/clerk-js	4.70.2-snapshot.v91efa8f
@clerk/clerk-expo	0.20.7-snapshot.v91efa8f
@clerk/nextjs	4.29.9-snapshot.v91efa8f

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@0.6.12-snapshot.v91efa8f --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.v91efa8f --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.v91efa8f --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.v91efa8f --save-exact

nikosdouvlis · 2024-02-28T22:34:42Z

!snapshot

clerk-cookie · 2024-02-28T22:36:45Z

Hey @nikosdouvlis - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	0.6.12-snapshot.vc9a521b
@clerk/clerk-js	4.70.2-snapshot.vc9a521b
@clerk/clerk-expo	0.20.7-snapshot.vc9a521b
@clerk/nextjs	4.29.9-snapshot.vc9a521b

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact

nikosdouvlis · 2024-02-29T01:46:13Z

!snapshot

clerk-cookie · 2024-02-29T01:46:48Z

Hey @nikosdouvlis - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	0.6.12-snapshot.vc9a521b
@clerk/clerk-js	4.70.2-snapshot.vc9a521b
@clerk/clerk-expo	0.20.7-snapshot.vc9a521b
@clerk/nextjs	4.29.9-snapshot.vc9a521b

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact

nikosdouvlis · 2024-02-29T15:02:34Z

!snapshot

desiprisg

LGTM

clerk-cookie · 2024-02-29T15:04:40Z

Hey @nikosdouvlis - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	0.6.12-snapshot.v6eb1bf8
@clerk/clerk-js	4.70.2-snapshot.v6eb1bf8
@clerk/clerk-expo	0.20.7-snapshot.v6eb1bf8
@clerk/nextjs	4.29.9-snapshot.v6eb1bf8

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@0.6.12-snapshot.v6eb1bf8 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.v6eb1bf8 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.v6eb1bf8 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.v6eb1bf8 --save-exact

brkalow · 2024-02-29T15:17:19Z

packages/nextjs/src/app-router/client/invalidateCacheAction.ts

+ * https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
+ */
+export const invalidateCacheAction = async () => {
+  cookies().delete(`__clerk_random_cookie_${Date.now()}`);


❓ According to the docs linked, calling router.refresh() will clear the cache. Why do we need to use the cookies approach?

According to the docs, router.refresh() invalidates the cache for the current router not for all routes. If we are at '/path' and the '/' route is cached, navigating to / will use the cached payload even after firing refresh()

See: https://nextjs.org/docs/app/building-your-application/caching#invalidation-1

Interesting, I read it as it invalidates the router cache, not just for the current route, but if what you have here works or addresses some issue you experienced with router.refresh() then lgtm 😀

brkalow · 2024-02-29T15:23:09Z

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

-    clerkNavRef.current = (to, opts) => {
      return new Promise<void>(res => {
-        clerkNavPromiseBuffer.current.push(res);
-        startTransition(() => {


I believe removing the transition here will re-introduce the original issue, which is that state updates were happening during the router transition, or that the setActive call was not completing at all because of the navigation triggered by onBeforeSetActive.

Is there a way we can retain the use of the transition while keeping the buffer on the window?

We'll most likely keep using the transition API - this is removed temporarily so I can cut a snapshot version for testing

setActive call was not completing at all because of the navigation triggered by onBeforeSetActive

Regarding this one, I never managed to reproduce a failed setActive because of us not listening to isPending

I think the issue was caused by the components being unmounted during navigation but I do agree that keep using transition state is the way to go here

brkalow · 2024-02-29T15:24:41Z

packages/nextjs/src/app-router/client/ClerkProvider.tsx

-        router.refresh();
-        router.push(window.location.href);
-      }
+      return invalidateCacheAction();


Wouldn't we want to invalidate the router cache in onAfterSetActive? Why in before?

We want to invalidate the router cache before a navigation occurs, otherwise the navigation might not fire atll . Currently, the order is: setActive > onBeforeSetActive > beforeEmit() > onAfterSetActive

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

nikosdouvlis · 2024-02-29T16:16:43Z

!snapshot

clerk-cookie · 2024-02-29T16:18:28Z

Hey @nikosdouvlis - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	0.6.12-snapshot.v40af74c
@clerk/clerk-js	4.70.2-snapshot.v40af74c
@clerk/clerk-expo	0.20.7-snapshot.v40af74c
@clerk/nextjs	4.29.9-snapshot.v40af74c

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@0.6.12-snapshot.v40af74c --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.v40af74c --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.v40af74c --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.v40af74c --save-exact

…tween pages reliably We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted

nikosdouvlis · 2024-03-01T00:31:16Z

!snapshot

clerk-cookie · 2024-03-01T00:33:27Z

Hey @nikosdouvlis - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	0.6.12-snapshot.v86eb801
@clerk/clerk-js	4.70.2-snapshot.v86eb801
@clerk/clerk-expo	0.20.7-snapshot.v86eb801
@clerk/nextjs	4.29.9-snapshot.v86eb801

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@0.6.12-snapshot.v86eb801 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.v86eb801 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.v86eb801 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.v86eb801 --save-exact

nikosdouvlis · 2024-03-19T08:57:16Z

This released was included in the v5 beta release and so far everything seems to be working as expected.

However, we've had no other reports for unexpected behavior in v4. GIven that this fix could introduce breaking behavior for v4 apps, even if extremely unlikely, I'm closing this for now. We will merge and release if we receive any other reports.

nikosdouvlis requested a review from a team as a code owner February 28, 2024 22:13

nikosdouvlis requested review from anagstef and removed request for a team February 28, 2024 22:13

clerk-cookie added the nextjs label Feb 28, 2024

nikosdouvlis force-pushed the nikos/fix-awaitable-navigation branch from ccc301f to 91efa8f Compare February 28, 2024 22:13

nikosdouvlis force-pushed the nikos/fix-awaitable-navigation branch from 91efa8f to c9a521b Compare February 28, 2024 22:30

nikosdouvlis force-pushed the nikos/fix-awaitable-navigation branch from c9a521b to 41e6fdb Compare February 29, 2024 03:02

clerk-cookie added the clerk-js label Feb 29, 2024

desiprisg approved these changes Feb 29, 2024

View reviewed changes

nikosdouvlis force-pushed the nikos/fix-awaitable-navigation branch from 6eb1bf8 to 1d4dfe6 Compare February 29, 2024 15:08

brkalow reviewed Feb 29, 2024

View reviewed changes

nikosdouvlis force-pushed the nikos/fix-awaitable-navigation branch from 1d4dfe6 to 40af74c Compare February 29, 2024 16:14

nikosdouvlis force-pushed the nikos/fix-awaitable-navigation branch from 40af74c to 5470ea6 Compare February 29, 2024 22:12

nikosdouvlis mentioned this pull request Feb 29, 2024

fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be… #2899

Merged

9 tasks

nikosdouvlis closed this Mar 19, 2024

nikosdouvlis deleted the nikos/fix-awaitable-navigation branch December 7, 2025 10:42

jacekradko mentioned this pull request Mar 5, 2026

test(nextjs): Add tests for useInternalNavFun navigation promise resolution #7996

Open

2 tasks

Conversation

nikosdouvlis commented Feb 28, 2024

Description

Checklist

Type of change

Uh oh!

changeset-bot bot commented Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

nikosdouvlis commented Feb 28, 2024

Uh oh!

clerk-cookie commented Feb 28, 2024

Uh oh!

nikosdouvlis commented Feb 28, 2024

Uh oh!

clerk-cookie commented Feb 28, 2024

Uh oh!

nikosdouvlis commented Feb 29, 2024

Uh oh!

clerk-cookie commented Feb 29, 2024

Uh oh!

nikosdouvlis commented Feb 29, 2024

Uh oh!

desiprisg left a comment

Choose a reason for hiding this comment

Uh oh!

clerk-cookie commented Feb 29, 2024

Uh oh!

brkalow Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

nikosdouvlis Feb 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brkalow Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

brkalow Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

nikosdouvlis Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

nikosdouvlis Feb 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brkalow Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

nikosdouvlis Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

nikosdouvlis commented Feb 29, 2024

Uh oh!

clerk-cookie commented Feb 29, 2024

Uh oh!

nikosdouvlis commented Mar 1, 2024

Uh oh!

clerk-cookie commented Mar 1, 2024

Uh oh!

nikosdouvlis commented Mar 19, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot bot commented Feb 28, 2024 •

edited

Loading

nikosdouvlis Feb 29, 2024 •

edited

Loading

nikosdouvlis Feb 29, 2024 •

edited

Loading