@z0al/ql
Lightweight helpers for data fetching in React apps.
Philosophy
-
📦 Minimal: both API surface & package size. -
🔃 Stream-First: treat every response as a Stream. -
🌍 Backend agnostic: assume nothing about how the request will get resolved. -
🔌 Extensible: it should be easy to extend the default behavior to adopt different patterns.
Features
- Protocol & Backend agnostic data fetching
- Works with Promises, Observables, iterators, .. etc
- Automatic Caching & Garbage Collection
- Request cancellation & refetching
- Pagination & Infinite loading
- Manual Requests
- Prefetching support
- TypeScript ready!
Quick start
Installation
Requires React v16.8.6 or higher
npm add @z0al/ql
Usage
import { createClient, ClientProvider, useFetch } from '@z0al/ql';
const client = createClient({
fetch: async (request) => {
// handle request(s) here and return value
if (request.body === 'hello') {
return 'Hello world!';
}
},
});
const App = () => {
return (
<ClientProvider value={client}>
<Hello />
</ClientProvider>
);
};
const Hello = () => {
// useFetch accepts an object with any key and it will be
// passed to the fetch function you provided for createClient
const { data, status } = useFetch('hello');
if (status === 'pending') {
return <p>loading ...</p>;
}
return <p>{data}</p>; // displays "Hello world!"
};
API
Table of Contents
createClient
TODO
Hooks
useFetch
TODO
useRequest
TODO
useClient
TODO
Prior Art
Inspired by the following great libraries:
- Redux: Predictable state container for JavaScript apps.
- URQL: A highly customisable and versatile GraphQL client.
- SWR: React Hooks library for remote data fetching.
- React Query: Hooks for fetching, caching and updating asynchronous data in React.
License
MIT © Ahmed T. Ali