fp-ts-react-query

fp-ts bindings for React Query

Helps following

• Apply function to return of useQuery iff data exists
• Compose multiple query results
• Deal success result as idle / loading / error according to data

Examples

apply function iff data exists

import * as UQR from 'fp-ts-react-query/UseQueryResult';

const f = (x: number): string => `got ${x}`;
const liftedF = UQR.map(f)

const Component: React.FC = () => {
  const raw: UseQueryResult<number> = useQuery('query1', () => someQuery());
  const calculated: UseQueryResult<string> = liftedF(raw);
  // ...
};

raw | calculated :- | :- success(1) | success('got 1') success(2) | success('got 2') idle | idle loading | loading error | error

compose two query results

import { pipe } from "fp-ts/lib/function";
import * as UQR from 'fp-ts-react-query/UseQueryResult';

const Component: React.FC = () => {
  const x: UseQueryResult<number> = useQuery('query1', () => someQuery1());
  const y: UseQueryResult<number> = useQuery('query2', () => someQuery2());
  const calculated: UseQueryResult<string> = pipe(
    UQR.Do,
    UQR.bind('a', () => x), // bind x as 'a'
    UQR.bind('b', () => y), // bind y as 'b'
    UQR.map({a, b} => a * 5 + b)
  );
  // ...
};

x | y | calculated :- | :- | :- success | success | success(x.data * 5 + y.data) idle | success | idle loading | success | loading error | success | error success | idle | idle ... | ... | ...

compose many query results

import { pipe } from "fp-ts/lib/function";
import * as UQR from 'fp-ts-react-query/UseQueryResult';

const Component: React.FC = () => {
  const w = useQuery('query1', () => someQuery1());
  const x = useQuery('query2', () => someQuery2());
  const y = useQuery('query3', () => someQuery3());
  const z = useQuery('query4', () => someQuery4());
  const calculated = pipe(
    UQR.Do,
    UQR.bind('a', () => w),
    UQR.bind('b', () => x),
    UQR.bind('c', () => y),
    UQR.bind('d', () => z),
    UQR.map({a, b, c, d} => {
      // ... complex computation
    })
  );
  // ...
};

Deal success result as idle / loading / error according to data

import * as UQR from 'fp-ts-react-query/UseQueryResult';

const f = (a: number): UseQueryResult<number> => {
  if (a < 0) return UQR.error();
  if (a === 0) return UQR.idle();
  return UQR.success(a * 5)
}

const Component: React.FC = () => {
  const x = useQuery('query1', () => someQuery1());
  const calculated = UQR.chain(f)(x);
  // ...
};

x | calculated :- | :- success(10) | success(50) success(0) | idle success(-3) | error idle | idle loading | loading error | error

Implemented instances

• Monad