react-query-useful-hooks

The best and useful hooks for react-query

Features

• All the [axios] awesomeness you are familiar with
• Zero configuration, but configurable if needed
• One-line usage

Installation

npm install axios react-query react-query-useful-hooks

axios and react-query is a peer dependency and needs to be installed explicitly

Quick Start

import React from 'react';
import {useFetch} from 'react-query-useful-hooks';

import React from 'react';
import {useFetch} from 'react-query-useful-hooks';

function Todos() {
    const {isError, isFetching, data, refetch} = useFetch({
        url: 'todos/1',
        enabled: true
    });

    if (isFetching) return <p>Loading...</p>;
    if (isError) return <p>Error!</p>;
    return (
        <div>
            <button onClick={() => refetch()}>refetch</button>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}

export default Todos;

API

The package exports one default export and named exports:

import {
    useFetch,
    useInfinite,
    usePaginate,
    usePost,
    useModifyQuery,
    usePersist,
    useSubscribeQuery,
    configure
} from 'react-query-useful-hooks';

Configuration

Unless provided via the configure function, react-query-useful-hooks uses as defaults:

• axios - set axios instance. the default axios package export
• queryOptions - set options of useQuery of react-query to set in the options of all queries of useFetch and usePaginate
• fetchQueryOptions - set options of useQuery of react-query to set in the options of all queries of useFetch
• paginateQueryOptions - set options of useQuery of react-query to set in the options of all queries of usePaginate
• infiniteQueryOptions - set options of useInfiniteQuery of react-query to set in the options of all queries of useInfinite
• mutationOptions - set options of useMutation of react-query to set in the options of all usePost

These defaults may not suit your needs, for example:

• you may want a common base url or timeout for axios requests
• need to customize cacheTime or staleTime
• or different behavior in onSuccess and onError requests

In such cases you can use the configure function to provide your custom implementation of both.

When configure is used, it should be invoked once before any usages of hooks

Example

import { configure } from 'react-query-useful-hooks'
import axios from 'axios'

configure({
    axios: axios.create({
        baseURL: 'https://jsonplaceholder.typicode.com',
        timeout: 1000
    }),
    queryOptions: {
        retry: 5,
        retryDelay: 100,
        retryOnMount: false
    }
});

Creator

Sina Shah Oveisi @sinashahoveisi

I love programming, and I am interested in popular frameworks or programming languages and I am currently coding with JavaScript and React framework.

License

MIT © Sina Shahoveisi