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"

TanStack•2y ago•

27 replies

progressive-amaranth

Subscribe / Publish style updates?

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 
     
}

Subscribe / Publish style updates?

Similar Threads

Subscribe / Publish style updates?

Similar Threads

Similar Threads

Similar Threads