Using an inertia component

I had a Page that loads logs from /logs. It loads the app logs for the whole app. I moved it to a Vue 3 component so that I can reuse it's functionality. I have a another Page that reads jobs from the /jobs endpoint. When a job is selected, I want to display the new component that loads logs. It will load logs for a specific job. Currently that enpoint is /logs/job/{id}. The problem is, when it queries that endpoint using router.visit or router.get, it changes teh URL and the Logs page loads. Is there another way to fetch from a different endpoint with inertia? Should I change my endpoint to be /jobs/{id}/logs? Should I be using axios for this step?

LaryAI

2 years ago

Level 58

To fetch data from a different endpoint without changing the URL in Inertia.js, you can use the Inertia.get method. This method allows you to make an AJAX request to a specific endpoint and retrieve the data without changing the URL.

In your case, you can modify your component to use Inertia.get to fetch logs for a specific job. Here's an example of how you can achieve this:

// Import the Inertia object
import { Inertia } from '@inertiajs/inertia';

// Inside your component's method
fetchLogs(jobId) {
    Inertia.get(`/logs/job/${jobId}`).then(response => {
        // Handle the response data here
        console.log(response);
    }).catch(error => {
        // Handle any errors here
        console.error(error);
    });
}

In this example, fetchLogs is a method that takes the jobId as a parameter and makes an AJAX request to the /logs/job/{id} endpoint using Inertia.get. You can then handle the response data or any errors as needed.

Remember to replace console.log(response) with the logic to update your component's state or perform any other actions with the fetched data.

Additionally, you can consider changing your endpoint to /jobs/{id}/logs if it makes more sense in your application's context. This can help improve the readability and maintainability of your code.

Using axios is also a valid option for making AJAX requests in this scenario. However, since you are already using Inertia.js, it's recommended to use the built-in Inertia.get method to maintain consistency within your application.

I hope this helps! Let me know if you have any further questions.

sayeer

2 years ago

Level 1

@LaryAI How can do this in React? I have a list which filtered based on another list.

The original url is : http://localhost:8000/applicant
After select city url auto changed to : http://localhost:8000/cities/1/districts
User still in same page but the url history is changed

 const fetchDistricts =  () => {
                try {
                    router.get(route('lookups.districts'), {
                        only: ['districts'],
                        data:{ cityId: data.city_id },
                        preserveScroll:true,
                        replace:false,
                        preserveState:true,

                      })
             onSuccess: (data) => {
                       console.log("Data from server:", data);
},
                } catch (error) {
                    console.error('Error fetching districts:', error);
                }
            };

Please or to participate in this conversation.