Use already existing InertiaController as an API replacement

[thoresuenert]

Yesterday, i played around with the new preserveUrl feature. I developed the idea to use other inertia routes as endpoints for search selects or dialogs to filter and search data.

In one of my projects i have a form/show route where I add the relationships customer and documents to filter and search.

To populate the data for my form i have the following Controller:

public function __invoke(Request $request)
    {
        return Inertia::render('show/page', [
            'filters' => $request->all(),
            'documents' => fn () => 
                Document::with('membership')
                    ->filter($request->only('search', 'type'))
                    ->paginate(5)
                    ->appends($request->all()),
            'customers' => fn () => Customer::filter($request->only('search'))
                    ->paginate(3)
                    ->appends($request->all()),
        ]);
    }

In another part of the application I also have these IndexControllers for both relationships:

public function __invoke(Request $request)
    {
        return Inertia::render('documents/index/page', [
            'filters' => $request->all(),
            'documents' => fn () => 
                Document::with('membership')
                    ->filter($request->only('search', 'type'))
                    ->paginate()
                    ->appends($request->all()),
        ]);
    }

public function __invoke(Request $request)
    {
        return Inertia::render('customers/index/page', [
            'filters' => $request->all(),
            'customers' => fn () => Customer::filter($request->only('search'))
                    ->paginate(3)
                    ->appends($request->all()),
        ]);
    }

Now I got the following Idea:

• I want to cross load data for a prop from another url, for this example i want to load data from /documents and /customers where i already implemented all search functionality (the IndexControllers above)
• I want to show that data in a select popover or dialog, I dont need to store the data in the url for hard reloads
• I have one place to build a full blown search and filter data

To achieve this behavior I need to load the data as follows:

// data includes the search and filter parameter
router.get('/documents', data, { 
  // we want to load partial data for the popover/dialog
  only: ['documents'],
  // we want to stay on the same page where I trigger this request (the show page)
  preserveUrl: true
});

I updated the index endpoint as seen here:

// route: /documents
public function __invoke(Request $request)
    {
        return Inertia::render($request->header('X-Inertia-Partial-Component','documents/index/page'), [
            'filters' => $request->all(),
            'documents' => fn () => 
                Document::with('membership')
                    ->filter($request->only('search', 'type'))
                    ->paginate()
                    ->appends($request->all()),
        ]);
    }

Now instead of loading data from the inertia show/page we get the data from the documents/index/page.

When we trigger a partial request we load the component from the header, otherwise the default view is rendered[1]

• When we are on the page /documents the X-Inertia-Partial-Component is set to documents/index/page and everything works fine
• When we are on the show page the X-Inertia-Partial-Component is set to show/page and we stay on the current page with the current component

What do you think about this idea/approach to re use an existing endpoint as an api endpoint for async components like searchable select?

Further work to do:
Find a way to intially load the data. There are multiple options:

1. Load it in the controller for the page and think of it as part of the page
2. Modify WhenVisible to allow other request types than the hardcoded reload
3. In React just use useEffect to trigger the async load when the component is rendering on the page

[1] Background:
This approach only works because the inertia router checks if the payload component is the same as the current component and stays on the same page.
Every inertia request has the following header X-Inertia-Partial-Component which is the current page component.