SolidJSS
SolidJS•2y ago•
3 replies
terenced

Solid +Astro SSR + Data Fetching on hydration

Hi! I working on an Astro site with Solid and I am having trouble getting Solid to fetch data.
I would like to only fetch the component has been hydrated, but can't seem to get it to work.

I am trying to detect if we are on the client by looking if window is defined.
The console logs are correct, but the fetch is never triggered.
What am I doing wrong? Please keep in mind this is the 1st time I am using Solid


const fetchCurrent = async (isSSR: boolean) => {
  console.log("fetching...", isSSR);

  if (isSSR) return;
  await new Promise((resolve) => setTimeout(resolve, 4000));
  const response = await fetch("/api/currently/reading");
  return response.json() as Promise<Book>;
};

export default function CurrentRead() {
  const [isSSR] = createSignal(typeof window === "undefined");
  const [current] = createResource(isSSR, fetchCurrent);

  createEffect(() => {
    console.log(">> ssr", isSSR());
  }, [isSSR]);

  return (
    <>
      <span>fooo</span>
      <Show when={current.loading}>
        <p>Loading...</p>
      </Show>
      <Switch>
        <Match when={current.error}>
          <span>Error</span>
        </Match>
        <Match when={current()}>
          <div>{JSON.stringify(current())}</div>
        </Match>
      </Switch>
    </>
  );
}
Was this page helpful?