https://github.com/andyrichardson/tipple

A lightweight dependency-free library for fetching data over REST with React.
https://github.com/andyrichardson/tipple

cache fetch hooks react rest typescript

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/andyrichardson/tipple
• Owner: andyrichardson
• License: mit
• Created: 2019-03-22T17:21:09.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:09:43.000Z (almost 2 years ago)
• Last Synced: 2024-12-06T21:23:31.461Z (28 days ago)
• Topics: cache, fetch, hooks, react, rest, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/tipple
• Size: 2.1 MB
• Stars: 130
• Watchers: 6
• Forks: 5
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



Tipple

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




  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



## 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)](/docs/Domains.md) have been mutated._

## Getting started

### Install tipple

I'm sure you've done this before

```sh

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.

```tsx

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

```tsx

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](/docs).

There's also an [example project](https://github.com/andyrichardson/tipple/tree/master/example) if you're into that kind of thing.