Update Solid DB to enable Suspense

[fezproof]

🎯 Changes

The main change in this PR is that tanstack solid db now has Suspense support by default. This is more inline with the rest of the solid ecosystem and tanstack query.

// Use Suspense boundaries
const todosQuery = useLiveQuery((q) =>
  q.from({ todos: todoCollection })
)

return (
  <Suspense fallback={<div>Loading...</div>}>
    <For each={todosQuery()}>
      {(todo) => <li key={todo.id}>{todo.text}</li>}
    </For>
  </Suspense>
)

Updated the API for solid js to be more inline with solid js createResource. This is a breaking change to the API, as status, collection, and the various loading states are now getters instead of Accessors. This actually kinda simplifies the API, especially for collections.

// Access collection methods directly
const existingQuery = useLiveQuery(() => existingCollection)

// Use collection for mutations
const handleToggle = (id) => {
  existingQuery.collection.update(id, draft => { draft.completed = !draft.completed })
}

✅ Checklist

• [?] I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

[changeset-bot]

🦋 Changeset detected

Latest commit: fbbcaed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@tanstack/solid-db	Minor
@tanstack/db-example-solid-todo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[KyleAMathews]

@MAST1999 what do you think?

[pkg-pr-new]

More templates

• todos
• @tanstack/db-example-solid-todo
• tanstack-start-example-basic
• @tanstack/db-example-paced-mutations-demo
• tanstack-start-db-projects-example
• @tanstack/db-example-react-todo

@tanstack/angular-db

npm i https://pkg.pr.new/@tanstack/angular-db@826

@tanstack/db

npm i https://pkg.pr.new/@tanstack/db@826

@tanstack/db-ivm

npm i https://pkg.pr.new/@tanstack/db-ivm@826

@tanstack/electric-db-collection

npm i https://pkg.pr.new/@tanstack/electric-db-collection@826

@tanstack/offline-transactions

npm i https://pkg.pr.new/@tanstack/offline-transactions@826

@tanstack/powersync-db-collection

npm i https://pkg.pr.new/@tanstack/powersync-db-collection@826

@tanstack/query-db-collection

npm i https://pkg.pr.new/@tanstack/query-db-collection@826

@tanstack/react-db

npm i https://pkg.pr.new/@tanstack/react-db@826

@tanstack/rxdb-db-collection

npm i https://pkg.pr.new/@tanstack/rxdb-db-collection@826

@tanstack/solid-db

npm i https://pkg.pr.new/@tanstack/solid-db@826

@tanstack/svelte-db

npm i https://pkg.pr.new/@tanstack/svelte-db@826

@tanstack/trailbase-db-collection

npm i https://pkg.pr.new/@tanstack/trailbase-db-collection@826

@tanstack/vue-db

npm i https://pkg.pr.new/@tanstack/vue-db@826

commit: 5cfec9e

[KyleAMathews]

Also relevant — working on this https://github.com/TanStack/db/pull/842/files#diff-6bb6eea8d2771d74392090da8774873368fa5dca9cb915e442adc3a05e3b9b89

[MAST1999]

Thanks for the work.

I've been meaning to fix this for some time.
Other than the comment I left the changes look good.

The only other thing that worries me is changing the returned interface. If someone is already using the old one they'll have a lot of work migrating to the new output.

[fezproof]

I don’t see your comment @MAST1999
I could add data back as an accessor to enable a more stable update, and mark it deprecated? Should make updating a bit smoother

[MAST1999]

I could add data back as an accessor to enable a more stable update, and mark it deprecated? Should make updating a bit smoother

Sounds good!

The comment is on code, I left a review.
Why can't we use createComputed instead of createEffect. The effect will run after the render and it might cause more renders afterward.

[fezproof]

I could add data back as an accessor to enable a more stable update, and mark it deprecated? Should make updating a bit smoother

This is done now

The comment is on code, I left a review.

No reviews have been made on this PR, perhaps you forgot to hit submit @MAST1999

Why can't we use createComputed instead of createEffect. The effect will run after the render and it might cause more renders afterward.

If we use createComputed, it will run on render which means it also runs in SSR. Currently tanstack db doesn't support SSR, but this could be a huge pain in the future. createEffect also is designed for this kind of subscription to events, as it does not block rendering. Solid isn't React, only the data that changes will be re-rendered, making this not really a problem.

[KyleAMathews]

We are going to be adding support for SSR soon to react btw. The patterns should be easy I assume to port to solid.

[MAST1999]

No reviews have been made on this PR, perhaps you forgot to hit submit @MAST1999

Damn it, I don't use GitHub too much, my bad. I indeed missed it.

LGTM

[MAST1999]

We are going to be adding support for SSR soon to react btw. The patterns should be easy I assume to port to solid.

Yep, should be really easy.
Give me a heads up and I'll update the Solid adapter.

[fezproof]

@MAST1999 any progress on this?

[MAST1999]

Sorry @fezproof been busy with a few things.

Right now, I've been trying to run the Solidjs todo example based on your changes and the latest changes on main branch to verify things, but I can't get it to run.

I get this error:

TypeError: (intermediate value).routerEntry.getRouter is not a function
    at getRouter (/home/mast/workspace/temp/mast-db/node_modules/.pnpm/@tanstack+start-server-core@1.139.14/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:108:57)
    at async handleServerRoutes (/home/mast/workspace/temp/mast-db/node_modules/.pnpm/@tanstack+start-server-core@1.139.14/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:348:18)
    at async eval (/home/mast/workspace/temp/mast-db/node_modules/.pnpm/@tanstack+start-server-core@1.139.14/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:223:34) {
  cause: TypeError: (intermediate value).routerEntry.getRouter is not a function
      at getRouter (/home/mast/workspace/temp/mast-db/node_modules/.pnpm/@tanstack+start-server-core@1.139.14/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:108:57)
      at async handleServerRoutes (/home/mast/workspace/temp/mast-db/node_modules/.pnpm/@tanstack+start-server-core@1.139.14/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:348:18)
      at async eval (/home/mast/workspace/temp/mast-db/node_modules/.pnpm/@tanstack+start-server-core@1.139.14/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:223:34),
  status: 500,
  statusText: undefined,
  headers: undefined,
  data: undefined,
  body: undefined,
  unhandled: true
}

[MAST1999]

I managed to fix the issue with tanstack start, it was updated, and it had some breaking changes, but I don't have access to your repo, so I can't push my changes there.