Consider adding a localVisit() method

[reinink]

So, there are situations where making a visit to the server to set a prop is kind of unnecessary. For example, maybe you have a /users/create endpoint that sets a showCreateModal prop to true on the users index page.

In these situations, it would be neat if you could make a visit without hitting the server. Something like this:

Inertia.localVisit('/users/create', { showCreateModal: true })

These visits would use the current page object as the base, and would then merge in whatever data (props) you give it, and add a new history entry for it.

There are also situations where you might want to make a visit to a new page component, where a server-side visit isn't necessary. In these situations we'd need to be able to provide a component name:

Inertia.localVisit('/terms-and-conditions', { component: 'TermsAndConditions' })

[ajnsn]

Thanks for the idea @reinink. There may be probably use cases for it.

I am currently doing this server round trips a lot. But in my case I often also fetch additional data, e.g. when editing the item, for displaying a list of users etc. Most of the time this additional data is not needed to load the original component.

The issue I see is that if you want to access /users/create from other pages, you might still need a separated controller which sets the showCreateModalto true and then also needs to pass all additional data for the whole component. This could lead to a lot of places to maintain. Just to save one server request.

[tjk]

Just started playing with inertia recently (cool lib!) and I'm trying out this pattern (with vue bindings) to try to workaround this problem. Could be very short-sighted since I'm not really sure what I'm doing, but initial testing looks okay...

const localPagesByName = {
  'sign-in': {url: '/sign-in', component: 'sign-in'},
  'get-started': {url: '/get-started', component: 'get-started'},
}

const localPagesByPathname = {}
for (const name in localPagesByName) {
  localPagesByPathname[localPagesByName[name].url] = localPagesByName[name]
}

Vue.prototype.$localVisit = function(name, props = {}) {
  const page = {...localPagesByName[name]}
  page.props = page.props || {}
  Object.assign(page.props, props)
  return Vue.prototype.$inertia.setPage(page)
}

let initialPage = JSON.parse(el.dataset.page)
if (initialPage.component === 'not-found') {
  // see if based on url, we have a local page to show instead
  // XXX handle query, etc.
  const page = localPagesByPathname[window.location.pathname]
  if (page) initialPage = page
}

new Vue({
  render: h => h(App, {
    props: {
      initialPage,
      resolveComponent: name => require(`../views/${name}`).default,
    },
  }),
}).$mount(el)

Looking forward to an official localVisit!

---

Edit: pitfall 1, backend should also be aware of local routes for SEO purposes...

[sebastiandedeyne]

Very cool idea!

Another use case I can think of is if you can afford to load in an entire resource for a datatable (instead of a subset of it's properties), you could have an instant experience.

<template>
  <table>
    <tr v-for="user in users">
      <td>
        <!-- Dummy API idea for InertiaLink -->
        <inertia-link :to="`/users/${user.id}/edit`" local="{ user }">
          {{ user.name }}
        </inertia-link>
      </td>
    </tr>
  </table>
</template>

This would give an instant navigation experience if the user was already fully loaded in the index page.

Things really get fun combined with lazy props. If the user edit page has additional data dependencies, we can instantly prefill the page with the user data we had from the index page, and then lazy load the rest.

<script>
export default {
  props: {
    user: { required: true },
    organizations: { default: () => [] }
  },
  created() {
    this.$ineritia.reload({ only: ['organizations'] })
  }
}
</script>

[creativefctr]

A friend of mine converted @tjk 's idea into a package that supports RegEx and the newer versions of Inertia + Vue3:

https://www.npmjs.com/package/@madnow/inertia-local-visit