Can we skip “local” updates?

[ianberdin]

Hi 👋
Thank you for your huge, amazing work!

I tried to figure out a way to mark an invalidated update as local (my own) and skip it to avoid ui rerendering because I already update it in UI (redux store).

I understand it needs every update to update cache.
So I propose special field or an attribute to extensions fileds.

Every real-time framework has this feature: sharedb, yjs, fluid framework, logux, automerge, etc...

Thanks again.

[n1ru4l]

Hey @ianberdin, thank you for sharing this insight!

Personally, I did not perceive this as a performance issue for me, as I have been using live query with relay without many optimistic updates yet. Also, relay diffes the incoming result with the current cache result and automatically skips triggering re-renders if the previous and new values are the same.

But I 100% agree that this is something we should address. My first thought would be that we allow to store a unique identifier for the executer with each registered live query and then also send that unique identifier to the server when triggering invalidations 🤔 .

{
  "query": "query @live { something }",
  "extensions": { "live": { "sessionId": "12345678" } }
}

But we could also send this as an @live directive argument 🤔

{
  "query": "query @live(sessionId: "12345678") { something }"
}

The server could also extract this from the HTTP headers automatically (if you are already sending an authentication token to the server).

In the resolvers it could be as easy as calling invalidate with a sessionId option:

liveQueryStore.invalidate("Query.something", { sessionId })

The engine will then automatically skip all live query re-executions (and thus sending the result to clients) that have that sessionId attached.

What do you think?

[ianberdin]

Yeah, forward.

1. Client A:

     mutation { removePost(id: 1) }

    redux.posts.remove(id: 1)

2. Backend:

   {
     resolve( ) {
         ....
         liveQueryStore.invalidate(['Query.posts'], { meta: { action: "removePost", postId: 2, sessionId: "A" } } )
         ...
      }
   }

3. Client B:

 function onPostsLoad({ data, extensions }) {
   if (extensions.liveMeta.sessionId === currentSessionsId) return // Skip for client A
 
   if (extensions.liveMeta.action === 'removePost') {
     redux.posts.remove(id: extensions.liveMeta.postId)
     runBackgroundTask()
   } else {
     redux.posts = data.posts
   }
 }

[n1ru4l]

This kind of feels like what live query is trying to avoid - manually updating the cache. If you want to use an event-based approach on the frontend you might be better of by actually using GraphQL subscriptions for it 🤔

[ianberdin]

No no, I don't want to touch the cache.
Only in-memory data which shows UI.

I need to understand what happen with updated data.

[n1ru4l]

@ianberdin Would you like to come up with a PR for this?

[ianberdin]

@ianberdin Would you like to come up with a PR for this?

I would really like to participate in improving this package, I love it. It's a pleasure to use it! Unfortunately, I can't "move away" from the development of the 3rd version playcode.io , since the release has already been delayed for two whole years. So I found a hack that helps to avoid re-updating!

You did an amazing job cleaning and updating the jsondiffpath -> json-diff-plus package. I'm just comparing the current UI state with what came in, and if it's different, only then update.