Dynamically update outputted Ziggy JSON when using InertiaJS

[just-tom]

Ziggy version

1.4.6

Laravel version

9.9.0

Description

Hi!

Not necessarily a bug but more of a question. Im using Laravel, Vue, InertiaJS and Ziggy together and trying the utilise the URL::defaults method laravel provides with Ziggy adheres to.

My problem is if I want to update these default values in the @routes directive, I of course have to refresh the page. The issue with that is IntertiaJS doesnt refresh and effective acts like an ajax call.

Is there anyone that has effectively updated the routes dynamically based on Inertia Share or hooks or something along those lines?

I have seen the way to pull in the routes by an API call, but this negates the fact i'm trying to use defaults to make my code leaner as I would have to include Ziggy with each use of route()

For context I have a set of nested routes as such:

spaces/{space}/pages/{page}/sections/{section}/blocks
spaces/{space}/pages/{page}/sections/{section}/blocks/create
spaces/{space}/pages/{page}/sections/{section}/blocks/{block}
spaces/{space}/pages/{page}/sections/{section}/blocks/{block}/edit

So I am trying to use URL defaults to set the space id, page id, section id whenever your within that nested part of the application, rather than having to include the parameters with each route() call.

Open to any suggestions or ideas!

Thanks for your work guys

Ziggy call and context

@routes as standard at the moment. Then the `route()` helper elsewhere in my vue code

Ziggy configuration

{
  "defaults":{"space":"space123","page":"page123"}
}

Route definition

Route::resource('spaces', SpaceController::class);
Route::resource('spaces.pages', PageController::class);
Route::resource('spaces.pages.sections', SectionController::class);
Route::resource('spaces.pages.sections.blocks', BlockController::class);

[bakerkretzmar]

Could you could share it as part of the Inertia payload like this #463 (comment)?

[just-tom]

Thanks for pointing this discussion out to me! Yeah this is exactly what i was toying with! Im just not sure on the Vue mixin side (my skills aren't the best there), how would that potentially look if you wouldn't mind?

Thanks again

[bakerkretzmar]

Sure! Basically you can set up the Vue plugin or mixin normally according to our docs, and then you just need to update the global Ziggy configuration on every navigation event.

Here's what that would look like in Inertia's PingCRM demo app: https://github.com/bakerkretzmar/pingcrm-ziggy-demo/pull/1

I'm using Inertia.on('navigate', () => {}) to listen for page navigation events, and then running globalThis.Ziggy = event.detail.page.props.ziggy to set the global Ziggy object to whatever was passed down from the Laravel app.

Where you put that listener is going to depend on your app structure, so I'd keep the console logs in there and play around with it until you find somewhere that makes sense—you want it to fire on every navigation event, including initial page load, but not more often than that.

Also, like I mentioned in the other comment, you'll want to look into caching some or all of the Ziggy config in the Laravel app if you do this, because generating the whole thing on every request will be slow. You could cache the whole thing and then just replace the defaults part of the object if that's all you expect to change.

Let me know if that helps!

[just-tom]

This is great @bakerkretzmar - thanks very much for taking the time to set up the demo aswell.

One last thing im struggling with is, beforehand I was using the global route() helper from the @routes directive in both my templates and code. I can now see I need to update my code references to this.route() and I can no longer use just route() in my templates. Inertias example to set $route as a global property also doesnt work as that also expected route() to be global, which it isnt.

Any ideas on how I can still use just route() in both my templates and JS code so I don't have to trawl through the whole thing and update?

I tried with the ziggy-js lib but that needs all the parameters sent to it but we don't have a Ziggy config at that point.

Thanks!

[bakerkretzmar]

You do need to use this.route() in your script tags but you can continue using route() in the templates.

Try this in your app.js:

    createApp({ render: () => h(App, props) })
      .use(plugin)
-     .use(ZiggyVue)
+     .use(ZiggyVue, props.initialPage.props.ziggy)
      .mount(el)

I updated the demo too: https://github.com/bakerkretzmar/pingcrm-ziggy-demo/pull/1/commits/dcfc3b3fde21053dde075b45916db2bdf198eb65