Solid-Query example returns repositoryQuery.data is undefined

[dhruvy1]

Describe the bug

Solid-Query example returns repositoryQuery.data is undefined

Your minimal, reproducible example

https://stackblitz.com/edit/solidjs-templates-q6qdg3?file=src%2FApp.tsx

Steps to reproduce

• Create a SolidJS project from scratch.
• Use code specified in SolidQuery documentation to re-create the example.
• Observe error repositoryQuery.data is undefined.

My guess is SolidQuery is not interacting correctly with Solid's <Suspense>

Expected behavior

updated_at should be displayed, or <div>Loading...</div> should render while loading content.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: MacOS
• Browser: Firefox

Tanstack Query adapter

solid-query

TanStack Query version

5.40.0

TypeScript version

5.3.3

Additional context

The example works as expected if i wrap it in <Show when={repositoryQuery.isSuccess}>.

So my guess is SolidQuery is not interacting correctly with Solid's <Suspense>

[TkDodo]

The error I'm seeing is a different one:

chunk-3OVJGQWJ.js?v=991034ec:1661 TypeError: Cannot read properties of undefined (reading 'laast_')
    at App.tsx?t=1717789917727:41:56
    at Object.fn (chunk-GNBOLAET.js?v=991034ec:337:60)
    at runComputation (chunk-3OVJGQWJ.js?v=991034ec:786:22)
    at updateComputation (chunk-3OVJGQWJ.js?v=991034ec:769:3)
    at createRenderEffect (chunk-3OVJGQWJ.js?v=991034ec:260:5)
    at insert (chunk-GNBOLAET.js?v=991034ec:337:3)
    at get children (App.tsx?t=1717789917727:41:13)
    at Object.fn (chunk-3OVJGQWJ.js?v=991034ec:1796:49)
    at runComputation (chunk-3OVJGQWJ.js?v=991034ec:786:22)
    at updateComputation (chunk-3OVJGQWJ.js?v=991034ec:769:3)

[dhruvy1]

@TkDodo apologies there was a typo in my stackblitz playground

Here is an updated link without the laast typo. Please click refresh within stackblitz as it shows inconsistent result on the first load.

It should match the TanQuery example:

https://stackblitz.com/edit/solidjs-templates-q6qdg3?file=src%2FApp.tsx

[antonio-pas]

When you access repositoryQuery.data, the promise has not resolved yet because Suspense creates the elements immediately. You need to add a ? to make sure repositoryQuery.data exists. The Solid documentation on Suspense does a good job of explaining it:

const MyComponentWithSuspense = () => {
  const [profile] = createResource(async () => {
    /* fetcher code here */
  })
  return (
    <Suspense fallback={<div>fetching user data</div>}>
      <div>{profile()?.name}</div>
      <div>{profile()?.email}</div>
    </Suspense>
  )
}

In this case, the divs are created immediately, but instead of being attached to the document body, the fallback is shown.

The example at the top of the page using createResource will give an error as well, it should be updated to this:

    <div>
      <div>Static Content</div>
      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
        <Suspense fallback={<div>Loading...</div>}>
        {/* needs the new ? */}
         <div>{repository()?.updated_at}</div>
        </Suspense>
      </ErrorBoundary>
    </div>

[dhruvy1]

Thanks for the pick up @antonio-pas I have created a PR to fix this in docs.