How to correctly query the cache?

[maertu]

Imagine the following use-case:

• Having a Todo app that loads all todos on start of the application fetchTodos()
• Populating the fetched todos using setQueryData(["todos", "todoKey"], data)
• Having for example a websocket, that when a new event arrives, adds todos to the cache using setQueryData(["todos", "todoKey"], data)
• At some point in time you want to filter all todos that are "done". You want to do this on the client only.

Now I am a bit stucked on how to query those todos. For now I use the following, but it seems a bit unhandy? Is there another way or am I missing something?

  return queryClient.getQueriesData<T>({
    queryKey: ["todos"],
    exact: false,
    predicate: (query) => query.queryKey[0] === "todos" && !!query.queryKey[1]
  }).map((query) => query[1])
    .filter((todo) => todo.state === "done");

[TkDodo]

I'm pretty sure you still want useQuery. Not sure why you'd have separate entities (["todos", "todoKey"]) if your "resource" is a list of things coming from fetchTodos ...

[maertu]

The primary speciality is the integration of WebSockets. I don't want to constantly query the fetchTodos endpoint, as the WebSocket ensures that new data is automatically pushed to the client. To accomplish this, I use setQueryData(["todos", "todoKey"], data) to populate individual elements into the cache.

Consider a scenario with hundreds of todo's, which are frequently updated by you or other users. Continuously refetching these to-dos with each mutation would significantly impact billing and is not very efficient, especially for users with poor network connectivity.

For this reason, I initially use fetchTodos to obtain the items and populate the cache. Subsequently, I retrieve all updates through the WebSocket.

Thats why it would be handy to have some functionality to query the elements in the cache. Something like this would be handy.

useQueryCache({
  filter: ["todos"],
  exact: false,
  predicate: (query) => query.queryKey[0] === "todos" && !!query.queryKey[1])
})

[maertu]

I totally see your point, and I might consider changing it. However, I have another feature that heavily relies on having the individual todos separated. Some of the todos are not rendered as HTML; instead, they are rendered as Canvas elements. To have them re-rendered whenever a todo changes, I have a listener on the query-cache.
When a cache event occurs, I check if it is a successful modification and update the canvas. Since these elements are individual elements, I can easily identify which todo needs to be re-rendered. I assume that if I have all the todos in one list, identifying which element changed would be more difficult.

I understand that this use-case may not be very standard, but I found it quite elegant to use the query-cache to update the canvas elements. This way, I still have react-query holding all my data, and if for example, I perform optimistic updates on the cache, the canvas elements stay in sync.

Do you perhaps have a suggestion for a better approach to sync non-react-managed elements with react-query? Anyway, thank you for your time and effort in responding. I highly appreciate it.

[TkDodo]

I don't see why any of this matters. The useSingleTodo implementation I've shown does just that: re-render whenever anything for that specific, individual key changes, because select creates a fine grained subscription. Doesn't matter if you render to the DOM or somewhere else, and it also doesn't matter that the actual resource in the cache is one list. It's the subscription that counts.

[maertu]

I feel like getting closer to understand it 😄 . But not quite there, as I don't see how I could subscribe to every todo in the todo-list. I see that i can use the useSingleTodo to subscribe to individual todos, but I basically want to subscribe to every todo, as if any of those todos gets updated, I want them to update inside the canvas element.

Maybe it get's more clear when I provide my real use-case. In there, it's about edges and nodes of a graph. Whenever an edge or node gets updated I need to select the element inside the graph-canvas and redraw it.

[TkDodo]

Well how are you doing it right now?

[maertu]

I do something like this.

    unsubscribe = queryClient.getQueryCache().subscribe(
        (cacheEvent) => {
          if(cacheEvent.query.queryKey[0] === "nodes" && cacheEvent.query.queryKey[1] && !cacheEvent.query.queryKey[2]) {// is node change
            if(cacheEvent.type === "updated" && cacheEvent.action.type === "success") {
              const updatedData = cacheEvent.action.data
              updateNode(updatedData.id, updateData, canvas)
            }
          })

But as mentioned this only works if the updateData is the specific element that changed and not the whole list.