https://github.com/d8corp/watch-state-api
A util to create api with watch-state
https://github.com/d8corp/watch-state-api
Last synced: 11 months ago
JSON representation
A util to create api with watch-state
- Host: GitHub
- URL: https://github.com/d8corp/watch-state-api
- Owner: d8corp
- License: mit
- Created: 2022-01-03T16:35:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-24T16:35:10.000Z (about 3 years ago)
- Last Synced: 2025-04-02T11:36:30.260Z (over 1 year ago)
- Language: JavaScript
- Size: 531 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @watch-state/api
[](https://www.npmjs.com/package/@watch-state/api)
[](https://bundlephobia.com/result?p=@watch-state/api)
[](https://www.npmtrends.com/@watch-state/api)
[](https://changelogs.xyz/@watch-state/api)
[](https://github.com/d8corp/watch-state-api/blob/main/LICENSE)
Api with [watch-state](https://www.npmjs.com/package/watch-state)
Based on [@watch-state/fetch](https://www.npmjs.com/package/@watch-state/fetch)
[](https://github.com/d8corp/watch-state-api/stargazers)
[](https://github.com/d8corp/watch-state-api/watchers)
### Install
npm
```bash
npm i @watch-state/api
```
yarn
```bash
yarn add @watch-state/api
```
### Usage
Use `Api` when you want to get data through API
```javascript
import Api from '@watch-state/api'
const user = new Api('https://reqres.in/api/users/{id}')
```
Use braces `{field}` for any dynamic data, so you can create any level API if you want
```javascript
import Api from '@watch-state/api'
const api = new Api('https://reqres.in/api/{module}/{id}')
```
Get [Fetch](https://www.npmjs.com/package/@watch-state/fetch) of the api with `get` method
```javascript
import Api from '@watch-state/api'
const user = new Api('https://reqres.in/api/user/{id}')
const user1 = user.get({ id: 1 })
```
You can use any option of [Fetch](https://www.npmjs.com/package/@watch-state/fetch)
with the second argument of `Api`
```javascript
import Api from '@watch-state/api'
const user = new Api('https://reqres.in/api/user/{id}', {
default: {
data: { id: null }
}
})
user.get({ id: 1 }).value.data.id
// null
user.get({ id: 1 }).loaded
// false
await user.get({ id: 1 })
user.get({ id: 1 }).value.data.id
// 1
```
You can setup default `data` argument.
```javascript
const user = new Api('https://reqres.in/api/user/{id}', {
data: {
id: 1
}
})
;(await user.get()).data.id
// 1
;(await user.get({id: 2})).data.id
// 2
```
You can override search params as well
```javascript
const users = new Api('https://reqres.in/api/users?page={page}', {
data: {
page: 1
}
})
await users.get()
// request to https://reqres.in/api/users?page=1
```
Or you can provide additional fields for `get` method to add query search params
```javascript
const users = new Api('https://reqres.in/api/users', {
data: {
page: 1
}
})
await users.get()
// request to https://reqres.in/api/users?page=1
```
### Cache invalidation
You can update all [Fetch](https://www.npmjs.com/package/@watch-state/fetch) instances of an `Api` with `update` method
```typescript jsx
import { Watch } from 'watch-state'
import { Api } from ' @watch-state/api'
const users = new Api('https://reqres.in/api/users?page={page}', {
data: {
page: 1
}
})
new Watch(() => {
console.log(users.get().value)
})
await users.get()
users.update()
```
You can update by object keys
```typescript jsx
import { Watch } from 'watch-state'
import { Api } from ' @watch-state/api'
const users = new Api('https://reqres.in/api/users', {
getKeys: value => value.data.map(({id}) => id),
})
new Watch(() => {
console.log(users.get().value)
})
await users.get()
users.update([10])
// nothing happens becase the first page do not contain the user with id equas 10
users.update([1])
```
### TypeScript
Api has 3 generics, the first one is a data type the request will return
```typescript
interface Responce {
page: number
per_page: number
// ...
}
const users = new Api('https://reqres.in/api/users')
console.log(users.get().value?.page)
```
The second generic is an error type you can get
```typescript
interface ResponceError {
code: number
message: string
}
const users = new Api('https://reqres.in/api/users')
console.log(users.get().error?.message)
```
The last generic is a data you can provide to the `get` method
```typescript
interface Data {
page: number
}
const users = new Api('https://reqres.in/api/users')
await users.get({ page: 1 })
```
When you don't need a data for the api, it's better to use [Fetch](https://www.npmjs.com/package/@watch-state/fetch)
instead of, but you can use `void` type to prevent any query options.
```typescript
const user = new Api('https://reqres.in/api/users')
await user.get()
```
## Issues
If you find a bug, please file an issue on [GitHub](https://github.com/d8corp/watch-state-ajax/issues)
[](https://github.com/d8corp/watch-state-ajax/issues)