dredgeFetch
import { dredgeFetch } from 'dredge-fetch'
import type { RootRouter } from './router'
let client = dredgeFetch<RootRouter>().extends({
prefixUrl: 'https://api.example.com'
})
client(path, options)
Returns: DredgeResponsePromise
Methods:
client.get(path, options)
client.post(path, options)
client.put(path, options)
client.patch(path, options)
client.delete(path, options)
client.head(path, options)
client.extends(defaultOptions)
path
Type: string
It should be only the pathname, it must not contain search query. If you wish to pass params separately, then prefix the path with :/
.
client('/user/1', { method: 'get' });
client(':/user/:id', {
method: 'get',
params: {
id: 1
}
}); // same as above
options
Type: object
prefixUrl
Type: string
| URL
A prefix to prepend to the path of every request. It must be a valid url, otherwise an error will be thrown.
Tip: Define it in client.extends().
dataTypes
Type: Record<string, string>
Default: {}
Specify the dataType name as key and the media-type as value. This will let you use dataType and responseDataType.
Tip: Define it in client.extends().
dataType
Specify the content-type header with ease.
client = client.extends({
dataTypes: {
json: 'application/json',
form: 'multipart/form-data'
},
})
client('/posts', {
method: 'post',
headers: {
'Content-Type': 'application/json'
}
})
// same as above
client('/posts', {
method: 'post',
dataType: 'json'
})
data
Type: any
Instead of body, you pass data which will be stringified according to content-type header and sent as body.
client = client.extends({
dataTypes: {
json: 'application/json',
form: 'multipart/form-data'
},
})
client('/users', {
method: 'post',
data: {
name: 'Dhiraj Arun',
username: 'dhrjarun'
}
dataType: 'json' // will be sent as 'Content-Type: application/json'
})
You can avoid passing dataType
option and achieve the same like this:
client('/users', {
method: 'post',
json: {
name: 'Dhiraj Arun',
username: 'dhrjarun',
}
})
Along with data
option, there will be options like json
, form
or whatever you defined in dataTypes.
responseDataType
Specify the accept header with ease.
client = client.extends({
dataTypes: {
json: 'application/json',
form: 'multipart/form-data'
},
})
client('/post', {
method: 'get',
headers: {
'Accept': 'application/json'
}
})
// same as above
client('/posts', {
method: 'get',
responseDataType: 'json'
})
throwHttpErrors
Type: boolean
Default: true
Throw HTTPError
for non 2xx responses.
searchParams
Type: Record<string, any | any[]>
Default: {}
Send search params, in the value you can pass an array if you wish to send multiple queries.
client('/posts', {
method: 'get',
searchParams: {
page: 1,
tags: ['a', 'b']
} // will be sent as '?page=1&tags=a&tags=b'
})
You can pass string
, number
, boolean
even Date
as value. It gets serialized according to serializeSearchParams.
params
Type: Record<string, any>
Default: {}
Pass params separately from the path. Be sure to prefix the path with :/
. You can pass string
, number
, boolean
even Date
as value and it will get serialized according to serializeParams.
client('/user/:id', {
params: {
id: 1
}
})
headers
Type: HeaderInit
Default: {}
Headers to be sent with the request.
method
Type: string
HTTP method used to make the request.
dataSerializers
Type: Record<string, DataSerializer>
Default: { 'application/json': Function , 'text/plain': Function }
type DataSerializer = (
options: DataSerializerOptions,
) => MaybePromise<string | ArrayBuffer | FormData | URLSearchParams>
type DataSerializerOptions = {
data: any,
mediaType?: string,
boundary?: string,
charset?: string
}
Specify the serializers for media-types.
client = client.extends({
dataSerializers: {
'application/json': () => {},
'multipart/form-data': () => {},
}
})
bodyParsers
Type: Record<string, BodyParser>
Default: { 'application/json': Function , 'text/plain': Function }
type BodyParser = (
options: BodyParserOptions,
) => MaybePromise<any>;
type BodyParserOptions = {
readonly body: ReadableStream | null,
text: () => Promise<string>,
arrayBuffer: () => Promise<ArrayBuffer>,
blob: () => Promise<Blob>,
formData: () => Promise<FormData>,
readonly mediaType?: string,
readonly boundary?: string,
readonly charset?: string,
}
Specify the parsers for media-types.
serializeParams
Type: SerializeParamsFunction
Default: Function
type SerializeParamsFunction = (params: Record<string, any>) => Record<string, string>
serializeSearchParams
Type: SerializeSearchParamsFunction
Default: Function
type SerializeSearchParamsFunction = (
params: Record<string, any[]>
) => Record<string, string[]>
fetch
Type: Fetch
Default: fetch
client.extends(defaultOptions)
Create a new client instance with some defaults overridden with your own.
const extended = client.extends({
prefixUrl: 'https://api.example.com',
dataTypes: {
json: 'application/json',
form: 'multipart/form-data'
},
dataSerializers: {},
bodyParsers: {},
serializeParams: (params) => {},
serializeSearchParams: (params) => {},
})
DredgeResponsePromise
Methods are:
data
and other dataTypes methodsthen
catch
finally
client
returns DredgeResponsePromise
which is a Promise
that resolves to DredgeResponse
.
DredgeResponse
is a Response
object with a promise property data
which resolves to parsed data according to content-type header.
type DredgeResponse = globalThis.Response & {
data: Promise<any>
}
const response = await client.get('/posts')
const data = await response.data()
dredgeResponsePromise.data()
Returns: Promise<any>
alias of: dredgeResponse.data
const data = await client.get('/posts', {
responseDataType: 'json'
}).data()
If you have defined dataTypes, then you can call those method to get the data, as well set the accept
header rather than using responseDataType.
client = client.extends({
dataTypes: {
json: 'application/json',
form: 'multipart/form-data'
},
})
const data = await client.get('/posts').json() // will be sent as 'Accept: application/json'
const data = await client.get('/posts').form() // will be sent as 'Accept: multipart/form-data'
HTTPError
interface HTTPError extends Error {
name: 'HttpError';
request: Request;
response: Response;
options: NormalizedFetchOptions;
}