{"id":16014765,"url":"https://github.com/andyrichardson/tipple","last_synced_at":"2025-07-25T05:32:19.577Z","repository":{"id":34397828,"uuid":"177182155","full_name":"andyrichardson/tipple","owner":"andyrichardson","description":"A lightweight dependency-free library for fetching data over REST with React.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:09:43.000Z","size":2197,"stargazers_count":129,"open_issues_count":44,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-13T11:09:39.271Z","etag":null,"topics":["cache","fetch","hooks","react","rest","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tipple","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andyrichardson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-22T17:21:09.000Z","updated_at":"2025-02-19T00:11:46.000Z","dependencies_parsed_at":"2023-01-15T06:50:11.318Z","dependency_job_id":null,"html_url":"https://github.com/andyrichardson/tipple","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyrichardson%2Ftipple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyrichardson%2Ftipple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyrichardson%2Ftipple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyrichardson%2Ftipple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andyrichardson","download_url":"https://codeload.github.com/andyrichardson/tipple/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703199,"owners_count":21148118,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cache","fetch","hooks","react","rest","typescript"],"created_at":"2024-10-08T15:05:05.245Z","updated_at":"2025-04-13T11:09:44.524Z","avatar_url":"https://github.com/andyrichardson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Tipple logo\" src=\"https://github.com/andyrichardson/tipple/blob/master/docs/assets/logo.png?raw=true\" width=\"150px\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eTipple\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\u003ci\u003eA lightweight dependency-free library for fetching data over REST in React.\u003c/i\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://gitlab.com/andyrichardson/tipple/pipelines\"\u003e\n    \u003cimg src=\"https://img.shields.io/gitlab/pipeline/andyrichardson/tipple.svg\" alt=\"Gitlab pipeline status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/andyrichardson/tipple\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/andyrichardson/tipple.svg\" alt=\"coverage\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/tipple\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/package-json/v/andyrichardson/tipple.svg\" alt=\"version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=tipple\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/tipple.svg\" alt=\"size\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/andyrichardson/tipple/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/tipple.svg\" alt=\"licence\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## What is Tipple?\n\nTipple is simple - so simple in fact, it has no dependencies.\n\nIf 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.\n\n## How does it work?\n\nThere's two key parts to Tipple:\n\n1.  Request state management - _a fancy way of saying Tipple will manage the numerous states of your API calls so you don't have to._\n2.  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._\n\n## Getting started\n\n### Install tipple\n\nI'm sure you've done this before\n\n```sh\nnpm i tipple\n```\n\n### Configure the context\n\nTipple 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.\n\n```tsx\nimport { createClient, TippleProvider } from 'tipple';\nimport { AppContent } from './AppContent';\n\nconst client = createClient({ baseUrl: 'http://localhost:1234/api' });\n\nexport const App = () =\u003e (\n  \u003cTippleProvider client={client}\u003e\n    \u003cAppContent /\u003e\n  \u003c/TippleProvider\u003e\n);\n```\n\n### Start requesting\n\nThe _useFetch_ hook will fetch the data you need on mount\n\n```tsx\nimport { useFetch } from 'tipple';\n\ninterface User {\n  id: number;\n  name: string;\n}\n\nconst MyComponent = () =\u003e {\n  const [state, refetch] = useFetch\u003cUser[]\u003e('/', { domains: ['users'] });\n  const { fetching, error, data } = state;\n\n  if (fetching \u0026\u0026 data === undefined) {\n    return \u003cp\u003eFetching\u003c/p\u003e;\n  }\n\n  if (error || data === undefined) {\n    return \u003cp\u003eSomething went wrong\u003c/p\u003e;\n  }\n\n  return (\n    \u003c\u003e\n      {data.map(user =\u003e (\n        \u003ch2 key={user.id}\u003e{user.name}\u003c/h2\u003e\n      ))}\n      \u003cbutton onClick={refetch}\u003eRefetch\u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Further documentation\n\nFor more advanced usage, check out [the docs](/docs).\n\nThere's also an [example project](https://github.com/andyrichardson/tipple/tree/master/example) if you're into that kind of thing.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyrichardson%2Ftipple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandyrichardson%2Ftipple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyrichardson%2Ftipple/lists"}