rsnext/test/e2e/app-dir/router-stuck-dynamic-static-segment/router-stuck-dynamic-static-segment.test.ts

23 lines
745 B
TypeScript
Raw Normal View History

Add dynamic parameter marker to router cache key (#47957) ### What? Took a bit to investigate this one, eventually found that the case where it broke is this one: ``` app ├── [slug] // This matches `/blog` │ └── page.js └── blog └── [name] // This matches `/blog/a-post` └── page.js ``` The router cache key is based on the "static key" / "dynamic parameter value" in the tree. This means that the cache key for `/blog` that matches `/[slug]` would be the same as the static segment `blog`. This caused the cache to become intertwined between those paths, it's accidental that the router got stuck in that case, main reason it got stuck is that the fetch for the RSC payload returned a deeper value than expected. In `walkAddRefetch` we bailed because that walked the `segmentPath` didn't match up. The underlying problem with this was that the render would override the cache nodes incorrectly. This would also cause wrong behavior, even though that wasn't reported. E.g. `app/[slug]/layout.js` would apply on `app/blog/[name]/page.js` because they'd share the `blog` cache node. ### How? This PR changes the cache key to include the dynamic parameter name and type, e.g. the dynamic segment `['slug', 'blog', 'd']` previously turned into `'blog'` as the cache key, with these changes it turns into `'slug|blog|d'`. For static segments like `blog` in `app/blog/[name]` the key is still just `'blog'`. I've also refactored the cases where we read the segment as the code was duplicated in a few places. Closes NEXT-877 Fixes #47297 <!-- 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 # --> fix NEXT-877
2023-04-05 15:40:28 +02:00
import { createNextDescribe } from 'e2e-utils'
createNextDescribe(
'router-stuck-dynamic-static-segment',
{
files: __dirname,
},
({ next }) => {
// Checks that you can navigate from `/[slug]` where `slug` is `blog` to `/blog/[slug]` where `slug` is `a-post`.
it('should allow navigation between dynamic parameter and static parameter of the same value', async () => {
const browser = await next.browser('/')
await browser
.elementByCss('#to-blog')
.click()
.waitForElementByCss('#slug-page')
.elementByCss('#to-blog-post')
.click()
.waitForElementByCss('#blog-post-page')
expect(await browser.elementByCss('h1').text()).toBe('Blog post a-post')
})
}
)