@z0al/ql NPM | npm.io

@z0al/ql

npm package npm bundle size

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!"
};

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.