I am using useInfiniteQuery with FlatList in React Native. In one of item in the list there is toggle functionality. I have successfully used useMutation and it works great.
When user scrolls and reach to end I fetch another page. Let's say I have loaded 5 pages i.e. 5 requests on the server. Now I go to the top on the first page and toggle first record using mutation. I used
onSettled: () => queryClient.invalidateQueries(key)
I observed that this causes all pages fetch in background i.e. again 5 requests on the server to fetch all pages which are already there and only for just one record.
so my question is that is it possible to avoid all page request and refetch only the page which was changed. I tried to look in documentation but couldn't find anything helpful on this.
Related
I am loading 10 items per page from API and storing the data in redux
suppose I scroll 3 pages so in my redux there are 30 elements 10 elements on page 1 10 on page 2 10 on page 3.
Now I go to the next screen and return to the pagination screen again. My page 1 is again called and in the redux, there is duplication of elements because page 1 elements are already in the redux,
So, should I clear the redux before going to the next screen? So it again starts with page 1
It depends on what you want, so here you go 2 solutions:
1- If you want to keep your data:
Add the pagination logic in your redux code, that way if you reach page 3, in redux the page will be updated to 3, therefore, when you come back to the screen the page will go on from 3 .
A good way to implement the paging logic in redux, is by adding a +1 to the page value in redux state whenever you receive a response:
return {
...state,
data:[...state.data,...data]
page:data.length >0? state.page+1:state.page
}
2- If you are using the same redux for different screens or you want to clear it (which I don't recommend):
Then definitely you will have to clear all your redux data while leaving the screen.
If you have any question, Let me know and good luck!
I suggest you keep another key inside the redux to track the last searched page index.
Initially, it would be something like {lastSearchedPageIndex: 0, items: []}.
When you opened the page for the first time, you would make an API call with the page parameter as 0. You would get a successful response from the API and now the state of redux has to be {lastSearchedPageIndex: 0, items: [SOME_ITEMS_OF_PAGE_0]}.
When you scroll up and reach the page end, you would make another API call. But here you have to make sure that you would only call the API if the page is not searched before. The condition should be if(currentPage > lastSearchedPageIndex) { MAKE_AN_API_CALL_WITH_PAGE_1 } where currentPage is the page number you are searching for. Once you get the response the redux state would be {lastSearchedPageIndex: 1, items:[SOME_ITEMS_FROM_PAGE0, SOME_ITEMS_FROM_PAGE1]}. This would be continued for the remaining pages as well.
Now the paging is done and you are moved to some other screen and come back to the pagination screen. Now the redux state as per your question is {lastSearchedPageIndex: 2, items:[SOME_ITEMS_FROM_PAGE0, SOME_ITEMS_FROM_PAGE1, SOME_ITEMS_FROM_PAGE2]}. You are at the page and scroll to the end of page 0. As we already wrote the guard condition if(currentPage > lastSearchedPageIndex) { MAKE_AN_API_CALL_WITH_PAGE } and according to this, the current page is 1 and lastSearchedPageIndex is 2. So no API call would happen.
I have a use case where I am using stack navigator. I have a homepage where I have some aggregated data and a list which are retrieved from an API.
On clicking on a list item I move to a screen which has more details of that item. There I can add entries for that item. When entries are added using a form, both the homepage as well as the item specific screen need to be updated, which means I need to call the API's again to fetch data. In case no transactions are added I was to avoid this.
What should be the best practice here? should I pass a state variable from homepage and whenever it is updated refresh the screens?
Currently, I am using a willFocus listener, and it makes an API call each time I am on one of these screens. I believe that there can be a better approach than this.
I'm working on a Vue project, where I have a navbar component. On mobile, this component shows a title for the page. I need to set this title on a page by page basis, but haven't been able to find a reliable way to do it.
I've seen examples suggesting adding meta: { title: 'My Page' } to each of the routes for the app, then checking the matched route and applying the title. This doesn't work for me as on some pages the title will rely on data fetched from displayed page (e.g. /posts/:id would want the title to be the title of the post, which isn't available to the router).
Another option I considered is emitting an event, which sets the title. This would work, but would have to be reflected up multiple levels, and would require every page to have a title otherwise the previous title would remain after navigation.
Similar to the above, it could be implemented via Vuex to avoid having to pass the event up the chain, but would have the same issue of the previous title remaining after navigation. I could of course clear the value on route change, but this could introduce a race condition as the API request is cached, so revisiting a cached page could result in no title.
Ideally I want a mix between using meta values, and values dependent on the result of the API call. What is the best way to achieve this?
I have one Api for Tab with two screen .The problem is i need in both use this data but:
1) When you open screen with tab,one is loaded but second does not load(i make fetch in both screen in componentDidMount )
2)it is bad to everytime fetch data,Please help me
In order to do avoid unecesssary api calls you can either use a library like redux, the react context api, or a higher order component and then pass the data as props to each component. I think we would need to see more details as to why it’s working in one screen and not another.
As I believe is common in many APIs, ours returns a subset of fields for a record when it is part of a List request, and more details when it is a single-record request to its Show endpoint.
It seems that react-admin attempts to avoid doing a second request when loading a Show page (possibly re-using the record data from List?), which results in missing data. Refreshing the page fixes this, but I'm wondering if there is a setting that will force a GET_ONE request on every Show page load.
There are no setting for that. However, this should be achievable with a custom saga which would listen to LOCATION_CHANGE action (from react-redux-router) and dispatch a refreshView action (from react-admin) when the new location pathname ends with /show.
Edit: however this is very strange. We only use the data we already got from the list for optimistic display but we still request with a GET_ONE when navigating to a show page from the list. Do you have a codesandbox showing your issue?