How to hide params from the URL with an InertiaJS get request ?

Hello,

Without InertiaJS, I had this code.

axios.get('/api/students', { params: { levelId: this.levelId } })

With InertiaJS, I have this code.

Inertia.visit(route('prices.index'), {
  preserveState: true,
  data: { levelId: this.levelId },
  only: ['prices']
}, { replace: true })

With the axios query, the URL remains : http://localhost:8000/prices but with InertiaJS, the URL is updated to http://localhost:8000/prices?levelId=2.

I'd like to hide the params from the URL.

How is it possible to do that with InertiaJS with a GET request ? (like with axios)

Thanks for your help.

Vincent

tykus

3 years ago

Best Answer

Level 104

You cannot; these are not the same techniques - with axios you are making an asynchronous request (there was an earlier request to load the page), whereas the Inertia approach is a single page application which needs the query params to fetch the relevant data in the same visit.

2 likes

vincent15000

3 years ago

Level 63

@tykus Ok thank you ;).

molnarervin

11 months ago

Level 9

Actually, you can do this using method spoofing.

Say you have a GET route, but you want to send the request as POST while still making it behave like a GET. You can include a _method: 'get' field in the request to spoof the method.

For example:

productSearchForm: useForm({
    search: '',
    category: '',
    subCategory: '',
    // Spoof the request method so the URL stays clean without GET parameters
    _method: 'get',
}),

Then, you can just send the form normally:

this.productSearchForm.post(route(route().current(), this.order.order_id))

This works with .visit() as well, not just the form helper.

Hope this helps!

Please or to participate in this conversation.