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?
Related
I have a small react app I've built that displays different entries in my mongoDB and then has filters, so it only shows what you're looking for.
In order to get the entries I have a js listener listening to an outside source and then adding them to MongoDB. Then I have my React App send a get request to my express app, which pulls the data from MongoDB and updates state on each refresh and grab all the entries.
I want the state to update everytime a new entry is added to MongoDB, so the user doesn't have to refresh and gets real time data.
Is there anyway I can call the useEffect function from the server side file or is there some way I can detect inside the react app when new data is added?
you could simply do a call on pageload to get the current data, then do subsequent calls on a set time interval and compare the length of the new call with the current calls, only saving data if there is a difference.
I'm currently building my first next app (e-commerce with Shopify Storefront API).
In order to avoid multiple query to the db and upgrade performance, I want to store all datas once a user sees a page:
1- first loading (by page): the method getStaticProps fetch the necessary datas and put everything in a context ShopContext
2- when the user hits the page another time: instead of getStaticProps re-fetch the datas, just use the data in the context.
Is it something logical to do that? And if yes, is it possible to avoid data fetching when a loading page occurs?
Many thanks for your responses ! :)
I am starting to use react-query for querying my backend. Now, every time I update the backend data (using some admin panel), the GUI (react) shows me immediately the new data. How does react frontend know if the backend data has changed?
Sorry guys, found the issue. If I go to admin panel to update data, and go to the react WINDOW again, it auto refetches
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.
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.