Is there any way to get access and optimistically update the transformed data using select?

[sahilmob]

let's say that the API response is:

{
  "id": 123,
  "title": "any title"
}

and the query is:

const {data} = useQuery("key", queryFn, {
        select: (data) =>({...data, active: true}) <----- active key is added
})

Is there any way to optimistically update the active key that was added in select? Since the updater function of queryClient.setQueriesData() has access to the original query data (API response data) only, there is no way to do it as far as I know.

[TkDodo]

you're mixing two things here: cache data and observer result

1. cache data
   this is what the query function returns and what is put into the query cache. It is what you get withqueryClient.getQueryData and what you have to set with queryClient.setQueryData. In your case, that's an object with id and title
2. observer result
   every observer (instance of useQuery) can transform data for itself only. This data is not stored in the cache and can be used for fine grained subscriptions / data transformations.

So, no, if you add an active: true flag in select, there is no way to update it with queryClient.setQueryData, as it doesn't know about it. The data that you put into the cache will always run through select and will be enhanced with that flag.

[sahilmob]

Thank you for taking the time to answer my question. Now I understand the difference. I would love to work on this feature (at least in my case) if there is an appetite for it.

[TkDodo]

what I would do is mark the optimistic entry as optimistic, e.g. with a negative id or with an extra flag. This would be stored in the cache via queryClient.setQueryData. Then, each select can react to that and either add the active prop or not.

[sahilmob]

Yeah, I agree there are many ways around it, but I think it would be nice if there exists an API to update the observer result.