adding xhr

[merijnponzo]

It would be nice if I can use the this.$inertia.get() request to simply return a json object.
Now it's always redirecting to the route i'm requesting.

So for example:

const users = await Inertia.get('/users', { search: 'John' }, { xhr: true, only:'users'})

To only get the users object
I am using axios for now but still, this would return all of the data with all of the props

[reinink]

So this sort of defeats the purpose of Inertia. The goal with Inertia is to provide data to your page components via page props. To access data this way would require manually tracking page data (props) in local component state, which introduces client-side state issues.

Further, you should be able to make an Inertia visit directly to /users without a redirect occurring. Redirects are really only used after you create/update/delete something, and want to redirect to a different page.

[merijnponzo]

let's explain my case:

src/filmography/index.vue is an archive with tiles, clicking a tile shows the project data within a custom modal
src/filmography/single.vue shows the project data when a visitor navigates to filmography/my-project

Would there be an approach without axios to this case?

[reinink]

Yeah, you totally don't need axios for this. The key with Inertia to try and imagine how you would do this if you were building an app with full page loads and server-side rendering.

For example, on your index page, when you click an item, you could make a request to /filmography?preview=123, passing through the id of the project. Then, in your controller, when the preview query parameter is set, include the necessary information for the preview modal within the index response in a project prop. Then, simply show/hide the preview modal based on whether a the project prop is null or set.

Here's an example of how you would do this:

class Filmography
{
    public function index()
    {
        $projects = Project::paginate()->through(fn ($project) => [
            'id' => $project->id,
            'name' => $project->name,
            // etc
        ]);

        if (Request::input('preview')) {
            $project = tap(Project::find(Request::input('preview')), fn ($project) => [
                'id' => $project->id,
                'name' => $project->name,
                'other' => $project->other,
                // etc
            ]);
        }

        return Inertia::render('System/Users/Index', [
            'projects' => $projects,
            'project' => $project ?? null,
        ]);
    }

    public function show(Project $project)
    {
        return Inertia::render('System/Users/Index', [
            'project' => [
                'id' => $project->id,
                'name' => $project->name,
                'other' => $project->other,
                // etc
            ],
        ]);
    }
}

That all said, we are working on first-class modal support for Inertia, which is going to make doing these kinds of things even easier. Point is, either way, you don't axios.

[merijnponzo]

thank you for rethinking the logic, the mvc approach does make sense to me- coming from rest and rest only I came up with a method within my archive index.vue

async viewProject(project) {
    const projectResult = await axios.get(project.link)
    this.content = projectResult.data.props.project
    this.changeUrl('/filmography', project.link)
    this.showModal = true
},

where changeUrl is a simple pushState to change the url as well when clicking the tile and showing the modal.
So when refreshing the browser the visitor sees the full project page

within index.vue

<Modal><Project :content="content/></Modal>

And within my single.vue

<Project :content="content">

Where project is my project layout.

I will test the MVC approach as well (without axios)!

Thanks

[ayophanz]

same issue here, I have post edit this works fine but I want to update image alone with updating entire form, I want to update this particular image then have a response, in inertia I think this is not possible.