{"id":23366702,"url":"https://github.com/d8corp/watch-state-api","last_synced_at":"2025-08-23T15:10:32.907Z","repository":{"id":90515610,"uuid":"444129422","full_name":"d8corp/watch-state-api","owner":"d8corp","description":"A util to create api with watch-state","archived":false,"fork":false,"pushed_at":"2023-06-24T16:35:10.000Z","size":544,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T11:36:30.260Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/d8corp.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-03T16:35:09.000Z","updated_at":"2022-01-07T12:48:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"d1ddca0c-5c46-4ad9-9ba4-9dfabf0af5e7","html_url":"https://github.com/d8corp/watch-state-api","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Fwatch-state-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Fwatch-state-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Fwatch-state-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Fwatch-state-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d8corp","download_url":"https://codeload.github.com/d8corp/watch-state-api/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744328,"owners_count":20988783,"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":[],"created_at":"2024-12-21T14:17:20.715Z","updated_at":"2025-04-07T23:15:44.147Z","avatar_url":"https://github.com/d8corp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003ca href=\"https://www.npmjs.com/package/watch-state\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/d8corp/watch-state/v3.3.3/img/logo.svg\" align=\"left\" width=\"90\" height=\"90\" alt=\"Watch-State logo by Mikhail Lysikov\"\u003e\n\u003c/a\u003e\n\n# \u0026nbsp; @watch-state/api\n\n\u0026nbsp;\n\n[![NPM](https://img.shields.io/npm/v/@watch-state/api.svg)](https://www.npmjs.com/package/@watch-state/api)\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/@watch-state/api)](https://bundlephobia.com/result?p=@watch-state/api)\n[![downloads](https://img.shields.io/npm/dm/@watch-state/api.svg)](https://www.npmtrends.com/@watch-state/api)\n[![changelog](https://img.shields.io/badge/changelog-⋮-brightgreen)](https://changelogs.xyz/@watch-state/api)\n[![license](https://img.shields.io/npm/l/@watch-state/api)](https://github.com/d8corp/watch-state-api/blob/main/LICENSE)\n\nApi with [watch-state](https://www.npmjs.com/package/watch-state)  \nBased on [@watch-state/fetch](https://www.npmjs.com/package/@watch-state/fetch)\n\n[![stars](https://img.shields.io/github/stars/d8corp/watch-state-api?style=social)](https://github.com/d8corp/watch-state-api/stargazers)\n[![watchers](https://img.shields.io/github/watchers/d8corp/watch-state-api?style=social)](https://github.com/d8corp/watch-state-api/watchers)\n\n### Install\n\nnpm\n```bash\nnpm i @watch-state/api\n```\n\nyarn\n```bash\nyarn add @watch-state/api\n```\n\n### Usage\n\nUse `Api` when you want to get data through API\n```javascript\nimport Api from '@watch-state/api'\n\nconst user = new Api('https://reqres.in/api/users/{id}')\n```\n\nUse braces `{field}` for any dynamic data, so you can create any level API if you want\n```javascript\nimport Api from '@watch-state/api'\n\nconst api = new Api('https://reqres.in/api/{module}/{id}')\n```\n\nGet [Fetch](https://www.npmjs.com/package/@watch-state/fetch) of the api with `get` method\n```javascript\nimport Api from '@watch-state/api'\n\nconst user = new Api('https://reqres.in/api/user/{id}')\n\nconst user1 = user.get({ id: 1 })\n```\n\nYou can use any option of [Fetch](https://www.npmjs.com/package/@watch-state/fetch)\nwith the second argument of `Api`\n\n```javascript\nimport Api from '@watch-state/api'\n\nconst user = new Api('https://reqres.in/api/user/{id}', {\n  default: {\n    data: { id: null }\n  }\n})\n\nuser.get({ id: 1 }).value.data.id\n// null\n\nuser.get({ id: 1 }).loaded\n// false\n\nawait user.get({ id: 1 })\n\nuser.get({ id: 1 }).value.data.id\n// 1\n```\n\nYou can setup default `data` argument.\n\n```javascript\nconst user = new Api('https://reqres.in/api/user/{id}', {\n  data: {\n    id: 1\n  }\n})\n\n;(await user.get()).data.id\n// 1\n\n;(await user.get({id: 2})).data.id\n// 2\n```\n\nYou can override search params as well\n\n```javascript\nconst users = new Api('https://reqres.in/api/users?page={page}', {\n  data: {\n    page: 1\n  }\n})\n\nawait users.get()\n// request to https://reqres.in/api/users?page=1\n```\n\nOr you can provide additional fields for `get` method to add query search params\n\n```javascript\nconst users = new Api('https://reqres.in/api/users', {\n  data: {\n    page: 1\n  }\n})\n\nawait users.get()\n// request to https://reqres.in/api/users?page=1\n```\n\n### Cache invalidation\n\nYou can update all [Fetch](https://www.npmjs.com/package/@watch-state/fetch) instances of an `Api` with `update` method\n\n```typescript jsx\nimport { Watch } from 'watch-state'\nimport { Api } from ' @watch-state/api'\n\nconst users = new Api('https://reqres.in/api/users?page={page}', {\n  data: {\n    page: 1\n  }\n})\n\nnew Watch(() =\u003e {\n  console.log(users.get().value)\n})\n\nawait users.get()\n\nusers.update()\n```\n\nYou can update by object keys\n\n```typescript jsx\nimport { Watch } from 'watch-state'\nimport { Api } from ' @watch-state/api'\n\nconst users = new Api('https://reqres.in/api/users', {\n  getKeys: value =\u003e value.data.map(({id}) =\u003e id),\n})\n\nnew Watch(() =\u003e {\n  console.log(users.get().value)\n})\n\nawait users.get()\n\nusers.update([10])\n// nothing happens becase the first page do not contain the user with id equas 10\n\nusers.update([1])\n```\n\n### TypeScript\n\nApi has 3 generics, the first one is a data type the request will return\n```typescript\ninterface Responce {\n  page: number\n  per_page: number\n  // ...\n}\n\nconst users = new Api\u003cResponce\u003e('https://reqres.in/api/users')\n\nconsole.log(users.get().value?.page)\n```\n\nThe second generic is an error type you can get\n```typescript\ninterface ResponceError {\n  code: number\n  message: string\n}\n\nconst users = new Api\u003cany, ResponceError\u003e('https://reqres.in/api/users')\n\nconsole.log(users.get().error?.message)\n```\n\nThe last generic is a data you can provide to the `get` method\n\n```typescript\ninterface Data {\n  page: number\n}\n\nconst users = new Api\u003cany, any, Data\u003e('https://reqres.in/api/users')\n\nawait users.get({ page: 1 })\n```\n\nWhen you don't need a data for the api, it's better to use [Fetch](https://www.npmjs.com/package/@watch-state/fetch)\ninstead of, but you can use `void` type to prevent any query options.\n\n```typescript\nconst user = new Api\u003cany, any, void\u003e('https://reqres.in/api/users')\n\nawait user.get()\n```\n\n## Issues\n\nIf you find a bug, please file an issue on [GitHub](https://github.com/d8corp/watch-state-ajax/issues)  \n\n[![issues](https://img.shields.io/github/issues-raw/d8corp/watch-state-ajax)](https://github.com/d8corp/watch-state-ajax/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Fwatch-state-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd8corp%2Fwatch-state-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Fwatch-state-api/lists"}