Data fetching with React Hooks, batteries included


React Query Hooks is the easiest way to manage data fetching in React apps.

It allows you to implement the following features in pretty much one line of code each:

* Loading & error states
* Refetching
* Pagination
* Polling

React Query Hooks comes with useful defaults to let you hit the ground running, yet it’s still fully customizable.

TL;DR

``jsx
import { useQuery } from 'react-query-hooks';

function UserList () {
let users = useQuery(FETCH_USERS);

if (users.isLoading) return ;
if (users.error) return ;

return data={users.result.data}
onEndReached={users.loadMore}
onRefresh={users.refetch}
/>;
}
`

_Replace Loading, ErrorMsg & List with your own components. For this example, their source is here._

Installation

React Query Hooks has zero dependencies, and works with any app using React ^16.8.0

To install:
`
yarn add react-query-hooks
`

Or with npm:
`
npm install —save react-query-hooks
`

Usage

Let’s build a quick app that fetches data from JSONPlaceholder and renders it on a list.

First, we'll grab the useQuery hook from React Query Hooks.

`jsx
import { useQuery } from 'react-query-hooks';
`

We'll be fetching data from jsonplaceholder, using axios;
`jsx
import axios from 'axios';

const fetchUsers = () => axios("https://jsonplaceholder.typicode.com/users");
`

Let's make the magic happen. Inside a component, call useQuery with a
function that fetches data. useQuery expects the function to return a promise.
`jsx
let users = useQuery(fetchUsers);
`

The useQuery hook will run the passed in function,
and return an object with useful properties, like isLoading and error.
`jsx
if (users.loading) return

Loading...

;
if (users.error) return

Error!

`

When the promise resolves, the resolved value is set to result.
`jsx


{users.result.data.map(user =>
• {user.name}
)}


`

And that's pretty much it. Your code should end up looking somewhat like this:
`jsx
import axios from 'axios';
import { useQuery } from 'react-query-hooks';

const fetchUsers = () => axios("https://jsonplaceholder.typicode.com/users");

function Userlist () {
let users = useQuery(fetchUsers);

if (users.loading) return

Loading...

;
if (users.error) return

Error!

;

return

{users.result.data.map(user =>
• {user.name}
)}

}
`

Pagination

React Query Hooks comes with pagination out of the box. So let’s keep going and add pagination to our example.

Offset based pagination involves adding two parameters to our requests:

* limit determines how many items we want to fetch on the current request
* offset determines how many items we want to skip on the current request (because we already loaded them)

Alright, let’s update our fetchUsers function to receive this two params:

`jsx
const fetchUsers = ({ start=0, limit=3 }={}) => {
return axios(https://jsonplaceholder.typicode.com/users?_start=${start}&_limit=${limit});
};
`

Below our list, let’s add a button that will loadMore data onClick.

`jsx
...
Load more!
...
`

> In a real-world app, this might be triggered as the user scrolls near the end of the list. But we’ll keep things simple for this example.

While the next page of users is loading, we want to display a loading state and hide the ‘Load more’ button.

`jsx
...
{
isLoadingMore
?

Loading more...


: Load more!
}
...
`

And now you’ve got offset pagination working. Ez. Your end code should end up looking like this:

`jsx
const fetchUsers = ({ start=0, limit=3 }={}) => {
return axios(https://jsonplaceholder.typicode.com/users?_start=${start}&_limit=${limit});
};

function Userlist () {
let users = useQuery(fetchUsers);

if (users.loading) return

Loading...

;
if (users.error) return

Error!

;

return (

{users.result.data.map(user =>
• {user.name}
)}

{
isLoadingMore
?

Loading more...

: Load more!
}

)
}
``