The @soie/fetcher library is a straightforward set of fetch utilities. It facilitates easy usage of both RESTful and GraphQL HTTP requests and is compatible with all modern browsers and Node.js 18+.
Using npm:
npm i @soie/fetcher
Using yarn:
yarn add @soie/fetcher
Using pnpm:
pnpm add @soie/fetcher
-
timeout
- Specifies the timeout in milliseconds before a request times out. If the request takes longer than the timeout, it will be aborted.
- type: number
- default: undefined
-
baseURL
- Prepends the baseURL to the URL unless the URL is absolute.
- type: string
-
default:
''
-
headers
- Allows you to add headers to every request. It can be a Headers object or an object literal with string values.
-
type:
Header
or object literal with String{ "key": "value"}
- default: undefined
- url
- init
import { createFetcher } from '@soie/fetcher'
const fetcher = createFetcher({
timeout: 3000,
baseURL: 'https://pokeapi.co/api/v2',
headers: {
Authorization: `Bearer ${your token}`,
}
})
const getPokemonList = async () => {
const { data } = await fetcher('/pokemon')
return data
}
-
response
- No need to use
response.json()
, as the fetcher maps response data into: -
status
- The status code of the response
- type: number
-
statusText
- The status message corresponding to the status code
- type: string
- header
-
data
- The API response body in JSON format
- No need to use
-
errors
- If there is a request error, it will always return an
error
object -
status
- The status code of the response
- type: number
-
statusText
- The status message corresponding to the status code
- type: string
- header
-
message
- If
response.message
can be parsed byJSON.parse
, it will return the parsed object; otherwise, it returns a string
- If
- If there is a request error, it will always return an
import { createFetcher } from '@soie/fetcher'
type PokemonList = {
// ...
}
const fetcher = createFetcher({
timeout: 3000,
baseURL: 'https://pokeapi.co/api/v2',
headers: {
Authorization: `Bearer ${your token}`,
}
})
const getPokemonList = async (): Promise<PokemonList> => {
const { data } = await fetcher<PokemonList>('/pokemon')
return data
}
import { createGraphQLFetcher } from '@soie/fetcher'
const graphQLFetcher = createGraphQLFetcher({
timeout: 3000,
baseURL: 'https://beta.pokeapi.co',
headers: {
Authorization: `Bearer ${your token}`,
}
})
-
timeout
- Specifies the timeout in milliseconds before a request times out
- If the request takes longer than the timeout, it will be aborted.
- type: number
- default: undefined
-
baseURL
- Prepends the baseURL to the URL unless the URL is absolute.
- type: string
-
default:
''
-
headers
- Allows you to add headers to every request. It can be a Headers object or an object literal with string values.
-
type:
Header
or object literal with String{ "key": "value"}
- default: undefined
- url
-
init
- RequestInit MDN
- In
graphQLFetcher
,method
is always set toPOST
, so you don't need to pass it.
import { createGraphQLFetcher } from '@soie/fetcher'
const graphQLFetcher = createGraphQLFetcher({
timeout: 3000,
baseURL: 'https://beta.pokeapi.co',
headers: {
Authorization: `Bearer ${your token}`,
}
})
const getPokemonLocationAlola = async () => {
const { data } = await graphQLFetcher(
'/graphql/v1beta',
{
body: JSON.stringify({
query: `
query locationAlola($region: String) {
region: pokemon_v2_region(where: {name: {_eq: $region}}) {
name
}
}
`,
variables: {
region: 'alola'
},
operationName: 'locationAlola'
})
}
)
return data
}
-
response
- No need to use
response.json()
, as the fetcher maps response data into: -
status
- The status code of the response
- type: number
-
statusText
- The status message corresponding to the status code
- type: string
- header
-
data
- The API response body in JSON format
- No need to use
-
errors
- If there is a request error, it will always return an
error
object -
status
- The status code of the response
- type: number
-
statusText
- The status message corresponding to the status code
- type: string
- header
-
message
- If
response.message
can be parsed byJSON.parse
, it will return the parsed object; otherwise, it returns a string
- If
-
errors
- Returns GraphQL errors or
[]
- message
- locations
- path
- extensions
- Returns GraphQL errors or
- If there is a request error, it will always return an
import { createGraphQLFetcher } from '@soie/fetcher'
type PokemonLocationAlola = {
// ...
}
const graphQLFetcher = createGraphQLFetcher({
timeout: 3000,
baseURL: 'https://beta.pokeapi.co',
headers: {
Authorization: `Bearer ${your token}`,
}
})
const getPokemonLocationAlola = async (): Promise<PokemonLocationAlola> => {
const { data } = await graphQLFetcher<PokemonLocationAlola>(
'/graphql/v1beta',
{
body: JSON.stringify({
query: `
query locationAlola($region: String) {
region: pokemon_v2_region(where: {name: {_eq: $region}}) {
name
}
}
`,
variables: {
region: 'alola'
},
operationName: 'locationAlola'
})
}
)
return data
}