Skip to content

Tag-based cache invalidation for prefetch requests #2484

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.

Sign up for GitHub

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

Merged
merged 15 commits into from
Aug 15, 2025
Merged

Tag-based cache invalidation for prefetch requests #2484

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3c255b1
wip
pascalbaljet Aug 7, 2025
bc6b0c5
wip
pascalbaljet Aug 7, 2025
8e51e3c
Update prefetch.spec.ts
pascalbaljet Aug 7, 2025
0b4ac01
Merge branch 'master' into invalidate-prefetch-cache
pascalbaljet Aug 15, 2025
7e54260
Update types.ts
pascalbaljet Aug 15, 2025
e591a27
wip
pascalbaljet Aug 15, 2025
7fc37f8
Update Tags.tsx
pascalbaljet Aug 15, 2025
a5d54c4
Make third argument of `router.prefetch()` truly optional
pascalbaljet Aug 15, 2025
83314a1
Renamed to `cacheTags` and `invalidateCacheTags`
pascalbaljet Aug 15, 2025
67d50fe
Support in Form component
pascalbaljet Aug 15, 2025
48befdf
wip
pascalbaljet Aug 15, 2025
1fefb3c
Update form-component.spec.ts
pascalbaljet Aug 15, 2025
1e69e92
tests
pascalbaljet Aug 15, 2025
b93c221
Update form-component.spec.ts
pascalbaljet Aug 15, 2025
3602f0e
ts
pascalbaljet Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Make third argument of router.prefetch() truly optional
  • Loading branch information
@pascalbaljet
pascalbaljet committed Aug 15, 2025
commit a5d54c49c4e339c16e663298390514b5106ddb64
2 changes: 1 addition & 1 deletion packages/core/src/prefetched.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class PrefetchedRequests {
public add(
params: ActiveVisit,
sendFunc: (params: InternalActiveVisit) => void,
{ cacheFor, tags = [] }: PrefetchOptions,
{ cacheFor, tags }: PrefetchOptions,
) {
const inFlight = this.findInFlight(params)

Expand Down
8 changes: 6 additions & 2 deletions packages/core/src/router.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ export class Router {
public prefetch(
href: string | URL | UrlMethodPair,
options: VisitOptions = {},
{ cacheFor = 30_000, tags = [] }: PrefetchOptions,
prefetchOptions: Partial<PrefetchOptions> = {},
) {
const method: Method = options.method ?? (isUrlMethodPair(href) ? href.method : 'get')

Expand Down Expand Up @@ -288,7 +288,11 @@ export class Router {
(params) => {
this.asyncRequestStream.send(Request.create(params, currentPage.get()))
},
{ cacheFor, tags },
{
cacheFor: 30_000,
tags: [],
...prefetchOptions,
},
)
})
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,7 @@ export type CacheForOption = number | string

export type PrefetchOptions = {
cacheFor: CacheForOption | CacheForOption[]
tags?: string[]
tags: string[]
}

export interface LinkComponentBaseProps
Expand Down
2 changes: 1 addition & 1 deletion packages/react/test-app/Pages/Prefetch/Tags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default ({ pageNumber, lastLoaded }: { pageNumber: number, lastLoaded: nu
router.prefetch(
'/prefetch/tags/2',
{ method: 'get' },
{ cacheFor: '1m', tags: ['user'] }
{ tags: ['user'] }
)
router.prefetch(
'/prefetch/tags/3',
Expand Down
1 change: 0 additions & 1 deletion packages/react/test-app/Pages/Prefetch/Wayfinder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export default function Wayfinder() {
setTimeout(checkStatus)
},
},
{ cacheFor: 5000 },
)
}

Expand Down
8 changes: 4 additions & 4 deletions packages/svelte/test-app/Pages/Prefetch/Tags.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@
router.prefetch(
'/prefetch/tags/2',
{ method: 'get' },
{ cacheFor: '1m', tags: ['user'] }
{ tags: ['user'] }
)
router.prefetch(
'/prefetch/tags/3',
'/prefetch/tags/3',
{ method: 'get' },
{ cacheFor: '1m', tags: ['product'] }
)
Expand Down Expand Up @@ -72,7 +72,7 @@
Programmatic Prefetch
</button>
</div>

<div id="form-section">
<h3>Form Test</h3>
<form on:submit|preventDefault>
Expand All @@ -87,7 +87,7 @@
</button>
</form>
</div>

<div>
<div>This is tags page {pageNumber}</div>
<div>
Expand Down
1 change: 0 additions & 1 deletion packages/svelte/test-app/Pages/Prefetch/Wayfinder.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
setTimeout(checkStatus)
},
},
{ cacheFor: 5000 },
)
}

Expand Down
65 changes: 16 additions & 49 deletions packages/vue3/test-app/Pages/Prefetch/Tags.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,12 @@ const flushUserProductTags = () => {
}

const programmaticPrefetch = () => {
router.prefetch(
'/prefetch/tags/2',
{ method: 'get' },
{ cacheFor: '1m', tags: ['user'] }
)
router.prefetch(
'/prefetch/tags/3',
{ method: 'get' },
{ cacheFor: '1m', tags: ['product'] }
)
router.prefetch('/prefetch/tags/2', { method: 'get' }, { tags: ['user'] })
router.prefetch('/prefetch/tags/3', { method: 'get' }, { cacheFor: '1m', tags: ['product'] })
router.prefetch(
'/prefetch/tags/6',
{ method: 'get' },
{ cacheFor: '1m' } // No tags (untagged)
{ cacheFor: '1m' }, // No tags (untagged)
)
}

Expand All @@ -46,49 +38,24 @@ const submitWithUserInvalidation = () => {
<template>
<div>
<div id="links">
<Link href="/prefetch/tags/1" prefetch="hover" :tags="['user', 'profile']">
User Page 1
</Link>
<Link href="/prefetch/tags/2" prefetch="hover" :tags="['user', 'settings']">
User Page 2
</Link>
<Link href="/prefetch/tags/3" prefetch="hover" :tags="['product', 'catalog']">
Product Page 3
</Link>
<Link href="/prefetch/tags/4" prefetch="hover" :tags="['product', 'details']">
Product Page 4
</Link>
<Link href="/prefetch/tags/5" prefetch="hover" :tags="['admin']">
Admin Page 5
</Link>
<Link href="/prefetch/tags/6" prefetch="hover">
Untagged Page 6
</Link>
<Link href="/prefetch/tags/1" prefetch="hover" :tags="['user', 'profile']"> User Page 1 </Link>
<Link href="/prefetch/tags/2" prefetch="hover" :tags="['user', 'settings']"> User Page 2 </Link>
<Link href="/prefetch/tags/3" prefetch="hover" :tags="['product', 'catalog']"> Product Page 3 </Link>
<Link href="/prefetch/tags/4" prefetch="hover" :tags="['product', 'details']"> Product Page 4 </Link>
<Link href="/prefetch/tags/5" prefetch="hover" :tags="['admin']"> Admin Page 5 </Link>
<Link href="/prefetch/tags/6" prefetch="hover"> Untagged Page 6 </Link>
</div>
<div id="controls">
<button id="flush-user" @click="flushUserTags">
Flush User Tags
</button>
<button id="flush-user-product" @click="flushUserProductTags">
Flush User + Product Tags
</button>
<button id="programmatic-prefetch" @click="programmaticPrefetch">
Programmatic Prefetch
</button>
<button id="flush-user" @click="flushUserTags">Flush User Tags</button>
<button id="flush-user-product" @click="flushUserProductTags">Flush User + Product Tags</button>
<button id="programmatic-prefetch" @click="programmaticPrefetch">Programmatic Prefetch</button>
</div>

<div id="form-section">
<h3>Form Test</h3>
<form @submit.prevent>
<input
id="form-name"
v-model="form.name"
type="text"
placeholder="Enter name"
/>
<button id="submit-invalidate-user" @click="submitWithUserInvalidation">
Submit (Invalidate User)
</button>
<input id="form-name" v-model="form.name" type="text" placeholder="Enter name" />
<button id="submit-invalidate-user" @click="submitWithUserInvalidation">Submit (Invalidate User)</button>
</form>
</div>
<div>
Expand All @@ -98,4 +65,4 @@ const submitWithUserInvalidation = () => {
</div>
</div>
</div>
</template>
</template>
20 changes: 8 additions & 12 deletions packages/vue3/test-app/Pages/Prefetch/Wayfinder.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,15 @@ const checkStatus = () => {
}

const testPrefetch = () => {
router.prefetch(
wayfinderUrl(),
{
onPrefetching: () => {
isPrefetching.value = true
},
onPrefetched: () => {
isPrefetching.value = false
setTimeout(checkStatus)
},
router.prefetch(wayfinderUrl(), {
onPrefetching: () => {
isPrefetching.value = true
},
{ cacheFor: 5000 },
)
onPrefetched: () => {
isPrefetching.value = false
setTimeout(checkStatus)
},
})
}

const testFlush = () => {
Expand Down