Skip to content

Add ability to make client-side only visits #870

@reinink

Description

@reinink

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 handy if you could make a visit without hitting the server. And, it turns out you actually CAN do this today, using the Inertia.setPage() method, although it's quite ugly:

Inertia.setPage({
  component: Inertia.page.component,
  url: '/users/create',
  props: {
    ...Inertia.page.props,
    showCreateModal: true,
  },
  version: Inertia.page.version,
}, {
  replace: true,
  preserveScroll: true,
  preserveState: true
})

We could make this API nicer, by creating a dedicated method for this.

Inertia.push({
  // The page component name that will be used.
  // Optional, default: the current page component.
  component: 'Users',

  // The URL that the browser will be updated to.
  // Note, no actual request will be made.
  // Optional, default: the current URL.
  url: '/users/create',

  // The props for the page component.
  // The callback will receive the current page props.
  // Optional, default: {}
  props(props) {
    return {
      ...props,
      showCreateModal: true,
    }
  },

  // Indicates if it resets the scroll position.
  // Optional, default: true.
  preserveScroll: true,

  // Indicates if it resets the page state.
  // Optional, default: true.
  preserveState: true,
})

Which would simplify our above example to just this:

Inertia.push({
  url: '/users/create',
  props: props => ({ ...props, showCreateModal: true })
})

And we could also use the existing deprecated replace method for replacing the current history state (breaking change):

Inertia.replace({ ... })

There are also situations where you might want to make a visit to a page that uses an entirely different component:

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Closed 🚪

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions