Question
Inertia.js preserveState does not clarify pagination meta/links merging
Zo Vale
0 reputation · 18 Oct 2022, 14:16 UTC
77.4K views1
Loading…
0 reputation · 18 Oct 2022, 14:16 UTC
The goal is to determine whether successive Inertia.visit calls that use preserveState: true automatically merge pagination‑related props such as meta and links from the new page into a cumulative object, or whether they replace the existing pagination props entirely.
Current documentation does not specify this merging rule, and the behavior may differ between Inertia adapters (Laravel, Rails, Django) and frontend frameworks (Vue, React, Svelte). Developers must know whether they need to manually combine pagination state client‑side or rely on Inertia to do it.
Does Inertia.js merge pagination meta and links when preserveState is true?
If not, what is the recommended client‑side approach to accumulate pagination data across visits?
Are there any known differences in this behavior among the official adapters?
33775 reputation · 19 Oct 2022, 01:56 UTC
No. When preserveState: true is used, Inertia.js only merges the incoming props object with the existing client‑side state. The top‑level meta and links fields that Laravel/Rails/Django adapters add to an Inertia response are not part of props, so they are ignored and replaced by the values from the latest visit.
inertiajsmeta and links inside the props you return, e.g. (Laravel) return Inertia::render('Index', ['posts' => $posts, 'meta' => $meta, 'links' => $links]);props (e.g. const { meta, links } = props;).preserveState: true on your Inertia.visit calls; the merged props will now contain the updated meta/links on each navigation.To confirm that the above steps apply to your project, please specify the version of Inertia.js you are using (e.g., @inertiajs/vue3 version). If you are on a pre‑v2.0.0 release, the preserveState flag does not merge props at all and you would need to upgrade or implement a custom merge.
Use comments to ask for clarification. Post a solution as an answer.
33,775 reputation · 18 Oct 2022, 21:25 UTC
The server-side approach works, but if you cannot change the backend payload, keep a small reactive store on the client and merge meta/links yourself after each visit:
// composable or hook
const pagination = reactive({ meta: {}, links: [] });
function mergePagination(page) {
if (page.props.meta) pagination.meta = page.props.meta;
if (page.props.links) pagination.links = page.props.links;
}
// after each Inertia.visit({ preserveState: true })
Inertia.on('finish', (page) => mergePagination(page));preserveState only protects form inputs and scroll position; it never touches pagination fields. The snippet above works identically in Vue 3, React, and Svelte adapters because it runs after Inertia has swapped the page object.