I've currently got a Vue frontend powered by a Laravel API.
I have a user profile section which needs to query 5 different tables within the database to get the required data for several dynamic select boxes and inputs on my profile page on the frontend.
I have two approaches:
Make 5 separate Axios calls to the Laravel API to get the required data. This approach de-couples everything but it comes with the burden of 5 separate requests, each of which need to run through a Middleware for Authentication, Routing to appropriate schema, Setting configs, etc.
Make 1 Axios call to the Laravel API to get all the data required at once for all the different table data. This reduces it to a single request, but the data returned is all kind of mushed together, which makes it tightly coupled.
I cannot do a single query to join all the tables. As the information they contain is not linked.
For me, a single request is preferable in this scenario, especially where it is a single purpose endpoint. I wouldn't be worried about tight coupling; you can structure response data however you would like. If you make a class that implements Responsable interface which has responsibility for building the responsse data, you can return this directly from the Controller:
class Profile implements Responsable
{
protected function getUserDetail()
{
// query for data
// return array structure of data you want to expose.
}
public function toResponse($request)
{
return response([
'user_detail' => $this->getUserDetail(),
// ...
]);
}
}
// Controller action
public function show()
{
return new Profile();
}
If the class needs some params - just create a constructor to accept them.
