In this blog, I will cover server side sorting and pagination using react-query and react-bootstrap-table-next.
Generally, I prefer to use useQuery to get the data from the server,
React Query manages query caching based on query keys. Query keys can be as simple as a string, or as complex as an array of many strings and nested objects. As long as the query key is serializable and unique to the query’s data, you can use it. “asyncFunction” is responsible for getting the data from the server.
Here we can start with lets assume scenario where the user can go next. So in that case instead of showing loader to the user while fetching the data, what if I can show the cached data to the user? This will increase the user experience.
Let’s understand the above concept with an example, In the table pagination, mostly I can predict that the user can go to the next page, then why would I be supposed to wait for the user to click on a 2nd-page button and then call API. this would cause the loader to show on UI or I can even keep the previous page info till we get 2nd-page data from API as follows.
But in the end, this will take time to reflect on UI after click event.
So I will use prefetchQuery, It is a method to the queryClient where we get data from the server and store it in the cache.
This will fetch the data from the server using the asyncFunction and store it in the cache against the query keys.
Now, let’s start with the demo.
Create a react app using create-react-app
let’s make changes in our app.js file
Use the QueryClientProvider component to connect and provide a QueryClient to our application like follows.
lets create our custom table component
I am passing the props to this component as follows —
data — Response data that we get from server after API call.
columns — It is a columns name of the table
page — Active page number of the table
totalSize — It is a total number of records present at server.
handleTableChange — Handler to handle the pagination and sorting,
for more details explore pagination.
Create a controller.
Here, I have taken three state variables — page, sortField, sortOrder to manage pagination and sort. Default value of the page is 1 and then passed these variables to our custom hooks to call API with these params.
I have destructed the response object to get data and loading state from the useGetData custom hook.
In this example, the structure of data is as follows
Please note that I have added a remote parameter in the Table Plugin which means pagination and sorting will be handled remotely and created a handle function named handleTableChange which will get a call on every click of pagination and sort button.
this handle function is taking two parameters —
1. type — It is an action type. In our case, it would be either pagination or sort
2. object — It contains certain values i.e page, sortField and sortOrder.
based on the type, I am changing the state variables which result in API calls and now let’s talk on this …
Here is my custom hook
We are aware of how the dependency array in useEffect behaves. The same thinking also works here, I have passed page, sortField and sortColumn as a part of query keys and it will act like a dependency array. It means if any one of these values gets changed, it will cause the new API call with the help of callback function provided.
This is the basic implementation of server-side pagination and sorting using react-bootstrap-table-next and react-query.
But this is not a proper solution to our problem.
When a user clicks on any pagination or sort button, it will result in a new API call and hence loader will be shown on the screen until we get the new data in response and yes we already have discussed on this , I have to slightly modify our useGetData hook as follows –
But as discussed this will again take time to reflect on UI after click event of user.
Now I will use prefetchQuery method of queryClient to make the APIcall for the next page and store that data in the cache.
For that I will use useEffect hook in our custom hook with the dependency of all the dynamic keys that we have provided to useQuery and will check if more data present or not and likewise will handle the API call for next page number as follows.
In my case, I have set staleTime to 2 mins. it means there will be no new API call with the same keys for 2 mins and it will refer the data from the cache.
This is how we can pre-fetch the data and store it in the cache with the specific stale time and it will help us to show data more quickly when user clicks on next page.
Oh wow, you’ve made it this far! If you enjoyed this article perhaps like or re-share the thread on LinkedIn.
Thank You !
Josh Software 