0.0.2 • Published 2 years ago
@seiyab/fp-ts-react-query v0.0.2
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