Help with Inertia manual visits

I have a table where I can select multiple records and delete them. I am currently doing this using axios as in the example.

data(){return{
	ids : [1,2,3]
}},
methods:{
	delete(){
		axios.post('/posts/delete', {ids:ids})
		.then((response) => {
			if(response.data == true)
				this.posts = this.posts.filter(post => !ids.includes(post.id))
		})
	}
}

What is the best way to do this in inertia? Should I use manual visits?

LaryAI

2 years ago

Level 58

Yes, you can use manual visits in Inertia to achieve this functionality. Here's an example of how you can do it:

In your Vue component, create a method to handle the delete action:

methods: {
  deletePosts() {
    this.$inertia.post('/posts/delete', { ids: this.ids }).then(() => {
      this.$inertia.visit(this.$page.current_url)
    })
  }
}

In your Laravel controller, handle the delete action and return a response:

public function delete(Request $request)
{
  $ids = $request->input('ids');
  Post::whereIn('id', $ids)->delete();

  return response()->json(true);
}

In your Laravel route file, define the route for the delete action:

Route::post('/posts/delete', [PostController::class, 'delete']);

This will delete the selected posts and then reload the current page using Inertia's manual visit method.

Udev

2 years ago

Level 2

@LaryAI I get an error, "cannot read properties of undefined (reading 'then')", after trying this.

JabatoForever

2 years ago

Level 2

Hi @udev, you should not use then you can use the onSuccess callback:

import { router } from '@inertiajs/vue3'

router.visit(url, {
  method: 'get',
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  onCancelToken: cancelToken => {},
  onCancel: () => {},
  onBefore: visit => {},
  onStart: visit => {},
  onProgress: progress => {},
  onSuccess: page => {},
  onError: errors => {},
  onFinish: visit => {},
})

so it would be:

router.visit(url, {
  onSuccess: page => {
      this.posts = this.posts.filter(post => !ids.includes(post.id))
  },
  onError: errors => {},
  onFinish: visit => {},
})

1 like

Udev

2 years ago

Level 2

@JabatoForever This is also the way I attempted after going through the docs. i.e.

router.delete(this.url, {ids : ids}, {
	onBefore: () => confirm(message),
    onSuccess: (response) => { console.log(response.data) }
})

let say I do return $request->all(); from the controller. I then get All Inertia requests must receive a valid Inertia response, however a plain JSON response was received.

JabatoForever

2 years ago

Best Answer

Level 2

Yes indeed all Inertia requests must receive a valid Inertia response, meaning you can't just return json data u either return an inertia::render, or one of the accepted responses like a redirect, just call the delete endpoint and then redirect back, the record will no longer be present in the page.


    /**
     * Remove the specified resource from storage.
     */
    public function destroy(Income $income)
    {
        $income->delete();
        return redirect()->back()->with('success', 'deleted');
    }

  function deleteRecord() {
        router.delete(route('income.destroy', income.id),{
            preserveState: true,
            preserveScroll: true,
           // we specify what we want to be replaced here
            only: ['incomes']
        });
    }

1 like

Udev

2 years ago

Level 2

@JabatoForever Wont this be taxing to the server? Fetching all the records again? Also, in case I need to set up API endpoint that can work on a mobile app, I'll have to create other controllers which can be tedious for a larger project.

JabatoForever

2 years ago

Level 2

@udev, i always used this approach and never had big problems since usually you are dealing with a paginated response and limiting the results is already enough, always done it and never had a problem. For the second point if you are thinking about building endpoints that can be consumed by other apps as well as your website front end then i believe the best approach would be to build you front-end separately, and then reuse all the endpoints for the others apps. If you use inertia in your front end you should consider that part of the app as separate from your API endpoints.

1 like

Please or to participate in this conversation.