createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

I'm trying to figure out how to get createInfiniteScroll from @solid-primitives/pagination to work with createServerData$ and useRouteData

I believe createInfiniteScroll expects a fetcher function that returns a Promise<T[]> per the definition https://github.com/solidjs-community/solid-primitives/tree/main/packages/pagination#definition

But I think createServerData$ is like createResource in that it takes an asynchronous fetcher function and returns a signal that is updated with the resulting data when the fetcher completes.

I'm currently trying something like this for createServerData$:

const fetcher = (page: number) => {
    return createServerData$(async () => {
        const elements: string[] = [];
        const res = await fetch(`https://openlibrary.org/search.json?q=hello%20world&page=${page + 1}`, {
            method: "GET",
        });
        if (res.ok) {
            const json = await res.json();
            json.docs.forEach((b: any) => elements.push(b.title));
        }
        return elements;
    });
}

const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(fetcher);

const fetcher = (page: number) => {
    return createServerData$(async () => {
        const elements: string[] = [];
        const res = await fetch(`https://openlibrary.org/search.json?q=hello%20world&page=${page + 1}`, {
            method: "GET",
        });
        if (res.ok) {
            const json = await res.json();
            json.docs.forEach((b: any) => elements.push(b.title));
        }
        return elements;
    });
}

const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(fetcher);

const fetcher = (page: number) => {
    return createServerData$(async () => {
        const elements: string[] = [];
        const res = await fetch(`https://openlibrary.org/search.json?q=hello%20world&page=${page + 1}`, {
            method: "GET",
        });
        if (res.ok) {
            const json = await res.json();
            json.docs.forEach((b: any) => elements.push(b.title));
        }
        return elements;
    });
}

const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(fetcher);

const fetcher = (page: number) => {
    return createServerData$(async () => {
        const elements: string[] = [];
        const res = await fetch(`https://openlibrary.org/search.json?q=hello%20world&page=${page + 1}`, {
            method: "GET",
        });
        if (res.ok) {
            const json = await res.json();
            json.docs.forEach((b: any) => elements.push(b.title));
        }
        return elements;
    });
}

const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(fetcher);

when returning pages() from that I'm getting the errors:
unsupported type
content is not iterable

And trying this for createServerData$ and useRouteData:

const routeData = (page: number) => {
    return createServerData$(async () => {
        const elements: string[] = [];
        const res = await fetch(`https://openlibrary.org/search.json?q=hello%20world&page=${page + 1}`, {
            method: "GET",
        });
        if (res.ok) {
            const json = await res.json();
            json.docs.forEach((b: any) => elements.push(b.title));
        }
        return elements;
    });
}

const data = useRouteData<typeof routeData>();
const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(data);

const routeData = (page: number) => {
    return createServerData$(async () => {
        const elements: string[] = [];
        const res = await fetch(`https://openlibrary.org/search.json?q=hello%20world&page=${page + 1}`, {
            method: "GET",
        });
        if (res.ok) {
            const json = await res.json();
            json.docs.forEach((b: any) => elements.push(b.title));
        }
        return elements;
    });
}

const data = useRouteData<typeof routeData>();
const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(data);

const routeData = (page: number) => {
    return createServerData$(async () => {
        const elements: string[] = [];
        const res = await fetch(`https://openlibrary.org/search.json?q=hello%20world&page=${page + 1}`, {
            method: "GET",
        });
        if (res.ok) {
            const json = await res.json();
            json.docs.forEach((b: any) => elements.push(b.title));
        }
        return elements;
    });
}

const data = useRouteData<typeof routeData>();
const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(data);

const routeData = (page: number) => {
    return createServerData$(async () => {
        const elements: string[] = [];
        const res = await fetch(`https://openlibrary.org/search.json?q=hello%20world&page=${page + 1}`, {
            method: "GET",
        });
        if (res.ok) {
            const json = await res.json();
            json.docs.forEach((b: any) => elements.push(b.title));
        }
        return elements;
    });
}

const data = useRouteData<typeof routeData>();
const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(data);

when returning pages() from that I'm getting the error:
An error occured while server rendering /pagination:
renderToString timed out

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

Similar Threads

Similar Threads

Similar Threads