fetchbasequery 0.1.2 → 0.2.0

package/README.md

@@ -27,13 +27,14 @@ const query = fetchBaseQuery({
     // main options ...
     baseUrl: 'https://api.example.org/v1'
     baseQuery,
+    timeout: 10000, // in milliseconds
     logErrors: true,
     // add some defaults for `fetch()` ...
     mode: 'cors',
     credentials: 'include',
     cache: 'reload',
     // middlewares
-    middleware: [
+    middlewares: [
         encodeBody(),
         accessToken({
             getAccessToken: () => localStorage.getItem('access_token'),
@@ -50,7 +51,7 @@ const query = fetchBaseQuery({
 Now get easy to make queries:
 
 ```js
-const response = await query({ url: '/users/me' }) // don't worry about catching errors
+const response = await query({ url: '/users/me', timeout: 3000 }) // don't worry about catching errors
 const { status, success, error } = response
 if (success) {
     setUser(response.data)
@@ -71,6 +72,13 @@ addEventListener('fetch', evt => {
 })
 ```
 
+Aborting query:
+
+```js
+const promise = query({ url: '/users/me' })
+promise.abort()
+```
+
 It works fine both on frontend and backend sides. For backend side usage Node.js v18+ is required,
 because the middleware `baseQuery` based on `Fetch API`. But it can be replaced with your own
 implementation based on another API (e.g. based on `axios` etc).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fetchbasequery",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Library for easily make HTTP queries without mass of boilerplate code.",
   "type": "module",
   "main": "src/fetchBaseQuery.js",

package/src/baseQuery.js

@@ -4,7 +4,7 @@ import mergeHeaders from './helpers/mergeHeaders.js'
 
 const moduleName = 'fetchBaseQuery/baseQuery'
 
-export default async ({ url: endpoint, request: subject, ...options } = {}) => {
+const baseQuery = async ({ url: endpoint, request: subject, ...options } = {}) => {
     const {
         baseUrl,
         logErrors,
@@ -64,3 +64,17 @@ export default async ({ url: endpoint, request: subject, ...options } = {}) => {
     }
     return response
 }
+
+export default ({ timeout, signal, ...options } = {}) => {
+    // construct abort signal
+    const abortController = new AbortController()
+    const abortSignal = AbortSignal.any([
+        abortController.signal,
+        ...(timeout ? [ AbortSignal.timeout(timeout) ] : []),
+        ...(signal ? [ signal ] : [])
+    ])
+    // construct abortable promise
+    const promise = baseQuery({ ...options, signal: abortSignal })
+    promise.abort = () => abortController.abort()
+    return promise
+}

package/src/fetchBaseQuery.js

@@ -1,9 +1,10 @@
 // const pipeAsync = (...fns) => (input) => fns.reduce((chain, func) => chain.then(func), Promise.resolve(input))
+import abortable from './helpers/abortable.js'
 import pipe from './helpers/pipe.js'
 import defaultBaseQuery from './baseQuery.js'
 
 export default ({ baseQuery, middlewares, ...defaultOptions } = {}) => {
-    const pipedQuery = pipe(...(middlewares || []))(baseQuery || defaultBaseQuery)
+    const pipedQuery = pipe(...(middlewares || []).map(abortable))(baseQuery || defaultBaseQuery)
     return options => pipedQuery({
         ...defaultOptions,
         ...options

package/src/helpers/abortable.js

@@ -0,0 +1,13 @@
+export default middleware => query => ({ signal, ...options } = {}) => {
+    const abortController = new AbortController()
+    const abortableQuery = (options) => query({
+        ...options,
+        signal: AbortSignal.any([
+            abortController.signal,
+            ...(signal ? [ signal ] : [])
+        ])
+    })
+    const promise = middleware(abortableQuery)(options)
+    promise.abort = () => abortController.abort()
+    return promise
+}

package/types/index.d.ts

@@ -1,18 +1,19 @@
 export type DebuggingFlags = {
-    baseQuery: boolean | undefined,
-    encodeBody: boolean | undefined,
-    accessToken: boolean | undefined,
-    jsonReply: boolean | undefined,
-    commonReply: boolean | undefined
+    baseQuery?: boolean,
+    encodeBody?: boolean,
+    accessToken?: boolean,
+    jsonReply?: boolean,
+    commonReply?: boolean
 };
 
 export type FetchOptions = {
-    logErrors: boolean | undefined,
-    url: URL | string | undefined,
-    request: Request | undefined,
-    method: string | undefined,
-    headers: Headers | object | undefined,
-    body: string
+    logErrors?: boolean,
+    url?: URL | string,
+    request?: Request,
+    timeout?: number,
+    method?: string,
+    headers?: Headers | object,
+    body?: string
         | object
         | FormData
         | Blob
@@ -28,28 +29,27 @@ export type FetchOptions = {
         | Uint32Array
         | BigInt64Array
         | BigUint64Array
-        | URLSearchParams
-        | undefined,
-    mode: string | undefined,
-    credentials: string | undefined,
-    cache: string | undefined,
-    redirect: string | undefined,
-    referrer: string | undefined,
-    referrerPolicy: string | undefined,
-    integrity: string | undefined,
-    keepalive: boolean | undefined,
-    signal: AbortSignal | undefined,
-    debug: DebuggingFlags | undefined
+        | URLSearchParams,
+    mode?: string,
+    credentials?: string,
+    cache?: string,
+    redirect?: string,
+    referrer?: string,
+    referrerPolicy?: string,
+    integrity?: string,
+    keepalive?: boolean,
+    signal?: AbortSignal,
+    debug?: DebuggingFlags
 };
 
-export type baseQueryFn = (options: FetchOptions | undefined) => Promise<Response>;
-export type queryFn = (options: FetchOptions | undefined) => Promise<any>;
+export type baseQueryFn = (options?: FetchOptions) => Promise<Response>;
+export type queryFn = (options?: FetchOptions) => Promise<any>;
 export type middlewareFn = (settings: any) => (query: queryFn) => queryFn;
 
 export type FetchBaseQueryOptions = {
-    baseUrl: URL | string  | undefined,
-    baseQuery: baseQueryFn | undefined,
-    middlewares: Array<middlewareFn>
+    baseUrl?: URL | string,
+    baseQuery?: baseQueryFn,
+    middlewares?: Array<middlewareFn>
 };
 
 export const baseQuery: baseQueryFn;
@@ -59,6 +59,6 @@ export const accessToken: middlewareFn;
 export const jsonReply: middlewareFn;
 export const commonReply: middlewareFn;
 
-const fetchBaseQuery: (options: FetchBaseQueryOptions & FetchOptions) => queryFn;
+declare function fetchBaseQuery(options?: FetchBaseQueryOptions & FetchOptions): queryFn;
 
 export default fetchBaseQuery;