Is it possible to render just data without view ?

Hello,

In my case, I need to be able to send an Inertia or JSON response via a controller which will be fetched by the component.

I have a sheet without a url which opens on top of a page and I want to be able to do a Get on my web route to retrieve the data.

I tried this:

<?php

namespace App\Http\Controllers;

use App\Data\OperatorMarkerData;
use App\Models\Marker;
use Inertia\Inertia;

class MarkerController extends Controller
{
    public function show(Marker $marker)
    {
        return response()->json([
            'marker' => Inertia::lazy(OperatorMarkerData::from($marker)),
        ]);
    }
}

I receive this

All Inertia requests must receive a valid Inertia response, however a plain JSON response was received.

In my sheet I use router from Inerta like this :

import { useEffect, useState } from 'react';
import ReportMarkerSheet from './ReportMarkerSheet';
import ValidationMarkerSheet from './ValidationMarkerSheet';
import { MarkerData } from '@/types/generated';
import { router } from '@inertiajs/react';

type MarkerSheetProps = {
  markerId: number | null;
  operationId: number;
  isOpen: boolean;
  onOpenChange: () => void;
  tab: string;
};

export default function MarkerSheet({ markerId, operationId, isOpen, onOpenChange, tab }: MarkerSheetProps) {
  const [marker, setMarker] = useState<MarkerData>();

  const fetchMarker = async () => {
    if (markerId) {
      try {
        const test = router.get(route('markers.show', markerId));
        console.log(test);
      } catch (error) {
        console.log(error);
      }
    }
  };

  useEffect(() => {
    fetchMarker();
  }, [markerId]);

  return (
    <>
      {tab === 'validation' ? (
        <ValidationMarkerSheet
          markerId={markerId}
          operationId={operationId}
          open={isOpen}
          onOpenChange={onOpenChange}
        />
      ) : (
        <ReportMarkerSheet markerId={markerId} operationId={operationId} open={isOpen} onOpenChange={onOpenChange} />
      )}
    </>
  );
}

I d'like use inertia to avoid having to create API or other solution if it's possible. I don't want use shared data from Handle Inertia too.

Thank you in advanced

JabatoForever

2 years ago

Level 2

@tiskiel You can't return json from an inertia response u either return a render or a redirect, or any of the allowed responses but Json is not one of those, if u try in an inertia controller it will fail and tell you that is not a valid inertia response when called by the router. if you need to change just part of the data passed to the components as prop u could just use an inertia reload using the only directive in order to fetch only the data you need like so


router.visit(url, {
  preserveState: true,
  preserveScroll: true,
  only: [only data u need],
})

https://inertiajs.com/manual-visits with the only u can call the same endpoint and get ONLY the data u need back. as an alternative u can just make any endpoint and fetch without using inertia then update the state in you component.

1 like

Tiskiel

2 years ago

Level 2

@JabatoForever Thank you for your answer.

I let to use fetch for my use case.

1 like

JabatoForever

2 years ago

Level 2

Great @tiskiel then just create the controller add your route then call it from the component and you are fine

async function fetchSuff() {
  try {
     // Replace with your actual route name and set your state
    const response = await axios.get(route('your-enpoint-name')); 
     setYourData(response.data);
  } catch (error) {
    console.error('Error fetching:', error);
   
  }
}

1 like

Tiskiel

2 years ago

Level 2

@JabatoForever I don't use Axios cause I tryed but it returned me an error.

I used the old way :

const fetchMarker = async () => {
    if (markerId) {
      try {
        const marker = await fetch(`/markers/${markerId}`).then(response => response.json());
        setMarker(marker);
        setIsLoading(true);
      } catch (error) {
        throw new Error('Un problème est survenu');
      }
    }
  };

I'll retry with Axios later.

Thank you again

1 like

Please or to participate in this conversation.