@watch-state/api v2.0.0-alpha.9
@watch-state/api
Api with watch-state
Based on @watch-state/fetch
Install
npm
npm i @watch-state/api
yarn
yarn add @watch-state/api
Usage
Use Api
when you want to get data through API
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
import Api from '@watch-state/api'
const api = new Api('https://reqres.in/api/{module}/{id}')
Get Fetch of the api with get
method
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
with the second argument of Api
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.
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
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
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 instances of an Api
with update
method
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
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
interface Responce {
page: number
per_page: number
// ...
}
const users = new Api<Responce>('https://reqres.in/api/users')
console.log(users.get().value?.page)
The second generic is an error type you can get
interface ResponceError {
code: number
message: string
}
const users = new Api<any, ResponceError>('https://reqres.in/api/users')
console.log(users.get().error?.message)
The last generic is a data you can provide to the get
method
interface Data {
page: number
}
const users = new Api<any, any, Data>('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
instead of, but you can use void
type to prevent any query options.
const user = new Api<any, any, void>('https://reqres.in/api/users')
await user.get()
Issues
If you find a bug, please file an issue on GitHub
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago