Best Practices for getting data with Vue

Hi, Each of my users can have multiple organizations that can each have multiple events. I am creating an edit page where they can scroll down their list of organizers and see all the current / past events. I originally setup the page so that I get all the data in one big swoop.

 public function pastEvents()
    {
        return $this->hasMany(Event::class)
                    ->whereDate('closingDate', '<', Carbon::today())
                    ->orderBy('created_at', 'ASC');
    }
public function inProgressEvents()
    {
        return $this->hasMany(Event::class)
                    ->whereDate('closingDate', '>=', Carbon::today())
                    ->orWhereNull('closingDate')
                    ->orderBy('created_at', 'ASC');
    }
public static function getOrganizerEvents()
    {
        $organizers = auth()->user()->organizers->load([
            'pastEvents' => function ($builder) {
                $builder->where('user_id', auth()->id());
            },
            'inProgressEvents' => function ($builder) {
                $builder->where('user_id', auth()->id());
            }
        ]);
        $eventsbyorganizer = $organizers->map(function ($organizer) {
            return [
                        'id' => $organizer->id,
                        'name' => $organizer->name,
                        'slug' => $organizer->slug,
                        'largeImagePath' => $organizer->largeImagePath,
                        'thumbImagePath' => $organizer->thumbImagePath,
                        'past_events' => $organizer->pastEvents,
                        'in_progress_events' => $organizer->inProgressEvents,
                        'hexColor' => $organizer->hexColor,
            ];
        });
        return $eventsbyorganizer;

however I am now seeing that this is going to cause me a headache with pagination. I was thinking that I was going to switch it a more simple solution where I load all the organizers and then do a foreach axios call for each organizer.

getEvents() {
foreach( through the organizers and do an axios call to get the events for each)

It is more calls to the server but I think it will give me better control.

Is this an OK way to proceed or is there a better way?

[email protected]

5 years ago

Level 6

Just my 2 cents : In these situations I would keep an eye on a few things

Databases - Query only the data required (nothing more, nothing less).
Databases - if your want try and model/shape query results using the database and not the front end. (Specifically, returning say, 10 of 50 events)
Big O - If I can avoid even just 1 loop, I will do it. However, there are cases where it could be unavoidable OR even preferred)

I'm assuming you are using Vue, so if you are adhering to pagination then only query for the fist x of n (ex: 10 of 50). Then have axios call an endpoint with the next pagination parameters. So on and so forth.```

But now a days systems, clouds and containers are very performant and it wouldn't matter either way unless your are dealing with millions of transactions a minute.

Please or to participate in this conversation.