All Projects → andyrichardson → Tipple

andyrichardson / Tipple

Licence: mit
A lightweight dependency-free library for fetching data over REST with React.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Tipple

React Query
⚛️ Hooks for fetching, caching and updating asynchronous data in React
Stars: ✭ 24,427 (+18266.17%)
Mutual labels:  rest, hooks, cache, fetch
Jsonapi React
A minimal JSON:API client and React hooks for fetching, updating, and caching remote data.
Stars: ✭ 65 (-51.13%)
Mutual labels:  rest, hooks, cache
React Refetch
A simple, declarative, and composable way to fetch data for React components
Stars: ✭ 3,418 (+2469.92%)
Mutual labels:  rest, fetch
Fakerest
Patch fetch/XMLHttpRequest to fake a REST API server in the browser, based on JSON data.
Stars: ✭ 350 (+163.16%)
Mutual labels:  rest, fetch
React Fetching Library
Simple and powerful API client for react 👍 Use hooks or FACCs to fetch data in easy way. No dependencies! Just react under the hood.
Stars: ✭ 561 (+321.8%)
Mutual labels:  hooks, fetch
ultrafetch
Node-based fetch backed with an RFC-7234 compliant filesystem cache.
Stars: ✭ 30 (-77.44%)
Mutual labels:  fetch, cache
React Fetch Hook
React hook for conveniently use Fetch API
Stars: ✭ 285 (+114.29%)
Mutual labels:  hooks, fetch
Bloom
🌸 HTTP REST API caching middleware, to be used between load balancers and REST API workers.
Stars: ✭ 553 (+315.79%)
Mutual labels:  rest, cache
Springboot Examples
spring boot 实践系列
Stars: ✭ 216 (+62.41%)
Mutual labels:  rest, cache
Wordpress Rest Cache
WordPress Plugin to lazy cache HTTP requests in database and update via cron.
Stars: ✭ 8 (-93.98%)
Mutual labels:  rest, cache
Ngx Restangular
Restangular for Angular 2 and higher versions
Stars: ✭ 787 (+491.73%)
Mutual labels:  rest, fetch
Apicache
Simple API-caching middleware for Express/Node.
Stars: ✭ 957 (+619.55%)
Mutual labels:  rest, cache
mey
A react package that exports hooks for handling the request lifecycle.
Stars: ✭ 18 (-86.47%)
Mutual labels:  fetch, hooks
React Fetches
🐙React Fetches a new way to make requests into your REST API's.
Stars: ✭ 253 (+90.23%)
Mutual labels:  rest, fetch
Swr
React Hooks for data fetching
Stars: ✭ 20,348 (+15199.25%)
Mutual labels:  fetch, hooks
Wp Rest Api Cache
Enable caching for WordPress REST API and increase speed of your application
Stars: ✭ 239 (+79.7%)
Mutual labels:  rest, cache
React Infinite Scroll Hook
A simple hook to create infinite scroll list components
Stars: ✭ 151 (+13.53%)
Mutual labels:  hooks, fetch
Ky
🌳 Tiny & elegant JavaScript HTTP client based on the browser Fetch API
Stars: ✭ 7,047 (+5198.5%)
Mutual labels:  rest, fetch
React Ufo
🛸 react-ufo - A simple React hook to help you with data fetching 🛸
Stars: ✭ 85 (-36.09%)
Mutual labels:  hooks, fetch
Fetch Plus
🐕 Fetch+ is a convenient Fetch API replacement with first-class middleware support.
Stars: ✭ 116 (-12.78%)
Mutual labels:  rest, fetch

Tipple logo

Tipple

A lightweight dependency-free library for fetching data over REST in React.

Gitlab pipeline status coverage version size licence

What is Tipple?

Tipple is simple - so simple in fact, it has no dependencies.

If you're working with REST and want an easy way to manage data fetching on the client side, this might just be the way to go.

How does it work?

There's two key parts to Tipple:

  1. Request state management - a fancy way of saying Tipple will manage the numerous states of your API calls so you don't have to.
  2. Domain based integrity - because each request is tied to a domain (e.g. users, posts, comments), Tipple can force data to be re-fetched whenever domain(s) have been mutated.

Getting started

Install tipple

I'm sure you've done this before

npm i tipple

Configure the context

Tipple exposes the client using React's context. You'll want to put the provider in the root of your project in order to use the useFetch and usePush hooks.

import { createClient, TippleProvider } from 'tipple';
import { AppContent } from './AppContent';

const client = createClient({ baseUrl: 'http://localhost:1234/api' });

export const App = () => (
  <TippleProvider client={client}>
    <AppContent />
  </TippleProvider>
);

Start requesting

The useFetch hook will fetch the data you need on mount

import { useFetch } from 'tipple';

interface User {
  id: number;
  name: string;
}

const MyComponent = () => {
  const [state, refetch] = useFetch<User[]>('/', { domains: ['users'] });
  const { fetching, error, data } = state;

  if (fetching && data === undefined) {
    return <p>Fetching</p>;
  }

  if (error || data === undefined) {
    return <p>Something went wrong</p>;
  }

  return (
    <>
      {data.map(user => (
        <h2 key={user.id}>{user.name}</h2>
      ))}
      <button onClick={refetch}>Refetch</button>
    </>
  );
};

Further documentation

For more advanced usage, check out the docs.

There's also an example project if you're into that kind of thing.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].