What is the best way to solve problem like this:
we got paginated results on our page (for example, 10 blog posts)
we click LIKE button on some post
how to update new state of page using Laravel & React?
Laravel doesn't support pagination with POST request. Should we send another GET request to refresh our page's state?
Laravel doesn't support pagination with POST request
Pagination are meant to be used in GET request so this has all the sense in the world.
When you make your POST request to update the state of an object (in this case, to like a post), the task should be to persist the change of the state. This shouldn't interfiere with how you refresh your view in order to update the state (visually).
My strategy would be like this:
The user get the list of posts: GET request of paginated list).
The user likes a post: POST request to the endpoint that handles this. This won't affect your view. You just have to make sure to get a success response (for example, a 200 response code from your endpoint).
Update the state of the object "visually": Given the fact that your server has responded that the state of the object has been persisted, you could just mark the post as liked visually, this means apply some classes/CSS to the button for example.
When the user change of page, or refresh the site, your server will send them all the objects refreshed, so this means that your updated object will have the correct state.
Related
Lets say we have a basic shopping app with a shopping cart, whenever the user adds an item to the cart a request is sent to the backend in order to persist the shopping cart.
I am contemplating between two approches to this achive this.
The client sends the updated shopping cart and awaits a response from the backend, only after the requests completes the shopping cart is updated to reflect the change, if the request fails an error is shown instead.
When the shopping cart is updated on the client the change is reflected immediately, then if the request failed an error is shown and the state reverts to before the request.
The advantage of the second method is that the changes are instantaneous while the first method has a response time, but the second method might confuse users in the case that a request fails.
I am wondering which method is better, or if there is a better way to go about this?
Is there an industry standard for this problem?
Note: I am working with react / nodejs backend in case this is relevent.
Imagine a React app where you can list your friends in a sidebar. The site uses Redux to store the state of the friends. In case a user adds a new friend to his list, I have to send a POST to the backend, to save it.
The question is, how should I update the list of friends in the sidebar?
After the post, should I make a GET request and add the response to Redux or should I just use the data and add it directly to Redux, removing the extra GET call?
My suggestion will be doing both. When you are making a request to server update the Redux store which will update your state(Friends list) and will rerender the component.
Also fire the GET request action, so that if there are data that are on the server but not in your redux, that should get retrieved.
(imagine: Using two machine at the same time and adding friends)
And if you are using something similar to a pure component, if your redux store and retrieved data are same, i.e., no new data was available on the server, there will be no change in state and component will not re-render. They will re-render only when there is a difference in state and will display the current list.
IMO both options are valid. However, I like to have a single source of truth in our applications, which is the backend in most cases.
Sometimes, you might even choose to go for both options. This will increase the user experience by preventing a loading state, but if the action fails or the backend data is different than your redux store, it can result in "weird" behavior.
facebook or instagram for example,
there's user page that contains the owner's posts.
when I visit user1's page and store the posts in state,
I'll have user1's posts in my state.
and if I move to user2's page and update posts state,
the posts will be replaced.
in this case,
should I send request again to get user1's posts when I call navigate.goBack() to see user1's page again?
generally we don't send request again when we go back to previous route.
or is there something like "history" for state?
There's no 'history' for state like the kind you're describing. If you wanted to save a user's posts so you can access it later, you would have to expand your state shape to store posts from multiple users.
You can check out this section of the redux doc for some more insights on how to do this:
http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html
The gist of it is to make your state into a database.
Workflow
User login to the app
He will see a list of item fetched using queries(Works fine)
Now, he will add an item in another page(adding using normal POST call, not using graphQL)
When he comes to the listing page, the new entry will not be there :(
How to solve this? I understood, apollo is maintaining a cache. So, it doesn't make any request.
I want to force refetch the data from the server every time I load the listing page.
How can this be done?
I'm learning React and Flux and there's something that bothers me about all the examples I've seen so far.
They all are pretty much a CRUD UI.
In them, they always fetch all the data after every change (update/add/delete etc.)
So let's say, we have a todo app, and the user added a new todo item.
In a response, the store will get an action, call some API in the server to add the item and then fetch all the items again.
Isn't that expensive?
I understand why it makes things simpler which is good. But, why not add the item to the store's state. I understand this makes it so you always have the keep the store and the data in the server synced like that but it's not as expensive.
One solution I saw was pagination but in the example they would still get all the items for the new page every time a user changes it.
Why always fetch all the data?
If we use pagination - would we get the new page from the server every time a user changes pages?
It is not necessary to get data after every change. In the apps that I have built, I have always changed the store rather than get all data.
In only one project which involved DreamFactory API, we used to refresh the model (only that model/item) after an update. That was necessary because DreamFactory API pulls all the related data in a single call.