Update cache manually?

[Kay2dan]

First of all, apologies if this is naive question.

App is using NextJs, React-QueryJs, RecoilJs (state-management).

ISSUE:

When I locally update a state within recoil-js, the update flashes on screen before it disappears. I suspect this is because React-query overwrites the recoil-js state with its own cached values (which doesnt have the new locally updated changes).

DETAILS:

When a mutation is triggered from within a component (eg. user updates a task), I use the mutation response to update the relevant recoil-js state.
However, the problem is that this triggers a screen flash effect where the new update is shown for a moment before it disappears. Upon hard-refresh (ctrl+r), the new state with the updated task is reflected on screen.

To fix this, I would have to either:

• Somehow trigger react-query invalidate so that the entire query is refetched. This sounds not ideal because the major part of the page would be updated upon every action?

• Somehow update the react-query cache alongside the recoil-js state update based on the response from the mutation?

Would appreciate insight as to whats the correct way to resolve this.

Thank you.

[TkDodo]

When a mutation is triggered from within a component (eg. user updates a task), I use the mutation response to update the relevant recoil-js state.

it seems like you're mixing server state and client state here. Why would you need to update recoil state after the mutation? I would need to see some code, but generally, I would say that after a mutation, you would want to update a query, which you can either do with invalidation (refetch), or via updates from mutation responses.

[Kay2dan]

Thank you TkDodo for the response.

Why would you need to update recoil state after the mutation?

Because I treat Recoil states as the client side source of truth, which appears not to work well with Raect-Query.

you would want to update a query, which you can either do with invalidation (refetch), or via [updates from mutation responses](https://react-query.tanstack.com/guides/updates-from-mutation-responses).

My problem has been that I normalise the response from query into multiple atoms (diff. components on the page would subscribe to diff. atom states). However now, in order to form the entire data needed to update the React-Query state from any of the component mutations, I would need to subscribe to all the other atom states to form the entire data-struct needed to use setQueryData?

I feel there is a significant disconnect between React-Query state & Recoil state.

[Kay2dan]

I think I have it sorted. React-Query is the 1st source of truth, from which Recoil modifies its states.

I am using the Updater func pattern to use the old data & modify it with new response as per mutation.

If anyone comes here from BlitzJs, the setQueryData func signature on BlitzJs is totally different to React-Query, refers to BlitzJs docs for details.

Thank you for pointing in the right direction @TkDodo.

Best,