How to fetch and insert more data with Inertia

I'm working a logs view that fetches logs from aws cloudwatch. The Vue template would simply be a table with a date and the log messages.

I would like to have the table work like it's tailing the logs. On the first load, it gets the last 30 mins of logs or whatever. It would then poll every 5 seconds and fetch more logs and show the logs at the top of the table.

For the tailing/polling piece, I know that I can simply create a timeout to call a fetchMoreLogs function and insert the newer logs at the front of the logs array, but is there another way to do this that is more in line with Inertia and partial page loading?

Also, my current implementation resets the scroll to the top of the page after the new logs are inserted.

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { router } from "@inertiajs/vue3";

Head.name = "InertiaHead";

const props = defineProps({
    logs: {
        type: Object,
        required: true,
    },
    nextForwardToken: {
        type: String,
    }
});
let logs = ref(props.logs);
let nextForwardToken = ref(props.nextForwardToken);

const logCount = computed(() => {
  return logs.value ? logs.value.length : 0;
});

const convertToClientLocalTime = (timestamp) => {
    const localDate = new Date(timestamp);
    return localDate.toLocaleString(); // You can customize this based on your needs
};


const fetchMoreLogs = () => {
  router.get('/logs', { nextForwardToken: nextForwardToken.value }, {
    preserveState: true,
    onSuccess: (page) => {
      if (page.props.logs && page.props.logs.length > 0) {
        // Insert new logs in the beginning
        logs.value = [...newLogs, ...logs.value];
   
        nextForwardToken.value = page.props.nextForwardToken;
      }
      // Run again
      setTimeout(fetchMoreLogs, 5000);
    },
  });
}

// Run once
setTimeout(fetchMoreLogs, 5000);
</script>

LaryAI

2 years ago

Level 58

The provided code snippet demonstrates how to fetch and insert more data with Inertia in a Vue template. The code uses a timeout to periodically call the fetchMoreLogs function, which fetches new logs and inserts them at the beginning of the logs array.

To achieve a similar result while staying in line with Inertia and partial page loading, you can use the inertia object's visit method instead of directly calling router.get. Here's an updated version of the code:

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head, usePage } from "@inertiajs/inertia-vue3";
import { ref, computed, onMounted } from "vue";

Head.name = "InertiaHead";

const { props } = usePage();
const logs = ref(props.logs);
const nextForwardToken = ref(props.nextForwardToken);

const logCount = computed(() => {
  return logs.value ? logs.value.length : 0;
});

const convertToClientLocalTime = (timestamp) => {
  const localDate = new Date(timestamp);
  return localDate.toLocaleString(); // You can customize this based on your needs
};

const fetchMoreLogs = () => {
  inertia.visit('/logs', {
    preserveState: true,
    data: { nextForwardToken: nextForwardToken.value },
    onSuccess: (page) => {
      if (page.props.logs && page.props.logs.length > 0) {
        // Insert new logs in the beginning
        logs.value = [...page.props.logs, ...logs.value];
        nextForwardToken.value = page.props.nextForwardToken;
      }
      // Run again
      setTimeout(fetchMoreLogs, 5000);
    },
  });
};

onMounted(() => {
  // Run once
  setTimeout(fetchMoreLogs, 5000);
});
</script>

In this updated code, the inertia object's visit method is used to make the API call. The data property is used to pass the nextForwardToken value to the server. The onSuccess callback is triggered when the API call is successful, and it inserts the new logs at the beginning of the logs array.

Additionally, the onMounted lifecycle hook is used to start the initial fetch after the component is mounted.

Please note that you need to make sure you have the @inertiajs/inertia-vue3 package installed and properly set up in your project for this solution to work.

Please or to participate in this conversation.