Skip to content

Commit

Permalink
docs: Improve partial reload docs
Browse files Browse the repository at this point in the history
  • Loading branch information
skryukov committed Jun 19, 2024
1 parent e2a51c9 commit 793be82
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 11 deletions.
10 changes: 7 additions & 3 deletions docs/guide/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -880,15 +880,19 @@ To instruct Inertia to store a form's data and errors in [history state](/guide/
== Vue 2

```vue
import { useForm } from '@inertiajs/vue2' form: useForm('CreateUser', data)
import { useForm } from '@inertiajs/vue2'
form: useForm('CreateUser', data)
form: useForm(`EditUser:${this.user.id}`, data)
```

== Vue 3

```vue
import { useForm } from '@inertiajs/vue3' const form = useForm('CreateUser',
data) const form = useForm(`EditUser:${user.id}`, data)
import { useForm } from '@inertiajs/vue3'
const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${user.id}`, data)
```

== React
Expand Down
99 changes: 91 additions & 8 deletions docs/guide/partial-reloads.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ As an example, consider a "user index" page that includes a list of users, as we
> [!NOTE]
> Partial reloads only work for visits made to the same page component.
## Making partial visits
## Only certain props

To perform a partial reload, use the `only` property to specify which data the server should return. This option should be an array of keys which correspond to the keys of the props.
To perform a partial reload, use the `only` visit option to specify which data the server should return. This option should be an array of keys which correspond to the keys of the props.

:::tabs key:frameworks
== Vue 2
Expand Down Expand Up @@ -54,19 +54,75 @@ router.visit(url, {

:::

## Except certain props

> [!WARNING]
> The `except` option is not yet supported by the Inertia Rails.
:::tabs key:frameworks
== Vue 2

```js
import { router } from '@inertiajs/vue2'

router.visit(url, {
except: ['users'],
})
```

== Vue 3

```js
import { router } from '@inertiajs/vue3'

router.visit(url, {
except: ['users'],
})
```

== React

```jsx
import { router } from '@inertiajs/react'

router.visit(url, {
except: ['users'],
})
```

== Svelte

```js
import { router } from '@inertiajs/svelte'

router.visit(url, {
except: ['users'],
})
```

:::

In addition to the only visit option you can also use the except option to specify which data the server should exclude. This option should also be an array of keys which correspond to the keys of the props.

## Router shorthand

Since partial reloads can only be made to the same page component the user is already on, it almost always makes sense to just use the `router.reload()` method, which automatically uses the current URL.

:::tabs key:frameworks
== Vue 2

```vue
import { router } from '@inertiajs/vue2' router.reload({ only: ['users'] })
import { router } from '@inertiajs/vue2'
router.reload({ only: ['users'] })
```

== Vue 3

```vue
import { router } from '@inertiajs/vue3' router.reload({ only: ['users'] })
import { router } from '@inertiajs/vue3'
router.reload({ only: ['users'] })
```

== React
Expand All @@ -87,6 +143,8 @@ router.reload({ only: ['users'] })

:::

## Using links

It's also possible to perform partial reloads with Inertia links using the `only` property.

:::tabs key:frameworks
Expand Down Expand Up @@ -130,25 +188,50 @@ import { inertia, Link } from '@inertiajs/svelte'

## Lazy data evaluation

For partial reloads to be most effective, be sure to also use lazy data evaluation when returning props from your server-side routes or controllers. This can be accomplished by wrapping all optional page data in a closure.
For partial reloads to be most effective, be sure to also use lazy data evaluation when returning props from your server-side routes or controllers. This can be accomplished by wrapping all optional page data in a lambda.

```ruby
class UsersController < ApplicationController
def index
render inertia: 'Users/Index', props: {
users: -> { User.all },
companies: -> { Company.all },
}
end
end
```

When Inertia performs a request, it will determine which data is required and only then will it evaluate the closure. This can significantly increase the performance of pages that contain a lot of optional data.

Additionally, Inertia provides an `InertiaRails.lazy` method to specify that a prop should never be included unless explicitly requested using the `only` option:

```ruby
class UsersController < ApplicationController
def index
render inertia: 'Users/Index', props: {
users: InertiaRails.lazy(-> { User.all }),
}
end
end
```

Here's a summary of each approach:

```ruby
class UsersController < ApplicationController
def index
render inertia: 'Users/Index', props: {
# ALWAYS included on first visit
# ALWAYS included on standard visits
# OPTIONALLY included on partial reloads
# ALWAYS evaluated
users: User.all,

# ALWAYS included on first visit
# ALWAYS included on standard visits
# OPTIONALLY included on partial reloads
# ONLY evaluated when needed
users: -> { User.all },

# NEVER included on first visit
# NEVER included on standard visits
# OPTIONALLY included on partial reloads
# ONLY evaluated when needed
users: InertiaRails.lazy(-> { User.all }),
Expand Down

0 comments on commit 793be82

Please sign in to comment.