Need help with tipple?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

andyrichardson
131 Stars 6 Forks MIT License 78 Commits 17 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

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 = () => ( );

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('/', { domains: ['users'] }); const { fetching, error, data } = state;

if (fetching && data === undefined) { return

Fetching

; }

if (error || data === undefined) { return

Something went wrong

; }

return ( <> {data.map(user => (

{user.name}

))} Refetch > ); };

Further documentation

For more advanced usage, check out the docs.

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.