Collecting additional data after the initial render

I'm very new to Inertia and struggling to figure out the correct way to load additional data after some interaction with the user. I see posts referring to usePage().$inertia.get() but I think this is legacy as I cannot find documentation anywhere. In the current docs I see the explanation for partial reloads which might be what I need, but I'm just not sure how to pass parameters with the reload or if that's even the right way!

So I have a Vue Page that receives a Collection of 'Topics' from my 'TopicController'. The Vue page loops through the collection and shows a component for each Topic.

From my controller:

    public function index()
    {

        return Inertia::render('Topic/Index',[
            'topics' => Auth::check() ? Topic::mine()->orderBy('name')->with('descendants')->withCount('flashcards')->get() : null,

        ]);

    }

When the user clicks on a Topic I want to collect more data for that specific Topic from the backend but I need to be able to pass back the topic id so that the backend can gather the additional data, but I'm not sure how to pass back the topic id as part of the reload() or how to get the Controller to return it. Or should I be using $inertia.get() instead?

I'm guessing it's something like:

router.reload({ only: ['topicData'], 'topicid': topic.id})

and in my controller:

    public function index($topicId = null)
    {

        return Inertia::render('Topic/Index',[
            'topics' => Auth::check() ? Topic::mine()->orderBy('name')->with('descendants')->withCount('flashcards')->get() : null,
           'topicData' => Inertia::lazy(fn () => getSomeExtraTopicData($topicId)),

        ]);

    }

In case you think I should just pass all the topic data in the initial load, the additional topic data requires a couple of database calls to get some related models and it would be too expensive to do that for each topic in advance.

I hope that makes some sense!

TIA

bwrigley

3 years ago

Best Answer

Level 5

Seems I was on the right path but incorrectly formatted. This is what I've ended up with:

Controller:

    public function index(Request $request)
    {

        $editTopic = isset($request->edittopic) ? $request->edittopic : [];

        return Inertia::render('Topic/Index',[
            'topics' => Auth::check() ? Topic::mine()->orderBy('name')->with('descendants')->withCount('flashcards')->get() : null,
            'topicParents' => Inertia::lazy(fn () => ($editTopic ? Topic::find($editTopic)->getPossibleParents() : [])),
        ]);

    }

When the user clicks on a Topic a component is shown which contains:

<script setup>

	import { router} from '@inertiajs/vue3';
	import { onMounted} from 'vue';

///

     onMounted(() => {
        router.reload({ only: ['topicParents'], data: { edittopic: currentTopic.value.id } })
    });

</script>

dixievela11

2 years ago

Level 1

@bwrigley Hello, were you able to carry out the implementation? I was searching almost the entire network without any successful results. Yours was almost close but I get the following error in the controller: Undefined variable $brand_id The funny thing is that if I print the variable with dd() if it has data, I really don't understand what I could be doing wrong.

bwrigley

2 years ago

Level 5

@dixievela11 perhaps you could share a bit more of your code?

Please or to participate in this conversation.