S
SolidJS•14h ago
Hussein

<Suspense> not fallbacking correctly

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";

const getData = query(async () => {
  "use server";

  await new Promise((r) => setTimeout(r, 5000));

  return { hello: { other: "hello" } };
}, "data");

export default function Home() {
  const data = createAsync(() => getData());

  return <Suspense fallback={<p>Loading...</p>}>{data().hello}</Suspense>;
}
import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";

const getData = query(async () => {
  "use server";

  await new Promise((r) => setTimeout(r, 5000));

  return { hello: { other: "hello" } };
}, "data");

export default function Home() {
  const data = createAsync(() => getData());

  return <Suspense fallback={<p>Loading...</p>}>{data().hello}</Suspense>;
}
2 Replies
Hussein
HusseinOP•14h ago
TypeError Cannot read properties of undefined (reading 'hello')
TypeError Cannot read properties of undefined (reading 'hello')
i have to put optional chaining (data()?.hello) on every property access and it works is this normal?
Madaxen86
Madaxen86•14h ago
Yes (for solid 1.x) as data is async it may be undefined when we read it, so we must use the optional chaining syntax. This will be changed in Solid2.0 though.

Did you find this page helpful?