Merge pull request #2200 from inertiajs/reload-after-location-fix

Fix: Reload on mount

Author: joetannenbaum

packages/core/src/history.ts

@@ -101,6 +101,10 @@ class History {
   public saveScrollPositions(scrollRegions: ScrollRegion[]): void {
     queue.add(() => {
       return Promise.resolve().then(() => {
+        if (!window.history.state?.page) {
+          return
+        }
+
         this.doReplaceState(
           {
             page: window.history.state.page,

packages/react/test-app/Pages/Visits/ReloadOnMount.jsx

@@ -0,0 +1,12 @@
+import { router } from '@inertiajs/react'
+import { useEffect } from 'react'
+
+export default (props) => {
+  useEffect(() => {
+    setTimeout(() => {
+      router.reload({ only: ['name'] })
+    })
+  })
+
+  return <div>Name is {props.name}</div>
+}

packages/svelte/test-app/Pages/Visits/ReloadOnMount.svelte

@@ -0,0 +1,14 @@
+<script>
+import { router } from '@inertiajs/svelte'
+import { onMount } from 'svelte'
+
+export let name = undefined;
+
+onMount(() => {
+    router.reload({only: ['name']})
+})
+
+</script>
+
+
+<div>Name is {name}</div>

packages/vue3/test-app/Pages/Visits/ReloadOnMount.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { router } from '@inertiajs/vue3'
+import { onMounted } from 'vue'
+
+defineProps({
+  name: String,
+})
+
+onMounted(() => {
+  router.reload({ only: ['name'] })
+})
+</script>
+
+<template>
+  <div>Name is {{ name }}</div>
+</template>

tests/app/server.js

@@ -175,6 +175,20 @@ app.delete('/dump/delete', upload.any(), (req, res) =>
   }),
 )
 
+app.get('/visits/reload-on-mount', upload.any(), (req, res) => {
+  if (req.headers['x-inertia-partial-data']) {
+    return inertia.render(req, res, {
+      component: 'Visits/ReloadOnMount',
+      props: { name: 'mounted!' },
+    })
+  }
+
+  inertia.render(req, res, {
+    component: 'Visits/ReloadOnMount',
+    props: { name: 'not mounted!' },
+  })
+})
+
 app.get('/persistent-layouts/shorthand/simple/page-a', (req, res) =>
   inertia.render(req, res, { props: { foo: 'bar', baz: 'example' } }),
 )

tests/manual-visits.spec.ts

@@ -866,6 +866,11 @@ test.describe('Partial Reloads', () => {
   })
 })
 
+test('can reload on mount', async ({ page }) => {
+  await page.goto('/visits/reload-on-mount')
+  await expect(page.getByText('Name is mounted!')).toBeVisible()
+})
+
 test.describe('Error bags', () => {
   test.beforeEach(async ({ page }) => {
     pageLoads.watch(page)