DEV Community

byby
byby

Posted on • Originally published at byby.dev

Top React Data Fetching Libraries

Fetching data in React using XMLHttpRequest and Fetch API is fine but require a lot of boilerplate codes. Using a data fetching library is preferred as following solutions will simplify the logic of data fetching in your project with tons of amazing built-in features.

Popular libraries

Axios (99k ⭐) -> A promise-based isomorphic HTTP client which can run in the browser and NodeJS with the same codebase. On the server-side it uses the native NodeJS http module, while on the browser it uses XMLHttpRequests.

React Query (33k ⭐) -> A library handles fetching, caching, background updates and stale data out of the box with zero-configuration. It is backend agnostic so you can use React Query with literally any asynchronous data fetching client.

SWR (26k ⭐) -> A React Hooks library for data fetching, created by Next.js team, lightweight, and backend agnostic.

Apollo Client (18k ⭐) -> A comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.

Relay (17k ⭐) -> The production-ready GraphQL client for React, developed by Facebook, was designed to be performant from the ground up, built upon locally declaring data dependencies for components.

urql (8k ⭐) -> A highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.

RTK Query (9k ⭐) -> An optional addon included in the Redux Toolkit package, and its functionality is built on top of the other APIs in Redux Toolkit.

Data fetching

Web applications normally need to fetch data from a server in order to display it. They also usually need to make updates to that data, send those updates to the server, and keep the cached data on the client in sync with the data on the server. This is made more complicated by the need to implement other behaviors used in today's applications:

  • Tracking loading state in order to show UI spinners
  • Avoiding duplicate requests for the same data
  • Optimistic updates to make the UI feel faster
  • Managing cache lifetimes as the user interacts with the UI

Common features

  • Transport and protocol agnostic (REST, GraphQL, etc)
  • Caching, refetching, polling, realtime
  • Pagination, load more, infinite scrolling
  • Requests and responses interception
  • Revalidation on focus, network recovery
  • Performance optimizations
  • Request cancellation

Top comments (7)

Collapse
 
llmaboi profile image
llmaboi

I think there is a major misconception here. Half of these are not "data fetching libraries" as called out by the title. They are instead query management solutions.

Quote from RTL

Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte

Collapse
 
bybydev profile image
byby

Thank you for your comment.

Data query management is a higher-level concept that encompasses data fetching as a necessary component. While data fetching is focused on retrieving data from a source, data query management is focused on optimizing the way data is queried and managed within an application to improve performance and maintainability.

Many libraries are designed to handle both data fetching and data query management in a unified way. The term "query management" may not be commonly used in everyday conversation among web developers.

Collapse
 
llmaboi profile image
llmaboi

But half of these don't provide a way to "fetch" data. IE you must use axios with RTL or some other source of data fetching with the caching layer.

Collapse
 
sergeyleschev profile image
Sergey Leschev

It's important to consider the specific needs and requirements of your project when selecting a data fetching library. The libraries listed above have many features that can make data fetching easier, but they may not be suitable for every project. For example, some libraries might be better suited for handling large amounts of data or work better with specific backends. It's always recommended to research and try different options before deciding on one that works best for your project.

Collapse
 
bybydev profile image
byby

Agreed, choosing a data fetching library should be based on the specific needs of the project, and it's important to research and experiment with different options to find the best fit.

Collapse
 
brense profile image
Rense Bakker

SWR ftw

Collapse
 
bybydev profile image
byby

This is the way!