Invalidate prefetch cache on router.refresh()

vercel · Mar 3, 2023 · 2e35be2 · 2e35be2
1 parent 8db0090
commit 2e35be2
Show file tree

Hide file tree

Showing 2 changed files with 231 additions and 1 deletion.
diff --git a/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.test.tsx b/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.test.tsx
@@ -376,7 +376,7 @@ describe('refreshReducer', () => {
     expect(newState).toMatchObject(expectedState)
   })
 
-  it('should preserve existing segments (concurrent)', async () => {
+  it('should invalidate all segments (concurrent)', async () => {
     const initialTree = getInitialRouterStateTree()
     const initialCanonicalUrl = '/linking'
     const children = (
@@ -555,4 +555,233 @@ describe('refreshReducer', () => {
 
     expect(newState).toMatchObject(expectedState)
   })
+
+  it('should invalidate prefetchCache (concurrent)', async () => {
+    const initialTree = getInitialRouterStateTree()
+    const initialCanonicalUrl = '/linking'
+    const children = (
+      <html>
+        <head></head>
+        <body>Root layout</body>
+      </html>
+    )
+    const initialParallelRoutes: CacheNode['parallelRoutes'] = new Map([
+      [
+        'children',
+        new Map([
+          [
+            'linking',
+            {
+              status: CacheStates.READY,
+              parallelRoutes: new Map([
+                [
+                  'children',
+                  new Map([
+                    [
+                      '',
+                      {
+                        status: CacheStates.READY,
+                        data: null,
+                        subTreeData: <>Linking page</>,
+                        parallelRoutes: new Map(),
+                      },
+                    ],
+                  ]),
+                ],
+              ]),
+              data: null,
+              subTreeData: <>Linking layout level</>,
+            },
+          ],
+          [
+            'about',
+            {
+              status: CacheStates.READY,
+              parallelRoutes: new Map([
+                [
+                  'children',
+                  new Map([
+                    [
+                      '',
+                      {
+                        status: CacheStates.READY,
+                        data: null,
+                        subTreeData: <>About page</>,
+                        parallelRoutes: new Map(),
+                      },
+                    ],
+                  ]),
+                ],
+              ]),
+              data: null,
+              subTreeData: <>About layout level</>,
+            },
+          ],
+        ]),
+      ],
+    ])
+
+    const prefetchItem = {
+      canonicalUrlOverride: undefined,
+      flightData: [
+        [
+          '',
+          {
+            children: [
+              'linking',
+              {
+                children: [
+                  'about',
+                  {
+                    children: ['', {}],
+                  },
+                ],
+              },
+            ],
+          },
+          undefined,
+          undefined,
+          true,
+        ],
+        <>About</>,
+        <>Head</>,
+      ],
+      tree: [
+        '',
+        {
+          children: [
+            'linking',
+            {
+              children: [
+                'about',
+                {
+                  children: ['', {}],
+                },
+              ],
+            },
+          ],
+        },
+        undefined,
+        undefined,
+        true,
+      ],
+    }
+
+    const state = createInitialRouterState({
+      initialTree,
+      initialHead: null,
+      initialCanonicalUrl,
+      children,
+      initialParallelRoutes,
+      isServer: false,
+      location: new URL('/linking', 'https://localhost') as any,
+    })
+
+    state.prefetchCache.set('/linking/about', prefetchItem)
+
+    const state2 = createInitialRouterState({
+      initialTree,
+      initialHead: null,
+      initialCanonicalUrl,
+      children,
+      initialParallelRoutes,
+      isServer: false,
+      location: new URL('/linking', 'https://localhost') as any,
+    })
+    state2.prefetchCache.set('/linking/about', prefetchItem)
+
+    const action: RefreshAction = {
+      type: ACTION_REFRESH,
+      cache: {
+        status: CacheStates.LAZY_INITIALIZED,
+        data: null,
+        subTreeData: null,
+        parallelRoutes: new Map(),
+      },
+      mutable: {},
+      origin: new URL('/linking', 'https://localhost').origin,
+    }
+
+    await runPromiseThrowChain(() => refreshReducer(state, action))
+
+    const newState = await runPromiseThrowChain(() =>
+      refreshReducer(state2, action)
+    )
+
+    const expectedState: ReturnType<typeof refreshReducer> = {
+      prefetchCache: new Map(),
+      pushRef: {
+        mpaNavigation: false,
+        pendingPush: false,
+      },
+      focusAndScrollRef: {
+        apply: false,
+      },
+      canonicalUrl: '/linking',
+      cache: {
+        status: CacheStates.READY,
+        data: null,
+        subTreeData: (
+          <html>
+            <head></head>
+            <body>
+              <h1>Linking Page!</h1>
+            </body>
+          </html>
+        ),
+        parallelRoutes: new Map([
+          [
+            'children',
+            new Map([
+              [
+                'linking',
+                {
+                  status: CacheStates.LAZY_INITIALIZED,
+                  parallelRoutes: new Map([
+                    [
+                      'children',
+                      new Map([
+                        [
+                          '',
+                          {
+                            status: CacheStates.LAZY_INITIALIZED,
+                            data: null,
+                            subTreeData: null,
+                            parallelRoutes: new Map(),
+                            head: (
+                              <>
+                                <title>Linking page!</title>
+                              </>
+                            ),
+                          },
+                        ],
+                      ]),
+                    ],
+                  ]),
+                  data: null,
+                  subTreeData: null,
+                },
+              ],
+            ]),
+          ],
+        ]),
+      },
+      tree: [
+        '',
+        {
+          children: [
+            'linking',
+            {
+              children: ['', {}],
+            },
+          ],
+        },
+        undefined,
+        undefined,
+        true,
+      ],
+    }
+
+    expect(newState).toMatchObject(expectedState)
+  })
 })
diff --git a/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts
@@ -105,6 +105,7 @@ export function refreshReducer(
       head
     )
     mutable.cache = cache
+    mutable.prefetchCache = new Map()
   }
 
   mutable.previousTree = state.tree