Am I obliged to combine Suspense with Show?

I get the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')

I understand the cause, but I'm surprised. I was expecting that the

Suspense

Suspense

would delay the children until the data is available. Adding a

Show

Show

solves the issue, but I'm wondering if I can handle this differently.

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";

type Program = {
  id: string;
  name: string;
};

export default function List() {
  const categories = createQuery<Program[]>(() => ({
    queryKey: ["programs"],
    queryFn: async () => {
      return fetch("http://localhost:4000/api/programs")
        .then((res) => res.json())
        .then((data) => data.data);
    },
  }));

  return (
    <div>
      <h1>Programs</h1>
      <Suspense fallback={<p>Loading...</p>}>
        {JSON.stringify(categories.data!.map((c) => c.name))}
      </Suspense>
    </div>
  );
}

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";

type Program = {
  id: string;
  name: string;
};

export default function List() {
  const categories = createQuery<Program[]>(() => ({
    queryKey: ["programs"],
    queryFn: async () => {
      return fetch("http://localhost:4000/api/programs")
        .then((res) => res.json())
        .then((data) => data.data);
    },
  }));

  return (
    <div>
      <h1>Programs</h1>
      <Suspense fallback={<p>Loading...</p>}>
        {JSON.stringify(categories.data!.map((c) => c.name))}
      </Suspense>
    </div>
  );
}

binajmenOP•4/11/24, 5:15 PM

In this simplified example, I could use ? instead of !

But in my current issue, I'm using solid-table:

peerreynders•4/11/24, 6:26 PM

I've never used but if it's protocol is similar to

createResource

createResource

I'd expect

.data

.data

to be

undefined

undefined

before the first promise settles. If that is the case you should be able to write:

thetarnav•4/11/24, 7:57 PM

tip: set the initialValue of resource (or whatever the equivalent is for createQuery) and you won’t have to deal with data()?.stuff or <Show>

binajmenOP•4/11/24, 7:58 PM

So Suspense would not be the right tool in this case?

Tthetarnav tip: set the initialValue of resource (or whatever the equivalent is for createQ...

binajmenOP•4/11/24, 7:58 PM

Hmmm true

binajmenOP•4/11/24, 7:58 PM

Most probably tanner thought about that

binajmenOP•4/11/24, 7:59 PM

But I should still use Suspense even with an initial value, right?

thetarnav•4/11/24, 8:00 PM

you’ll never see the Suspense fallback though
(unless using ssr)

thetarnav•4/11/24, 8:00 PM

or maybe even not then
idk

thetarnav•4/11/24, 8:02 PM

ah no
you’ll not see the fallback if you do
will trigger fallback

binajmenOP•4/11/24, 8:32 PM

Ok ill try that

binajmenOP•4/11/24, 8:33 PM

What I understand is that you choose Suspense or Show but not both

Bbinajmen What I understand is that you choose Suspense or Show but not both

peerreynders•4/11/24, 9:58 PM

I look at and / as a means of supplying rendering alternatives.

<Suspense>

<Suspense>

is more about the paint holding during a transition (marked by unsettled async operations) while rendering the alternate, future branch; the fallback is only relevant in the absence of a transition which often is only the very first time the

<Suspense>

<Suspense>

sub-tree renders.

Chrome for Developers

Paint Holding - reducing the flash of white on same-origin navigati...

A quick overview of paint holding. A Chrome feature for reducing the flash of white on same-origin navigations

binajmenOP•4/12/24, 7:09 AM

Hi @thetarnav, I liked the idea of providing an initial value. With I can either use or . I choose the latter as it doesn't pollute the cache:

Placeholder data allows a query to behave as if it already has data, similar to the initialData option, but the data is not persisted to the cache.
(src: https://tanstack.com/query/v3/docs/framework/react/guides/placeholder-query-data#what-is-placeholder-data)

However I'm facing a different problem. When the data is loaded, the DataTable component is not updating the values accordingly

binajmenOP•4/12/24, 7:10 AM

I even tried with an intermediary signal (in comment) without success:

binajmenOP•4/12/24, 7:11 AM

But this is probably a different question

binajmenOP•4/12/24, 7:40 AM

supportThe props are reactive, right?

thetarnav•4/12/24, 7:40 AM

shouldn’t take an accessor as one of the params?
either it has some mechanism for handling reactive input
or the whole thing needs to be wrapped in a memo

binajmenOP•4/12/24, 7:40 AM

Got my answer on reactivity there

binajmenOP•4/12/24, 7:41 AM

by accessor you mean ?

binajmenOP•4/12/24, 7:41 AM

I was not aware of this