image

React data fetching libraries

Notable libraries to consume RESTful and GraphQL APIs in React

Fetching data using XMLHttpRequest and Fetch API is fine but require boilerplate code to handle following concerns:

  • 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
  • Request cancellation
  • Performance optimizations
  • etc.

Using a data fetching library is preferred in React development, following solutions will simplify the logic of data fetching in your project, and also have all these amazing features out-of-the-box.


Axios

image

github.com

Axios is the most popular library to make HTTP requests from the browser, supports the Promise API, intercept request and response, cancel requests, etc.

Apollo Client

image

www.apollographql.com

Apollo Client is 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

image

relay.dev

Relay is 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.

SWR

image

swr.vercel.app

SWR is a React Hooks library for data fetching, created by Next.js team, lightweight, and backend agnostic.

React Query

image

react-query.tanstack.com

React Query 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.