Is it a bad approach to update query state directly?

[ugurcanatas]

Hello,
I am having some problems regarding reflecting the cache update in the query and in the UI.

To give more context:

I have a query which uses a select function as a stable function reference.
(Here is the related blog post: https://tkdodo.eu/blog/react-query-data-transformations#3-using-the-select-option)

I have a mutation which runs a function to update the explained queries cache in onMutate callback.

Now, up until this point everything is fine.
I can see that the cache is updated by logging the result and checking the related values. However the cache update is not reflected in the UI. I can see that by destructing the data from the query and logging it. It never logs the actual updated value.
Because the select function actually never re-runs after calling queryClient.setQueryData.

For now my workaround is the following:

  const result = queryClient.getQueryCache().find({
    queryKey: ['cart'],
    exact: false,
  })

  result.setState(data)

By setting data in the query state, I am able to re-trigger select function which subsequently updates the UI as well. I am not sure if this is the correct way to go though.

Is interacting with query state incorrect? Or should not be used?
It is exposed in the API so I would assume that there is a use case for it but I want to get some opinions on the topic.

Thanks in advance.
Happy coding to all!

[TkDodo]

Please show a reproduction because this should just work.

[ugurcanatas]

Sorry about that.
While trying to provide a reproduction snack for react native, I realized that this is related to immutability. Which I remembered from here

        const items = cartQueryData.map(item => {
          if (item.attributes.product?.directSku !== mutationArgs.directSku) {
            return item
          }
          return {
            ...item,
            attributes: {
              ...item.attributes,
              amount: mutationArgs.attributes.amount,
            },
          }
          // What I was doing before and was not working ⬇️         
          // const newItem = { ...item }
          // newItem.attributes.amount = mutationArgs.attributes.amount
          // return newItem 
        })

Old one did not reflect the changes in UI and the new one did. I think it is all good now & working. Again sorry about that.

[ugurcanatas]

Btw out of curiosity, what about the original question? I suppose interacting with query state is not something that we should do normally right?

[TkDodo]

yeah it's not reactive; it's fine for callbacks, but not for components

[ugurcanatas]

Gotcha, thanks a lot!