Remote-data-react-query NPM

ADT compatible with useQuery from '@tanstack/react-query'

Prerequisites:

Basic knowledge of FP approach
UseQuery hook from react-query

Prior art:

Installation

yarn add remote-data-react-query

Lite version

There are 3 versions of this package, first one is BASED on fp-ts. Use this version if you already use fp-ts in your project

import { remote, RemoteData } from 'react-query-remote-data';

More expected, you don't use fp-ts yet, in that case import lite version without fp-ts peer dependency

import { remote, RemoteData } from 'react-query-remote-data/lite';

And a lite version for react-query@3

import { remote, RemoteData } from 'react-query-remote-data/v3lite';

Guide

Check out examples in this repo at src/dev/stories for comparison with classic approach.

Usage example

import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { remote, RemoteData, RenderRemote } from 'remote-data-react-query/lite';

type User = { name: string; phone: string };

export const UsageExample = () => {
    const user: RemoteData<Error, User> = useQuery(['user'], () =>
        fetch(`https://jsonplaceholder.typicode.com/users/1`).then(res => res.json()),
    );

    const userPhone = remote.pipe(
        user,
        remote.map((user) => user.phone),
    );

    return (
        <RenderRemote
            data={userPhone}
            success={(phone) => <div>{phone}</div>}
            refetching={(phone) => <div>{phone} refreshing...</div>}
            failure={(e) => <div>failed to fetch {e.message}</div>}
            pending={<div>just pending</div>}
            initial={<div>initial</div>}
        />
    );
};