feat: support for solid-js

[MAST1999]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2b03f94

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	Patch
@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

[teleskop150750]

Should there be a store subscription like in other frameworks?

React

Vue main

Vue v2

Vue v3

[MAST1999]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

[teleskop150750]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

Please take a look at my vue 2/3 implementation

Vue v2

Vue v3

UPD

MAST1999#1

[wobsoriano]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

Please take a look at my vue 2/3 implementation

Vue v2

Vue v3

#92 (comment)

Do you think we can open a PR to TanStack Store Vue/Solid/Svelte instead for them to accept a getter/ref instead? Or just improve it all in all?

[teleskop150750]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

Fix link

MAST1999#1

[teleskop150750]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

Please take a look at my vue 2/3 implementation
Vue v2
Vue v3
#92 (comment)

Do you think we can open a PR to TanStack Store Vue/Solid/Svelte instead for them to accept a getter/ref instead? Or just improve it all in all?

You can of course open a PR with something like this change. Since this package is small I don't see any restrictions for using the core version. without framework wrappers

export const useStore = (
  getStore: () => Store<any, any> | Derived<any, any>,
  selector: (v: any) => any
) => {
  let unsub = () => {}
  const state = createMemo(() => {
    const store = getStore()
    const [slice, setSlice] = createStore({
      value: selector(store.state),
    })

    unsub = store.subscribe(() => {
      const newValue = selector(store.state)
      setSlice(`value`, reconcile(newValue))
    })

    return slice
  })

  onCleanup(() => {
    unsub()
  })

  return () => state().value
}

UPD

[KyleAMathews]

FYI — we've removed the tanstack/store to do a direct integration w/ the frameworks (more control means more speed). The vue code is a good example of how to directly integrate with framework reactive primitives. Would love to get a solid package out! https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts

[MAST1999]

Sounds awesome!

I'll take a look over the weekend to see what I can do.

[MAST1999]

OK, I've updated the integration.

I need feedback on the API for useLiveQuery though.

Right now, I've set it up so that it always receives a function because if users pass a regular object they might accidentally break reactivity, but we can support both live query config object and as a function similar to Tanstack Query.

I just prefer having one way of doing things which will always work.

I also ended up installing vitest and jsdom to run tests. Before, we were using npx vitest . I can revert it if it causes issues.

[MAST1999]

Another question, do we want to support suspense?

[KyleAMathews]

One way of doing thing sounds good. I don't use Solid so I don't know what people expect per se from libraries like this but supporting Suspense seems like a good plan. What's involved with adding that? If it's pretty involved, it could come in another PR.

[MAST1999]

Well, suspense means we use createAsync, but I don't think there's anything async here to drop in there.
In Tanstack Query the queryFn is run in createAsync (or createResource) since it's making a request to the server.

I think we can add it, I just need to figure out which part is doing the async part to inject createAsync there.

We can merge this, and I'll can do a follow-up MR for suspense if we want it.

[KyleAMathews]

You can call .preload on the query as that promise resolves when all the data from any collections used has loaded.

[KyleAMathews]

The query itself is sync

[MAST1999]

OK, I think we have suspense as well.

I'll try to rebuild the todo app example to verify that everything works.

[KyleAMathews]

Awesome!

[KyleAMathews]

If you want, we could get this in first and then follow up with a PR for the example

[KyleAMathews]

@wobsoriano please do! You seem to know way more about all the frameworks than most 😂

[MAST1999]

Do we really need the ReactiveMap here? That installs an extra module

I just wanted to make the reads of the map reactive, similar to how objects in stores are reactive and only listen to the property that you access.

I haven't used tanstack/db enough to know if that's a good tradeoff or not.

[MAST1999]

BTW, I've moved most of the todo example to solid but running it I get this error

I've tried to figure out what's wrong, but I can't find the issue. I've enabled spa in tanstack start as well.

[KyleAMathews]

TanStack Start can't go fully client only yet unfortunately.

Though what solid API is it that's client only? We do want to support SSR soonish.

[MAST1999]

That's what I couldn't figure out.

Even if I comment out the outlet in __root.tsx the error still persists. Deleting all the routes (except __root.tsx) didn't fix the error as well.

I'm kinda at a loss.

[KyleAMathews]

It could be a Start / Solid bug not anything you've done. Lemme flag it with the Start maintainers.

[MAST1999]

The solid example works for query and electric, Trailbase was working, but then it broke 🤔
I don't know if that's because Trailbase's issue or my implementation.

I'm now a lot more confident to merge if no one has comments.

[MAST1999]

Fixed a merge conflict in pnpm-lock.yaml. I built locally and everything built successfully.

[wobsoriano]

The solid example works for query and electric, Trailbase was working, but then it broke 🤔 I don't know if that's because Trailbase's issue or my implementation.

I'm now a lot more confident to merge if no one has comments.

The changes look good. My only nitpick is that the example could be submitted in a separate PR :)

[MAST1999]

@KyleAMathews It's ready for merge.

[KyleAMathews]

Ok great! I think I can get to it tomorrow.

[pkg-pr-new]

@tanstack/db-example-react-todo • @tanstack/db-example-solid-todo

@tanstack/db

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

@tanstack/electric-db-collection

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

@tanstack/query-db-collection

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

@tanstack/react-db

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

@tanstack/solid-db

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

@tanstack/svelte-db

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

@tanstack/trailbase-db-collection

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

@tanstack/vue-db

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

commit: 2b03f94

[KyleAMathews]

Screen.Recording.2025-07-25.at.3.40.22.PM.mp4

🥳