Inertia/Jetstream return data to page without re-render

Question

New to Inertia and having some trouble figuring this out:

I have a search bar on a Vue page and want to return a set of filtered results for the user to select as a dropdown from the search bar. I'm passing a query parameter from the search bar to the Laravel Controller and performing a where clause with the user query:

public function showFilteredResponse(Request $request)
{
    $query = $request->query('query'); //Query passed from Vue
    $filteredResults = DB::table('documents')
        ->where('title', 'like', '%' . $query . '%')->get();

    $filteredResults //this contains the data I want the front-end to have access to. 
                     //how can this data be passed to Vue without a full page re-render?

}

How can the $filteredResults data be returned to the user without re-render of the whole page? To render an initial page with data I have the following:

return Jetstream::inertia()->render($request, '/home')->with('documents', $documents);

But if I want to add new data to a page without re-render how can this be done?

If I use inertia()->render()->with(), then sure enough I can access the $filteredResults on the Vue page but I lose the props from the initial page load unless I duplicate queries which doesn't seem like the right way to go.

The PingCRM demo project that was made to showcase inertia.js has a filtering option using search. [Check out how it is done here.](https://github.com/inertiajs/pingcrm/blob/master/app/Http/Controllers/OrganizationsController.php#L15-L29) — Linus Juhlin, Jun 22 '21 at 08:06

score 4 · Answer 1 · answered Aug 12 '21 at 23:28

I believe you're struggling with a misunderstanding of the core concept of Inertia. Don't worry. That's common when dealing with projects that bring the line between the front and back ends closer together.

If I understood correctly, you're doing a normal XHR request to your showFilteredResponse method (probably using axios). If that's the case, you need to handle the response manually on the client side in the same way you would on a normal Vue app without Inertia.

Now, another way to go about this (probably a better one), is to take advantage of the concept of Inertia. Instead of having an isolated method for filtering your results and making a normal XHR request to it, you do the filtering in the same method that rendered the list at the first, this means that you will use also the same URL for filtering, only passing different parameters to it.

Take a llok at this example. Pay attention to the watch property of the Vue component. What the watcher does when the search model updates is to simply make a request to the same URL it used to render the list at first time, but passing the updated parameters.

this.$inertia.get(this.route('organizations'), pickBy(this.form), { preserveState: true })

Another way would be to simply reload the page via Inertia with the updated parameters. And when I say reload, it WILL NOT refresh the entire page, but only the relevant Vue component.

this.$inertia.reload({
   data: pickBy(this.form)
})

Inertia/Jetstream return data to page without re-render

1 Answers1