Start a discussion
Back
ReplySubscribe
InertiaGo to solution

Infinite scroll component breaking when navigating pages

Hello,

I have grabbed the infinite scroll logic from Codecourse's Github and made a little component out of it, but I am facing an issue where it breaks the page when trying to navigate to another page that also uses the same component. The component itself works.

<script setup>
    import { ref } from "vue";
    import { useIntersectionObserver } from "@vueuse/core";

    const props = defineProps({
        items: Object,
        endpoint: String,
    });

    const last = ref(null);

    const { stop } = useIntersectionObserver(last, ([{ isIntersecting }]) => {
        if (!isIntersecting) {
            return;
        }

        if (props.items) {
            axios.get(`/api/${props.endpoint}?cursor=${props.items.meta.next_cursor}`).then((response) => {
                props.items.data = [...props.items.data, ...response.data.data];
                props.items.meta = response.data.meta;

                if (!response.data.meta.next_cursor) {
                    stop();
                }
            });
        }
    });
</script>

<template>
    <div ref="last" class="-translate-y-32"></div>
</template>

            <InfiniteScroll :items="posts" endpoint="posts" />

            <InfiniteScroll :items="users" endpoint="users" />

Uncaught DOMException: Proxy object could not be cloned.

Haz
Haz
Moderator
0
2
719
whoami (Daryl)
whoami (Daryl)
Solution

I tried asking Copilot and this is the response.

The error message "Uncaught DOMException: Proxy object could not be cloned" is usually caused by trying to pass a non-serializable object to a different context, such as a different window or iframe.

In your case, it seems that the props.items object that you are passing to the axios.get method is not serializable. You can try to clone the object before passing it to the axios method using JSON.parse(JSON.stringify(props.items)).

        if (props.items) {
            const clonedItems = JSON.parse(JSON.stringify(props.items)); // added
            axios.get(`/api/${props.endpoint}?cursor=${clonedItems.meta.next_cursor}`).then((response) => {
                props.items.data = [...props.items.data, ...response.data.data];
                props.items.meta = response.data.meta;

                if (!response.data.meta.next_cursor) {
                    stop();
                }
            });
        }
0
Reply
Haz
Haz
Moderator

Hello,

I just tried it, and that seems to have resolved the issue. I'm pretty shocked if I'm honest, I didn't initially think it would solve it.

            const clonedItems = JSON.parse(JSON.stringify(props.items));

            axios.get(`/api/${props.endpoint}?cursor=${props.items.meta.next_cursor}`).then((response) => {
                props.items.data = [...clonedItems.data, ...response.data.data];

Thanks!

0
Reply to thread