Create an Electric TanStack integration library

[thruflo]

Build on the doc page https://electric-sql.com/docs/integrations/tanstack and wrap up the tanstack-example (edit: updated link, thanks @Dosbodoke) into an @electric-sql/tanstack integration library.

This can potentially provide a higher level interface to sync and update data that's based on using Electric with TanStack.

[Dosbodoke]

The tanstack-example anchor is linking to the wrong directory. You may want to update the issue linking to the actual tanstack example

Also, I think a good example of the wrapper API may be:

https://legendapp.com/open-source/state/v3/sync/tanstack-query/ https://github.com/psteinroe/supabase-cache-helpers/tree/main/packages/postgrest-react-query

[nassim-yagoub]

Hi! I'd like to work on this issue. I have experience with TanStack Query and am starting to use sync engines.

Looking at the current example, I'm thinking of exposing two main hooks:

1. useElectricMutation to handle the mutation execution and use matchStream to wait for sync confirmation
2. useTanstackQueryShape to wrap useShape and useMutationState, then merge optimistic data from pending mutations with the current shape data

This differs from the LegendApp approach that combines the query and mutation in a single hook. I think this provides better flexibility as our useTanstackQueryShape could receive optimistic updates from several mutations.

What do you think of this approach? Are there specific patterns or constraints I should consider?

I'm happy to discuss the API design further or start with a draft PR to get early feedback.

[coryhouse]

Is https://tanstack.com/db the solution to this issue? If not, how does the goal of this issue differ?

[KyleAMathews]

oh oops thanks @coryhouse, yes this issue is old & superseded by our work on @tanstack/db. @nassim-yagoub we'd love your feedback & help over at https://github.com/TanStack/db/ ! What you outlined is pretty much what we landed on with the collection mutations & createOptimisticAction https://github.com/TanStack/db/blob/main/docs/overview.md#explicit-transactions

[coryhouse]

There’s a link to this issue in the docs that needs updated to mention Tanstack DB: https://electric-sql.com/docs/integrations/tanstack

[thruflo]

I've added a placeholder flagging up TanStack DB to that doc page: https://github.com/electric-sql/electric/pull/2899

We'll clean up the docs more properly soon.

[nassim-yagoub]

Thanks everyone, I'll take a look at Tanstack DB !