More than 1 inertia data in Laravel Vue

Question

I am loading page with inertia in Laravel, but when I apply any filter it keeps GET/POST parameters from first render and also create new set of parameters.

So if I apply filter again Inertia.post will run twice. same will happen if I filter 3rd time. Inertia.post will run 3 time. The code files are too large, so I am sharing the inertia part only. Hope that will be enough? Let me know if need more details please.

Thank you guys.

web.php

Route::get('sales', [SalesController::class, 'showSalesGraph'])->name('showSalesGraph');

SalesController.php

return Inertia::render('Sales', [
            "sales" => $salesData,
            "startDate" => $startDate,
            "EndData" => $endDate
        ]);

sales.vue

import { Inertia } from "@inertiajs/inertia";
import { computed, ref, reactive, inject, Vue } from "vue";

setup(props) {
   const postData = reactive({
        startDate: startDate,
        endDate:endDate,
        _token: usePage().props.value.csrf_token,
        change: "custom",
      });

   Inertia.get("sales", postData, {});
}

Answer 1

When you are using Inertia to fetch data, you should use

Inertia.reload({
    only: ['properties'], 
    data: {}, 
    method: 'POST/PUT/GET/PATCH'
});

In your Controller, you can then conditionally load your InertiaData:

public function index(Request $request): \Inertia\Response 
{    
    $validatedRequest = $request->validate([
         'date_start' => 'required|datetime',
         'date_end'   => 'required|datetime',
    ]);
    
    return Inertia::render('Pages/Some/Component', [
         ...$validatedRequest,
         'data' => fn() => $this->loadGraphData($request),
    ]);
}

private function loadGraphData(Request $request): array
{
    // do something that might be heavy..
    return [];
}

What this allows you to do is to load the graph data only when it is requested OR on the first load. You can read more about this in Inertia's documentation about Partial Reloads: https://inertiajs.com/partial-reloads

If you want to submit standard forms, i would suggest using Inertia's useForm helper.

eg

<script setup>
const form = useForm({name: '', date_start: null, date_end: null});
</script>
<template>
    <input v-model="form.name"/>
</template>