Add support for keepalive (#29)

daohoangson · web-flow · commit d7f14d14a600 · 2021-05-07T10:37:37.000+07:00
diff --git a/README.md b/README.md
@@ -291,7 +291,8 @@ Alias:
 Params:
  
  - `options` object or string (will be used as `uri`)
-   - `body` default=`null`
+   - `body` default=`undefined`
+   - `keepalive` default=`false`
    - `method` default=`'GET'`
    - `headers` default=`{}`
    - `params` default=`{}`
diff --git a/lerna.json b/lerna.json
@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "6.0.0-alpha.4"
+  "version": "6.0.0-alpha.5"
 }
diff --git a/packages/tinhte-api-demo/package.json b/packages/tinhte-api-demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tinhte-api-demo",
-  "version": "6.0.0-alpha.4",
+  "version": "6.0.0-alpha.5",
   "description": "tinhte-api DEMO",
   "private": true,
   "scripts": {
@@ -18,7 +18,7 @@
     "react-dom": "^16.9.0",
     "react-router-dom": "^5.0.1",
     "sanitize-html": "^2.3.3",
-    "tinhte-api-react": "^6.0.0-alpha.4"
+    "tinhte-api-react": "^6.0.0-alpha.5"
   },
   "devDependencies": {
     "standard": "^14.3.1"
diff --git a/packages/tinhte-api-react/package.json b/packages/tinhte-api-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tinhte-api-react",
-  "version": "6.0.0-alpha.4",
+  "version": "6.0.0-alpha.5",
   "description": "tinhte-api React component",
   "main": "dist/tinhte-api-react.cjs.js",
   "module": "dist/tinhte-api-react.js",
@@ -19,7 +19,7 @@
   "dependencies": {
     "js-cookie": "^2.2.1",
     "react-ssr-prepass": "^1.2.1",
-    "tinhte-api": "^6.0.0-alpha.3"
+    "tinhte-api": "^6.0.0-alpha.5"
   },
   "peerDependencies": {
     "react": ">=16.8 <17"
diff --git a/packages/tinhte-api-react/src/helpers/fetchApiDataForProvider.ts b/packages/tinhte-api-react/src/helpers/fetchApiDataForProvider.ts
@@ -25,9 +25,13 @@ export async function fetchApiDataForProvider (api: ReactApi, internalApi: React
 
   const json = await api.fetchMultiple(() => {
     for (let i = 0; i < queue.length; i++) {
+      const uniqueId = standardizeReqOptions(fetch as any)
+      if (uniqueId === undefined) {
+        continue
+      }
+
       api.fetchOne(queue[i])
         .catch((reason) => {
-          const uniqueId = standardizeReqOptions(fetch as any)
           internalApi.log('fetchApiDataForProvider queue[%d] has been rejected (%s, %s)', i, uniqueId, reason)
           reasons[uniqueId] = reason instanceof Error ? reason.message : typeof reason === 'string' ? reason : JSON.stringify(reason)
         })
diff --git a/packages/tinhte-api-react/src/hoc/ApiConsumer.tsx b/packages/tinhte-api-react/src/hoc/ApiConsumer.tsx
@@ -59,6 +59,10 @@ const useApiData = (props: _ApiConsumerPropsInternal, fetches?: Record<string, R
     }
 
     const uniqueId = standardizeReqOptions(fetch as any)
+    if (uniqueId === undefined) {
+      continue
+    }
+
     const job = jobs[uniqueId]
     if (job === undefined ||
       job._req === undefined ||
diff --git a/packages/tinhte-api/package.json b/packages/tinhte-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tinhte-api",
-  "version": "6.0.0-alpha.3",
+  "version": "6.0.0-alpha.5",
   "description": "tinhte-api library",
   "main": "dist/tinhte-api.cjs.js",
   "module": "dist/tinhte-api.js",
diff --git a/packages/tinhte-api/src/fetches/batch.ts b/packages/tinhte-api/src/fetches/batch.ts
@@ -1,4 +1,4 @@
-import { StandardizedFetchOptions } from '../helpers/standardizeReqOptions'
+import { StandardizedFetchOptions } from './types'
 
 export interface Batch {
   enqueue: (resolve: BatchResolve, reject: BatchReject) => void
diff --git a/packages/tinhte-api/src/fetches/fetchMultiple.ts b/packages/tinhte-api/src/fetches/fetchMultiple.ts
@@ -1,8 +1,8 @@
 import errors from '../helpers/errors'
-import standardizeReqOptions, { StandardizedFetchOptions } from '../helpers/standardizeReqOptions'
+import standardizeReqOptions from '../helpers/standardizeReqOptions'
 import { ApiInternal } from '../types'
 import { Batches, BatchReject, BatchRequest, BatchResolve } from './batch'
-import { FetchHeaders, FetchJson, FetchMultiple, FetchMultipleJob, FetchMultipleJobs, FetchMultipleOptions, FetchParams } from './types'
+import { FetchHeaders, FetchJson, FetchMultiple, FetchMultipleJob, FetchMultipleJobs, FetchMultipleOptions, FetchParams, StandardizedFetchOptions } from './types'
 
 interface _Context {
   batchHeaders: FetchHeaders
diff --git a/packages/tinhte-api/src/fetches/fetchOne.ts b/packages/tinhte-api/src/fetches/fetchOne.ts
@@ -1,7 +1,7 @@
-import standardizeReqOptions, { StandardizedFetchOptions } from '../helpers/standardizeReqOptions'
+import standardizeReqOptions from '../helpers/standardizeReqOptions'
 import { ApiInternal } from '../types'
 import { Batches } from './batch'
-import { FetchJson, FetchOne } from './types'
+import { FetchJson, FetchOne, StandardizedFetchOptions } from './types'
 
 const fetchOneInit = (fetchJson: FetchJson, batch: Batches, internalApi: ApiInternal): FetchOne => {
   let reqLatestId = 0
@@ -20,7 +20,7 @@ const fetchOneInit = (fetchJson: FetchJson, batch: Batches, internalApi: ApiInte
     const reqId = reqLatestId
     const current = batch.getCurrent()
 
-    if (current === null || options.body !== null || !options.parseJson) {
+    if (current === null || uniqueId === undefined) {
       internalApi.log('Request #%d is being fetched...', reqId)
       return await fetchJson(options)
     } else {
diff --git a/packages/tinhte-api/src/fetches/index.ts b/packages/tinhte-api/src/fetches/index.ts
@@ -2,8 +2,7 @@ import batchFactory from './batch'
 import fetchOneInit from './fetchOne'
 import fetchMultipleInit from './fetchMultiple'
 import { Api, ApiInternal } from '../types'
-import { StandardizedFetchOptions } from '../helpers/standardizeReqOptions'
-import { Fetches, FetchJson } from './types'
+import { Fetches, FetchJson, StandardizedFetchOptions } from './types'
 
 const fetchesInit = (api: Api, internalApi: ApiInternal): Fetches => {
   const batch = batchFactory()
@@ -60,7 +59,7 @@ const fetchesInit = (api: Api, internalApi: ApiInternal): Fetches => {
     fetchCount++
 
     const url = buildUrl(options)
-    const { body, method, params, parseJson } = options
+    const { body, keepalive, method, params, parseJson } = options
 
     const headers = { ...api.getHeaders() }
     const { headers: optionHeaders } = options
@@ -75,12 +74,13 @@ const fetchesInit = (api: Api, internalApi: ApiInternal): Fetches => {
 
     let p = fetch(url, {
       body,
-      credentials: (typeof params?._xfToken === 'string') ? 'include' : undefined,
+      credentials: (typeof params._xfToken === 'string') ? 'include' : undefined,
       headers,
+      keepalive: keepalive === true,
       method
     })
 
-    if (parseJson) {
+    if (parseJson !== false) {
       p = p.then(async response => {
         return await response.json()
           .catch((reason) => {
diff --git a/packages/tinhte-api/src/fetches/types.ts b/packages/tinhte-api/src/fetches/types.ts
@@ -1,20 +1,27 @@
-import { StandardizedFetchOptions } from '../helpers/standardizeReqOptions'
-
 export type FetchHeaders = Record<string, string>
 
 export type FetchJson = (options: StandardizedFetchOptions) => Promise<any>
 
 export type FetchOne = (input: FetchOptions | string) => Promise<any>
 
 export interface FetchOptions {
-  body?: BodyInit | null
+  body?: BodyInit
+  keepalive?: boolean
   method?: string
   headers?: FetchHeaders
   params?: FetchParams
   parseJson?: boolean
   uri?: string
 }
 
+export type StandardizedFetchOptions = FetchOptions & {
+  method: string
+  headers: FetchHeaders
+  params: FetchParams
+  paramsAsString: string
+  uri: string
+}
+
 export type FetchMultiple = (fetches: () => void, options?: FetchMultipleOptions) => Promise<any>
 
 export interface FetchMultipleJob {
diff --git a/packages/tinhte-api/src/helpers/standardizeReqOptions.ts b/packages/tinhte-api/src/helpers/standardizeReqOptions.ts
@@ -1,19 +1,8 @@
 import { parse, stringify } from 'querystring'
-import { FetchHeaders, FetchOptions, FetchParams } from '../fetches/types'
+import { FetchOptions, FetchParams, StandardizedFetchOptions } from '../fetches/types'
 
 import { hashMd5 } from './crypt'
 
-export type StandardizedFetchOptions = FetchOptions & {
-  body: BodyInit | null
-  explain: string
-  method: string
-  headers: FetchHeaders
-  params: FetchParams
-  paramsAsString: string
-  parseJson: boolean
-  uri: string
-}
-
 const filterEmptyValueFromArray = (array: string[]): string[] => {
   const filtered: string[] = []
 
@@ -66,14 +55,12 @@ const extractParamsFromQuerystring = (str: string): FetchParams => {
 
 const stringCompareFn = (a: string, b: string): number => a.localeCompare(b)
 
-const standardizeReqOptions = (options: StandardizedFetchOptions): string => {
+const standardizeReqOptions = (options: StandardizedFetchOptions): string | undefined => {
   const input: FetchOptions = { ...options }
   options.uri = input.uri ?? ''
   options.params = input.params ?? {}
   options.headers = input.headers ?? {}
-  options.body = input.body ?? null
-  options.method = (input.method ?? (options.body !== null ? 'POST' : 'GET')).toUpperCase()
-  options.parseJson = input.parseJson !== false
+  options.method = (input.method ?? (options.body !== undefined ? 'POST' : 'GET')).toUpperCase()
 
   let isFullUri = false
   if (options.uri.match(/^https?:\/\//) === null) {
@@ -91,21 +78,28 @@ const standardizeReqOptions = (options: StandardizedFetchOptions): string => {
   const paramsParts = paramsStringified.split(/&/).sort(stringCompareFn)
   options.paramsAsString = paramsParts.join('&')
 
-  if (!isFullUri) {
-    options.explain = `${options.method} ${options.uri}?${options.paramsAsString}`
-  } else {
+  let explain = `${options.method} ${options.uri}?${options.paramsAsString}`
+  if (isFullUri) {
     // still parse query from options.uri to make sure options.param is correct
     const uriQueryMatches = options.uri.match(/\?(.+)$/)
     if (uriQueryMatches !== null) {
       options.params = { ...options.params, ...extractParamsFromQuerystring(uriQueryMatches[1]) }
     }
 
-    options.explain = `${options.method} full=${options.uri} params=${options.paramsAsString}`
+    explain = `${options.method} full=${options.uri} params=${options.paramsAsString}`
   }
 
-  const uniqueId = hashMd5(options.explain)
+  if (
+    options.body !== undefined ||
+    options.keepalive === true ||
+    options.parseJson === false
+  ) {
+    // requests with these options can't be detected properly
+    // unique ID will not be generated
+    return
+  }
 
-  return uniqueId
+  return hashMd5(explain)
 }
 
 export default standardizeReqOptions

Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,5 @@`
`2`	`2`	`"packages": [`
`3`	`3`	`"packages/*"`
`4`	`4`	`],`
`5`		`- "version": "6.0.0-alpha.4"`
	`5`	`+ "version": "6.0.0-alpha.5"`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "tinhte-api",`
`3`		`- "version": "6.0.0-alpha.3",`
	`3`	`+ "version": "6.0.0-alpha.5",`
`4`	`4`	`"description": "tinhte-api library",`
`5`	`5`	`"main": "dist/tinhte-api.cjs.js",`
`6`	`6`	`"module": "dist/tinhte-api.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { StandardizedFetchOptions } from '../helpers/standardizeReqOptions'`
	`1`	`+import { StandardizedFetchOptions } from './types'`
`2`	`2`
`3`	`3`	`export interface Batch {`
`4`	`4`	`enqueue: (resolve: BatchResolve, reject: BatchReject) => void`