actions: fill prefetchCache with revalidation payload (#49576)
This fixes a bug where the revalidation value was not stored into the prefetch cache, leading you to potentially see stale value when re-reading from the prefetch cache. <!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Improving Documentation or adding/fixing Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # --> link NEXT-1134 Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
This commit is contained in:
Jimmy Lai
GitHub
parent
1f561a67dd
commit
02d020c459
4 changed files with 74 additions and 7 deletions
|
|
@ -103,6 +103,7 @@ export function serverActionReducer(
|
|||
|
||||
if (!action.mutable.inFlightServerAction) {
|
||||
action.mutable.previousTree = state.tree
|
||||
action.mutable.previousUrl = state.canonicalUrl
|
||||
action.mutable.inFlightServerAction = createRecordFromThenable(
|
||||
fetchServerAction(state, action)
|
||||
)
|
||||
|
|
@ -117,11 +118,8 @@ export function serverActionReducer(
|
|||
if (redirectLocation) {
|
||||
// the redirection might have a flight data associated with it, so we'll populate the cache with it
|
||||
if (actionFlightData) {
|
||||
const href = createHrefFromUrl(
|
||||
redirectLocation,
|
||||
// Ensures the hash is not part of the cache key as it does not affect fetching the server
|
||||
false
|
||||
)
|
||||
const href = createHrefFromUrl(redirectLocation, false)
|
||||
const previousCacheEntry = state.prefetchCache.get(href)
|
||||
state.prefetchCache.set(href, {
|
||||
data: createRecordFromThenable(
|
||||
Promise.resolve([
|
||||
|
|
@ -130,7 +128,7 @@ export function serverActionReducer(
|
|||
undefined,
|
||||
])
|
||||
),
|
||||
kind: PrefetchKind.TEMPORARY, //TODO-APP: maybe this could cached longer?
|
||||
kind: previousCacheEntry?.kind ?? PrefetchKind.TEMPORARY,
|
||||
prefetchTime: Date.now(),
|
||||
treeAtTimeOfPrefetch: action.mutable.previousTree!,
|
||||
lastUsedTime: null,
|
||||
|
|
@ -142,8 +140,31 @@ export function serverActionReducer(
|
|||
getRedirectError(redirectLocation.toString(), RedirectType.push)
|
||||
)
|
||||
} else {
|
||||
// TODO-APP: populate the prefetch cache with the new flight data
|
||||
if (actionFlightData) {
|
||||
const href = createHrefFromUrl(
|
||||
new URL(action.mutable.previousUrl!, window.location.origin),
|
||||
false
|
||||
)
|
||||
const previousCacheEntry = state.prefetchCache.get(href)
|
||||
state.prefetchCache.set(
|
||||
createHrefFromUrl(
|
||||
new URL(action.mutable.previousUrl!, window.location.origin),
|
||||
false
|
||||
),
|
||||
{
|
||||
data: createRecordFromThenable(
|
||||
Promise.resolve([
|
||||
actionFlightData,
|
||||
// TODO-APP: verify the logic around canonical URL overrides
|
||||
undefined,
|
||||
])
|
||||
),
|
||||
kind: previousCacheEntry?.kind ?? PrefetchKind.TEMPORARY,
|
||||
prefetchTime: Date.now(),
|
||||
treeAtTimeOfPrefetch: action.mutable.previousTree!,
|
||||
lastUsedTime: null,
|
||||
}
|
||||
)
|
||||
// this is an intentional hack around React: we want to update the tree in a new render
|
||||
setTimeout(() => {
|
||||
action.changeByServerResponse(
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ export interface ServerActionMutable {
|
|||
inFlightServerAction?: Promise<any> | null
|
||||
serverActionApplied?: boolean
|
||||
previousTree?: FlightRouterState
|
||||
previousUrl?: string
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -431,6 +431,32 @@ createNextDescribe(
|
|||
}, 'success')
|
||||
})
|
||||
|
||||
it('should store revalidation data in the prefetch cache', async () => {
|
||||
const browser = await next.browser('/client')
|
||||
await browser.elementByCss('#navigate-revalidate').click()
|
||||
const justPutIt = await browser.elementByCss('#justputit').text()
|
||||
await browser.elementByCss('#revalidate-justputit').click()
|
||||
await check(async () => {
|
||||
const newJustPutIt = await browser.elementByCss('#justputit').text()
|
||||
return newJustPutIt !== justPutIt ? 'success' : 'failure'
|
||||
}, 'success')
|
||||
|
||||
const newJustPutIt = await browser.elementByCss('#justputit').text()
|
||||
|
||||
await browser
|
||||
.elementByCss('#navigate-client')
|
||||
.click()
|
||||
.waitForElementByCss('#inc')
|
||||
await browser
|
||||
.elementByCss('#navigate-revalidate')
|
||||
.click()
|
||||
.waitForElementByCss('#revalidate-justputit')
|
||||
|
||||
const newJustPutIt2 = await browser.elementByCss('#justputit').text()
|
||||
|
||||
expect(newJustPutIt).toEqual(newJustPutIt2)
|
||||
})
|
||||
|
||||
it('should revalidate when cookies.set is called', async () => {
|
||||
const browser = await next.browser('/revalidate')
|
||||
const randomNumber = await browser.elementByCss('#random-cookie').text()
|
||||
|
|
|
|||
|
|
@ -1,9 +1,28 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html>
|
||||
<head />
|
||||
<body>
|
||||
<div id="random-number">{Math.random()}</div>
|
||||
<div>
|
||||
<div>
|
||||
<Link id="navigate-client" href="/client">
|
||||
Client
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link id="navigate-server" href="/server">
|
||||
Server
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link id="navigate-revalidate" href="/revalidate">
|
||||
Client and Server
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue