passive-yellow

Subscribe / Publish style updates?

I haven't really seen anybody tackle this, although I've often seen SSR / SSC / Streaming stuff compared to Pheonix Liveview. I'm not great at Elixir/Pheonix but my understanding is that one of the cool things you can do with it is publish updates to all clients without them requesting information via websockets. This has really cool implications for realtime data applications, games, etc...., and seems like a desireable option for data handling in general which Tanstack appears to be pretty top notch at in the JS ecosystem. I'm definitely not an expert on this, but it seems like Tanstack router, could achieve something like this with a plugin, potentially with a typesafe interface because fundamentally all users are going through the router when they ask for data. I can imagine a DX like this being really cool if it was possible:

type Message = {content: string, username: string}
// in backend
const getMessagesLive = makeLiveServerFn(
  "QUERY",
  (input: Input) => (subscriberContext, publisherContext) => {
     return {
           publishTo: "/dashboard/:serverId",
           updateWhen: subscriberContext.params.serverId === publisherContext.params.serverId 
                && publisherContext.messageId === "post-message",
           data: getMessages(input, subscriberContext)
     }
  }     
) 

const postMessageLive = makeLiveServerFn(
  "MUTATE",
  (input: Message) => {
     return {
           publishTo: "/dashboard/:serverId",
           mutate: await createMessage(input, sub),
           messageId: "post-message" 
     }
  }     
) 


// Then on frontend you could do something like 

const MessageBoard = () => {
     const {data: messages, error} = useLiveData(getTodos) 
   // get's published whenever any user subscribed to /todos route 
     
}

type Message = {content: string, username: string}
// in backend
const getMessagesLive = makeLiveServerFn(
  "QUERY",
  (input: Input) => (subscriberContext, publisherContext) => {
     return {
           publishTo: "/dashboard/:serverId",
           updateWhen: subscriberContext.params.serverId === publisherContext.params.serverId 
                && publisherContext.messageId === "post-message",
           data: getMessages(input, subscriberContext)
     }
  }     
) 

const postMessageLive = makeLiveServerFn(
  "MUTATE",
  (input: Message) => {
     return {
           publishTo: "/dashboard/:serverId",
           mutate: await createMessage(input, sub),
           messageId: "post-message" 
     }
  }     
) 


// Then on frontend you could do something like 

const MessageBoard = () => {
     const {data: messages, error} = useLiveData(getTodos) 
   // get's published whenever any user subscribed to /todos route 
     
}

Definitely not complaining as I think that what we have with Tanstack Router is totally awesome. Was just curious if there were like "Way down the line" ideas for implementing something like this, or if that's more of a "That will never happen"

12 Replies

optimistic-gold•11mo ago

so something like convex does?

passive-yellowOP•11mo ago

Oh maybe, I have no idea let me look at that yup, woah that's pretty neat

optimistic-gold•11mo ago

if you need further information about convex, @ballingt is the one to ask we also have a convex example for start

optimistic-gold•11mo ago

https://github.com/TanStack/router/tree/main/examples/react/start-convex-trellaux

GitHub

router/examples/react/start-convex-trellaux at main · TanStack/router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

passive-yellowOP•11mo ago

But I guess my thought would be something that's maybe platform / DB agnostic either way this is super cool But for example it seems like it should be possible to do something like this using routes as a means of choosing when/what to subscribe to rather than buying into a whole cloud infrastructure product. Not that the product isn't cool, it definitely is

correct-apricot•11mo ago

@Jon Higger (He / Him) yeah TanStack Start in particular is a nice fit for this! I assume you're familiar with TanStack Query? Much of the Convex integration is "Convex provides live data updates to TanStack Query," and them everything just works. If you can describe your WebSocket subscriptions in terms of TanStack Query you can do this too TanStack Query is the backend agnostic part, once you have a WebSocket protocol you need to wire that up yourself but it's not much. I don't know if there's room for another layer in here, what TanStack Query does is pretty much what you need. OK reading this thread more, yeah you can build these APIs! Check out the Convex integration and see what you think, it's just useQuery(convexQuery(...)) Re router integration, sounds like you want to specify subscriptions in loaders instead of in components, yeah seems workable, curious about that tradeoff

passive-yellowOP•11mo ago

When I get some time I'd like to build a project that tinkers with this idea It was just an idea I had spurred by a discussion in another server about LiveView And it is a thing that at least one other react framework offers

passive-yellowOP•11mo ago

https://docs.redwoodjs.com/docs/realtime/

Realtime | RedwoodJS Docs

One of the most often-asked questions of Redwood before and after the launch of V1 was, “When will Redwood support a realtime solution?”

passive-yellowOP•11mo ago

Although it's not exactly a fair comparison because redwood is a highly opinionated framework and I guess it's built into how you write the graphql schema

correct-apricot•11mo ago

When Convex sponsored TanStack Start and we (I work at Convex) made it a goal to support it well that's the kind of thing I thought I'd need to write, I figured TanStack Start would be configurable in enough ways that we could build a deeper integration but it would be a lot of work. But it turns out almost all you need is some interaction with React Query, so Convex is deeply integrated without needing to build it into the framework That said, would love to hear what other APIs you go for if you want something else! The makeLiveServerFn( server function API in particular is interesting, I'd love to let people write reactive server-side queries in these and extract them out but we're starting without this

passive-yellowOP•11mo ago

That’s super interesting actually thanks for the context

graceful-blue•11mo ago

i haven't tried it in tanstack router, but in the past i've used tanstack query with firebase subscriptions, supabase subscriptions as well as listening to mqtt events. I suppose since you can use query with router, it should be possible. although i haven't really throught it through, really. things definately get more compelx with SSR involved

Gaming

Programming

Subscribe / Publish style updates?

Did you find this page helpful?