Is it possible to use it with Server-Sent Events?

[sandros94]

In my long journey into learning Pinia I've got to admit that Pinia-Colada did make things much easier, but I'm wondering about a use-case that involves Server-Sent Events (in particular in a Nuxt application using Nitro's SSEs), and I'm wondering if I'm going completely offtrack...

My main curiosity point on this is that I always want the freshest state for a particular client's ref, while also using the already available API routes to mutate those states. This means that server-to-client is going to reuse the existing connection, while each client-to-server operation will be a discrete connection (as such, WebSockets will be for a different discussion).

My first idea would be to use useEventSource from Vueuse, but useQuery's query param requires an async function, just like an initialization step 🤔

[posva]

If you have a realtime connection, you can likely go without Pinia Colada. That being said, it should be possible to use a realtime connection and benefit from optimistic updates. I haven't tried it myself but if I had to implement it, I would create a custom useRealtimeQuery() (using useEventSource() internally) that wraps useQuery() and instantiates the connection. The query function would then just await for the initial data and then resolve immediately. If you come up with anything, I'm curious about it. It might be useful to add it as a cookbook entry or even just another composable

[posva]

Since you are writing a composable, you don't need defineQuery(), you need useQuery() within your own composable:

export function useRealtimeQuery(opts) {
  const query = useQuery(...)
  // ...
}

I wouldn't expose the returned ref from useEventSource(), and use the query cache as the source of truth instead

[posva]

The invalidateQueries doesn't help much since you have realtime data. You should use something like setQueryData() to update the cache.
BTW, you shouldn't call watch within the query, that can potentially create a memory leak (same as calling it within a method)

[sandros94]

My current working approach:

import { joinURL } from 'ufo'
import { safeDestr } from 'destr'

export function useRealtimeQuery(events?: string | string[]) {
  const _events = events
    ? Array.isArray(events)
      ? events
      : [events]
    : undefined

  const { event, data } = useEventSource(joinURL(useRequestURL().origin, '/api/test/event'), _events)
  const { state, ...rest } = useQuery({
    key: () => ['SSE', { event: event.value }],
    query: () => new Promise<string | null>((resolve) => {
      resolve(safeDestr(data.value))
    }),
  })

  watch(data, (newData) => {
    useQueryCache().setQueryData(
      ['SSE', { event: event.value }],
      safeDestr(newData),
    )
  })

  return {
    ...rest,
    state,
  }
}

Am I doing things alright? I could see your point on going without Pinia Colada with this use-case

[posva]

I think it's something more like

import { joinURL } from 'ufo'
import { safeDestr } from 'destr'

export function useRealtimeQuery(events?: string | string[]) {
  const _events = events
    ? Array.isArray(events)
      ? events
      : [events]
    : undefined

  let resolve: null | (() => void), reject: null | ((error: any) => void)

  const queryPromise = new Promise<void>((res, rej) => {
    resolve = res
    reject = rej
  })

  const { event, data } = useEventSource(joinURL(useRequestURL().origin, '/api/test/event'), _events)
  const queryCache = useQueryCache()

  watch(data, (newData) => {
    // initial promise
    if (resolve) {
      resolve()
      resolve = null
    } else {
      // subsequently we only need to update the cache
      queryCache.setQueryData(
        ['SSE', { event: event.value }],
        safeDestr(newData),
      )
    }
  })

  return useQuery({
    key: () => ['SSE', { event: event.value }],
    async query() {
      await queryPromise
      return safeDestr(data.value)
    }),
  })
}

• Composables outside of watch
• Resolve only once
• There is no error handling (reject is not used)
• The key should probably be the events and be required to ensure unicity

[sandros94]

let resolve: null | (() => void), reject: null | ((error: any) => void)

const queryPromise = new Promise<void>((res, rej) => {
  resolve = res
  reject = rej
})

This felt like you were actually writing stuff and I'm still playing with Duplo 😅

• The key should probably be the events and be required to ensure unicity

Indeed, currently any global events will override each other

• There is no error handling (reject is not used)

It might be just as simple as watching error ref returned by useEventSource and passing it to the reject?

Thank you so much fo guiding me 🙏

[posva]

You are being too hard on yourself 🤣
Watching the error seems good

[dimroc]

Hi all,
Thanks for asking this @sandros94 , this is still relevant a year later. It would be great to have recommendations around server-pushed data. TanStack has some documentation around query invalidation and partial updates. It could be as simple as "don't use them together."