Dog Posts - Answer Overflow

Dog

•Created by Dog on 10/11/2023 in #support

Anyone using solid-social with solid-markdown?

I'm trying to figure out how to get solid-social to work with solid-markdown, if anyone is using both and could help it'd be much appreciated. I have tried:

import SolidMarkdown from "solid-markdown";
import { YouTube } from "solid-social";

<SolidMarkdown
  components={{
    YouTube: (props) => (
      <YouTube {...props} />
    )
  }}
  children={markdown}
/>

import SolidMarkdown from "solid-markdown";
import { YouTube } from "solid-social";

<SolidMarkdown
  components={{
    YouTube: (props) => (
      <YouTube {...props} />
    )
  }}
  children={markdown}
/>

markdown containing:

## Title
---
<YouTube youTubeId="C0DPdy98e4c" />

## Title
---
<YouTube youTubeId="C0DPdy98e4c" />

The title converts from markdown to html fine

69 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

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);

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);

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

22 replies

Gaming

Programming