Saving to the server at the very end

[azizpunjani]

Hello. I wanted to see if react query is a good fit for our application. Here it is in a nutshell.

It's an editor where the user is able to create a webpage. We generally mutate the data on the client and save it to local storage. We only save to the database at the very end, when the user hits save.

I feel like if we use react query we would be fighting it a little? Seems like it would work better if we were syncing with the server more often, like on every change?

The way I think it would work if we use react query is that we would be changing the cache, then prevent any queries from going out?

How would we update the backend at the very end? Would that be a mutation? Just want to make sure we are picking the right tool for the job.

Thanks!!

[Lisba]

Hi @azizpunjani!

Tanstack query is an async state manager, so you can use it every time you need to sync with a server or an async api outside of your frontend app.

Although syncing often is where tanstack query shines the most, it doesn't mean that it doesn't fit well in cases where syncing frequently is unnecessary, you have an incredible control over the tool with options like the staleTime, cacheTime, refetchOnReconnect, refetchOnWindowFocus among many others, where you can control how often do you want it to query data. On the other hand, if you need to introduce features in the future that require more frequent syncing with the server, you'll already have the better tool for it.

About how would you update the backend at the very end? Yes, it would be a mutation 👍

NOTE: I strongly recommend that you take this series of articles with you as a complement of the official docs to help you master the tool and acquiring good practices.

[azizpunjani]

@Lisba Thanks for your reply! I was looking over the articles and I ran across this It states not to use the querycache as a local state manager. I think that's what I would have to end up doing for my use case?

It seems like I would need to manually modify the cache every time the user makes some changes in the editor?

[Lisba]

@azizpunjani Yes, more than just fetching y managing data from the server, if you need a client state manager for data owned totally in your FE app, it is recommended using something else, I used Zustand with some of my teams and it worked quite well!

The key point is, what do you need for your app, a client state manager (to store data owned totally by your FE app) or a server state manager (to manage data borrowed from another app through an API)?

For the case you describe, it seems not necessary to be fetching and managing data from the server frequently, so it could be used a client state manager with a mechanism to persist the state into the localStorage temporarily until the user explicitly press a button to save all the state into the BE's database.

Keep in mind that is so easy falling into situations where you're trying to sync your CSM with your SSM, it's not ideal so try to avoid it.