createServerData$ question

Hi,

In example page below, why do I need to call

data()

data()

data()

data() in the export page function for the data to load (or to enable reactivity)?

It's not blocking me, but curious if I'm doing something wrong, and seems like it should be unnecessary, esp. since

data

data

data

data is referenced in the templated section.

Thanks!

import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
    a: string;
};
export function routeData() {
    console.log("getting route data");
    return createServerData$(async () => {
        await sleep(2000);
        const t: Test = { a: "hello" };
        return t;
    });
}

export default () => {
    // const params = useParams();
    const data = useRouteData<typeof routeData>();
    data(); // <== Page won't update unless call data here.
    return (
        <Show when={!data.loading} fallback={<div>loading...</div>}>
            <div>test-page</div>
            <pre>{data()?.a}</pre>
        </Show>
    );
};

import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
    a: string;
};
export function routeData() {
    console.log("getting route data");
    return createServerData$(async () => {
        await sleep(2000);
        const t: Test = { a: "hello" };
        return t;
    });
}

export default () => {
    // const params = useParams();
    const data = useRouteData<typeof routeData>();
    data(); // <== Page won't update unless call data here.
    return (
        <Show when={!data.loading} fallback={<div>loading...</div>}>
            <div>test-page</div>
            <pre>{data()?.a}</pre>
        </Show>
    );
};

import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
    a: string;
};
export function routeData() {
    console.log("getting route data");
    return createServerData$(async () => {
        await sleep(2000);
        const t: Test = { a: "hello" };
        return t;
    });
}

export default () => {
    // const params = useParams();
    const data = useRouteData<typeof routeData>();
    data(); // <== Page won't update unless call data here.
    return (
        <Show when={!data.loading} fallback={<div>loading...</div>}>
            <div>test-page</div>
            <pre>{data()?.a}</pre>
        </Show>
    );
};

import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
    a: string;
};
export function routeData() {
    console.log("getting route data");
    return createServerData$(async () => {
        await sleep(2000);
        const t: Test = { a: "hello" };
        return t;
    });
}

export default () => {
    // const params = useParams();
    const data = useRouteData<typeof routeData>();
    data(); // <== Page won't update unless call data here.
    return (
        <Show when={!data.loading} fallback={<div>loading...</div>}>
            <div>test-page</div>
            <pre>{data()?.a}</pre>
        </Show>
    );
};

createServerData$ question

Similar Threads

Similar Threads

Similar Threads