Last active
June 24, 2022 13:14
-
-
Save innocenzi/ad669c1a541f901ebbf154e9e4f4f6e1 to your computer and use it in GitHub Desktop.
Dealing with cached visits with Inertia
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script setup lang="ts"> | |
import { useBackForward } from '@/scripts/use-back-forward' | |
const { reloadOnBackForward } = useBackForward() | |
// When the page component is loaded, if it's a visit made with the "back" or "forward" | |
// browser functionality, the page will reload. You can optionally pass options to Inertia. | |
reloadOnBackForward({ | |
only: ['quotations'], | |
}) | |
</script> | |
<template> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Inertia } from '@inertiajs/inertia' | |
export function useBackForward() { | |
/** | |
* Applies the given callback on back-forward visits. | |
*/ | |
function onBackForward(fn: () => void) { | |
const isBackForwardVisit = (window.performance?.getEntriesByType('navigation').at(0) as PerformanceNavigationTiming)?.type === 'back_forward' | |
if (!isBackForwardVisit) { | |
return | |
} | |
return fn() | |
} | |
/** | |
* Reloads the page on back-forward visits. | |
*/ | |
function reloadOnBackForward(options?: Parameters<typeof Inertia.reload>[0]) { | |
onBackForward(() => Inertia.reload(options)) | |
} | |
return { | |
onBackForward, | |
reloadOnBackForward, | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment