Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

Fetching data with React-Query

Published by: Noc Folio3 | September 6, 2022 msaqlain
SCROLL AND BE AMAZED!
Home > App Development • React Native > Fetching data with React-Query

Global state management combined with fetching data has always been a problem to crack in react applications. The most common patterns that we observe are of making use of React-Redux with asynchronous actions creators using middleware like thunk, and either fetching data in the useEffect hook or the solutions provided by React-Redux like Connect HOC or useSelector/useDispatch hooks.

In this blog, we will explore another very appealing and new option that is React-Query. To get it installed in a React app using:

And we’ll have to wrap our root component with QueryClientProvider and supply it with an instance of QueryClient. A very familiar setup if you have worked with Redux before in react because they both make use of the provider pattern. We can also initiate React query dev tools in it (recommended). 

We will walk through from making basic queries to a bit more advanced concepts.

The biggest difference we observe while using react-query is that it manages all the stages involved in the fetching cycle for which we dispatch multiple actions in redux. React-query provides us a useQuery hook, which returns fields like isLoading, isError to cater to the fetching cycle. The useQuery hook takes in three arguments: 

  1. Query Key
  2. Query Function
  3. Options Object

Query Key: 

This has to be a unique key for a response of an API. React-query uses this to serialize and cache the response data by an API endpoint. This cache is accessible globally in the app. If we request again using the same query, it won’t trigger a re-fetch and bring the data from the global cache, unless the query has been invalidated (more on this later).

Query Function: 

This is a basic function that could use either fetch or Axios to request data from an endpoint.

Options Object: 

This is passed as the third argument to the useQuery hook. It contains all the configs as to how the query should behave, and when it will have to re-fetch again from the server.

A sample query:

React-Query Mechanism:

So, react query works by displaying the cached data and then running a re-fetch in the background. It is because the default stale time is set to 0 seconds. It re-fetches the data and compares it with cached data, if there are any differences, new data is plugged in. We can however change this functionality if we are sure our data does not update very frequently. We need to set stale time to longer than 0 seconds, and so we can use this cached data in other components as well. We can see in the code above as well, that we get isFetching flag to determine if a background fetch is in process or not. Additionally, useQuery also returns a function refresh() which we can use to re-fetch based on user events.

The very first thing to observe here is that when the component UserListingOne mounts, the API response is cached in the query key ‘user-listing’. The other component UserListingTwo also includes a useQuery hook with the same query key. So, when once the data has been cached, it is not refetched when we go to UserListingTwo from UserListingOne. 

Options Object Most used Fields:

enabled: by default its true, but can be set to false so that the query wont execute. Query can then be triggered conditionally. Also helpful in querying with multiple params and not being sure if a parameter is available while querying or not. In such cases enabled could be conditionally set to false.

cacheTime: Takes time in milliseconds, caches data for that particular time. Default duration is set to 5mins. It is to note though, that to determine if the cached data is not stale, react query will run background fetch on every re-render of component.

staleTime:  The time it would take for our data to be considered stale. React query won’t run background re-fetches until stale time is exceeded for data, and that would be triggered on a re-render of the component.

refetchOnMount: takes in either of three values, ‘’always”, true, false. Re-fetches data when the component mounts.

refetchOnWindowFocus: when a tab has been out of focus and is brought into focus again, this can be used to trigger a re-fetch.

refetchInterval: time in milliseconds and fetches the data after the interval has passed. Use full where data needs to be updated consistently to keep the UI updated.

refetchIntervalBackground: takes in a Boolean value, and specifies if the refetching by interval should continue even in the background.

keepPreviousData: helpful in paginated queries, with it a field is returned by query `isPreviousData`.

onSuccess(data) : takes a function, to run an effect after API has successfully returned a response.

onError(data): takes a function, to run an effect after API has failed to return a response.

select(data): takes a function, where API response is available as data. We can transform data, add more to it, delete from it, or serialize it however we need. The data returned from this function will be returned as data by useQuery hook itself.

How to maintain cache using dynamic query keys?

As much functionality the options argument provides us these fields, we are still to understand how to re-fetch data depending on state variables. If a state variable has been updated and we would want to re-fetch or supply the new query params from the state-variable this is how we would do it. It’s akin to how we fetch data in useEffect based on state variables in the dependency array.

What actually happens here is that we create new keys with this data which are also cached and made available globally. Anytime the product listing with the same set of filters will be requested the cached data will be returned if that data is not stale.

Here the users are cached with their respective IDs in the database because the query key was [“user-by-id”, userId]. Once a query has been cached of the user with their user id, the next time the same user id will request, react query won’t need to re-fetch. This is how we can add variables to specify what we have fetched and cache it. However, if we have more than one variable, let’s say userId and userStatus, its recommended to keep an object as a query key instead of individual variables, because the order of variables in the array matter, but the object would be compared with the keys it contains in any order.

Query Client:

Reading and Updating Cache:

Imagine a scenario where we have cached a listing and then we try to mutate it either by adding, deleting, or updating the data in the listing. In this case, we will have to re-fetch the listing after the update, but that nullifies the reason for caching and using react-query as a global store. We can instead update the cache by using setQueryData. This receives the query key of the query that we wish to update and a callback function that get the cached state as an argument. We have to be careful in what we return from this function because whatever these callback returns is set as the cache of that particular query. Similarly QueryClient another function, getQueryData which 

Invalidating Queries:

Not always we will need to rely on stale time provided to the useQuery hook. To invalidate the stale time in query would mean we demand fresh data from it. We need to access the instance of the queryClient and call the function invalidateQueries on it. We need to supply the query key in arguments which we want to invalidate. 

Conclusion:

React query is a very efficient query caching client for the front-end which can replace traditional methods of fetching data on the mounting stage of the component and global state management like Redux/MobX in some use cases.

Thanks for reading, Don’t forget to share your thoughts in comment section!


About Noc Folio3

Newsletter

Search

Archives

  • December 2023
  • April 2023
  • March 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019

Recent Posts

  • Exploring Flutter Navigation: From Basics to Advanced Routes
  • Web UI Test Automation with Pytest-BDD
  • How to fix IOS compass calibration issues
  • Testing Android Applications With Perfect Coverage
  • How to use useRef hook efficiently? – React

Tags

  • android
  • angular-state-management
  • Automation
  • Compass
  • cross-platform
  • css
  • development
  • firebase
  • hooks
  • ios
  • learn-ngrx
  • ngrx-beginner
  • ngrx/store
  • QA
  • react-native
  • reactjs
  • scss
  • stylesheet
  • styling
  • Testing
  • Test Script
  • UI-UX

Newsletter

Newsletter

Post navigation

Previous Mobile Device Fragmentation – What is it?
Next How to use Skia in React Native
Schedule an Appointment with our Mobile App Development Expert
Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

Folio3 Tower, Plot 26, Block B, SMCH Society, Main Shahrah-e-Faisal, Karachi.

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore.

Tel: +92-21-3432 3721-4 

© 2025, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f Linkedin-in Instagram

Get a free app audit

[contact-form-7 id="3548" title="Float Banner Form"]