CODEWITHSUNDEEP
javascriptreactjsapirestsingle-page-application
userhooke
userhooke

Reputation: 86

How to do background sync instead of fetch requests on UI changes?

For example, let's take a simple web application with comments feature. In my understanding, when a user posts a new comment, the following would occur:

  1. display UI loader;
  2. update the front-end state;
  3. send a fetch request to the API to post a new comment;
  4. Wait for the response;
  5. send another fetch request to the API to request the new list of comments;
  6. waiting;
  7. update the front-end state with new comments;
  8. update UI to reflect the new state with a new comment;

And the user needs to wait while front-end app interacts with back-end on almost every data change. The same way we did it earlier with PHP/Python/Ruby, ajax, server-side rendering and templates.

That makes me think what's the point of adding so much front-end complexity with something like react, when the result is basically the same.

My question is: are there any alternative approaches to this? Is it possible instead to do the above case the following way:

  1. user clicks to post a comment;
  2. update the front-end state;
  3. update UI to reflect the new state with a new comment;
  4. sync front-end state with API DB in the background;

Upvotes: 2

Views: 1632

Answers (3)

Gh05d
Gh05d

Reputation: 9002

Well, as your question is tagged react, you could use the Apollo library (it is intended to work together with graphql on the backend) for data fetching. It offers a feature called Optimistic UI, which will be update the frontend with the respected result, until it receives an answer from the backend. If the expected result differs from the received one, the component will change the UI automatically to the real result. In case of an error, it will show an error message.

Upvotes: 1

Kouta Nakano
Kouta Nakano

Reputation: 643

I get it that you think it's waste of time for users to wait until requests are successful. However, isn't it more important to stop users from keeping making bad requests to the server?

So, what I would do is just to stop fetching data from the database every after users make requests.

  1. Fetching the DB data to begin with and store them in redux states
  2. Make requests to the DB while holding users from doing anything
  3. Make changes to the redux state if the requests are successful

But what you want to do could be done like this

  1. Fetching the DB data to begin with and store them in redux states
  2. Make changes to the redux state while making requests to the DB in the background
  3. Depending on whether the requests fail or not, roll back the change users made from the redux state

Upvotes: 0

Lim Jing Rong
Lim Jing Rong

Reputation: 426

You definitely could, your first method is just way of doing it.

Apart from 'syncing' your front-end state, another method is also to just pre-emptively update the UI (step 7 & 8 in your first method) before doing step 3-6, and only reverse the action if the API call failed. This should allow for slightly better UX for the end-user too.

Upvotes: 0

Related Questions