data-page attribute in react

[obaid]

Is there a way to not expose everything in data-page attribute in inertia-react?

[obaid]

Any ideas?

[reinink]

So, the way Inertia is designed to work is that you only send the data you want exposed to the client-side (React) from the server. Meaning, if you don't want it client-side, don't send it from your controllers.

You can see an example of this in the Ping CRM demo app, in the UsersController:

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'filters' => Request::all('search', 'role', 'trashed'),
            'users' => Auth::user()->account->users()
                ->orderByName()
                ->filter(Request::only('search', 'role', 'trashed'))
                ->get()
                ->transform(function ($user) {
                    return [
                        'id' => $user->id,
                        'name' => $user->name,
                        'email' => $user->email,
                        'owner' => $user->owner,
                        'photo' => $user->photoUrl(['w' => 40, 'h' => 40, 'fit' => 'crop']),
                        'deleted_at' => $user->deleted_at,
                    ];
                }),
        ]);
    }

Notice how we transform the data prior to sending it to the client.

You can find another example in the OrganizationsController, this time interacting with the pagination object:

class OrganizationsController extends Controller
{
    public function index()
    {
        return Inertia::render('Organizations/Index', [
            'filters' => Request::all('search', 'trashed'),
            'organizations' => Auth::user()->account->organizations()
                ->orderBy('name')
                ->filter(Request::only('search', 'trashed'))
                ->paginate()
                ->withQueryString()
                ->through(function ($organization) {
                    return [
                        'id' => $organization->id,
                        'name' => $organization->name,
                        'phone' => $organization->phone,
                        'city' => $organization->city,
                        'deleted_at' => $organization->deleted_at,
                    ];
                }),
        ]);
    }

Hope that helps!

[obaid]

Thanks @reinink. That makes sense. Is there a limit on the data size that we can keep in that attribute? i.e. what if the user wants to see 100 records and each record has 25 columns that are rendered on the client?

[reinink]

The only limits are what the browsers impose, which is massive on Chrome and Safari, but Firefox does have a limit of 640k characters (which is also huge...way more than you want to send in a single request really).

You can find a note about this in the docs here: https://inertiajs.com/responses#maximum-response-size