From 83d1250be3bc3967afc6ebf14b9f0f016b052363 Mon Sep 17 00:00:00 2001 From: danybeltran Date: Fri, 19 Apr 2024 19:01:22 -0600 Subject: [PATCH 1/3] feat(middleware): Adds the middleware property --- package.json | 35 ++++++++++++++++++----------------- src/hooks/use-fetch.ts | 10 ++++++++-- src/internal/constants.ts | 4 +++- src/internal/index.ts | 4 +++- src/types/index.ts | 10 ++++++++++ src/utils/shared.ts | 9 ++++++++- 6 files changed, 50 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 4eee2b0..fdab0ff 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "React hooks for data fetching", "main": "dist/index.js", "scripts": { - "test": "tsc && webpack --mode production && jest", + "test": "tsc && jest", "compile": "tsc" }, "repository": { @@ -36,22 +36,23 @@ "license": "MIT", "homepage": "https://http-react.netlify.app", "devDependencies": { - "@babel/preset-env": "^7.16.11", - "@babel/preset-react": "^7.16.7", - "@testing-library/react": "^13.1.1", - "@testing-library/react-hooks": "^7.0.2", - "@types/jest": "^27.4.0", - "@types/react": "^18.0.9", - "babel-jest": "^27.4.6", - "jest": "^27.4.7", - "react": ">=16.13.1", - "react-dom": ">=16.13.1", - "react-test-renderer": "^17.0.2", - "ts-jest": "^27.1.3", - "ts-loader": "^9.4.2", - "typescript": "^4.5.5", - "webpack": "^5.75.0", - "webpack-cli": "^5.0.1" + "@babel/preset-env": "^7.24.4", + "@babel/preset-react": "^7.24.1", + "@testing-library/react": "^15.0.2", + "@testing-library/react-hooks": "^8.0.1", + "@types/jest": "^29.5.12", + "@types/react": "^18.2.79", + "babel-jest": "^29.7.0", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-test-renderer": "^18.2.0", + "ts-jest": "^29.1.2", + "ts-loader": "^9.5.1", + "typescript": "^5.4.5", + "webpack": "^5.91.0", + "webpack-cli": "^5.1.4" }, "peerDependencies": { "react": ">=16.13.1" diff --git a/src/hooks/use-fetch.ts b/src/hooks/use-fetch.ts index 8ef7a5d..4947031 100644 --- a/src/hooks/use-fetch.ts +++ b/src/hooks/use-fetch.ts @@ -126,7 +126,8 @@ export function useFetch( onFetchEnd = ctx.onFetchEnd, cacheIfError = ctx.cacheIfError, maxCacheAge = ctx.maxCacheAge, - fetcher = ctx.fetcher + fetcher = ctx.fetcher, + middleware = ctx.middleware } = optionsConfig const $fetch = isFunction(fetcher) ? fetcher : fetch @@ -621,7 +622,12 @@ export function useFetch( } // @ts-ignore - 'data' is priority because 'fetcher' can return it - const _data = json?.['data'] ?? (await (resolver as any)(json)) + const incoming = json?.['data'] ?? (await (resolver as any)(json)) + + const _data = isFunction(middleware) + ? await middleware!(incoming as any, thisCache) + : incoming + if (code >= 200 && code < 400) { hasData.set(resolvedDataKey, true) hasData.set(resolvedKey, true) diff --git a/src/internal/constants.ts b/src/internal/constants.ts index f29a7bb..5800cba 100644 --- a/src/internal/constants.ts +++ b/src/internal/constants.ts @@ -11,6 +11,7 @@ const RETRY_ON_RECONNECT = true const REVALIDATE_ON_MOUNT = true const DEFAULT_GRAPHQL_PATH = '/graphql' const DEFAULT_RESOLVER = (e: any) => e.json() +const DEFAULT_MIDDLEWARE = (incoming: any, previous: any) => incoming const METHODS = { GET: 'GET', @@ -51,5 +52,6 @@ export { DEFAULT_GRAPHQL_PATH, DEFAULT_RESOLVER, METHODS, - UNITS_MILISECONDS_EQUIVALENTS + UNITS_MILISECONDS_EQUIVALENTS, + DEFAULT_MIDDLEWARE } diff --git a/src/internal/index.ts b/src/internal/index.ts index c76c40e..c8086e1 100644 --- a/src/internal/index.ts +++ b/src/internal/index.ts @@ -6,6 +6,7 @@ import { ATTEMPTS, ATTEMPT_INTERVAL, DEFAULTS, + DEFAULT_MIDDLEWARE, ONLINE, ON_OFFLINE, ON_ONLINE, @@ -168,7 +169,8 @@ const defaultContextVaue: FetchContextType = { online: ONLINE, retryOnReconnect: RETRY_ON_RECONNECT, revalidateOnMount: REVALIDATE_ON_MOUNT, - cacheIfError: true + cacheIfError: true, + middleware: DEFAULT_MIDDLEWARE } export const FetchContext = createContext(defaultContextVaue) diff --git a/src/types/index.ts b/src/types/index.ts index 339d522..18880f6 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -41,6 +41,7 @@ export type FetchContextType = { } suspense?: any[] resolver?: (r: Response) => any + middleware?(incomindgData: any, previousData: any): any children?: any auto?: boolean memory?: boolean @@ -153,6 +154,15 @@ export type FetchConfigType = Omit< 'body' | 'headers' > & { headers?: any + /** + * The middleware function should return the data that will be commited to the state. It can be used for pagination, logging, etc. + * + * It assumes `previousData`, `incomingData` and the returned data have the same type for consistency. + */ + middleware?( + incomindgData: FetchDataType, + previousData: FetchDataType + ): FetchDataType fetcher?( url: string, config: FetchConfigType diff --git a/src/utils/shared.ts b/src/utils/shared.ts index e6d595b..c457f99 100644 --- a/src/utils/shared.ts +++ b/src/utils/shared.ts @@ -111,12 +111,19 @@ export function setQueryParams(url: string, params: any = {}) { .map(paramName => { if (Array.isArray(params[paramName])) { return params[paramName] - .map((p: any) => `${paramName}=${encodeURIComponent(p)}`) + .map((p: any) => + typeof p === 'undefined' + ? '' + : `${paramName}=${encodeURIComponent(p)}` + ) + .filter(Boolean) .join('&') } else { + if (typeof params[paramName] === 'undefined') return '' return `${paramName}=${encodeURIComponent(params[paramName])}` } }) + .filter(Boolean) .join('&') return ( From bbff03eda0a7ebe86c57a75762b3eb153237a960 Mon Sep 17 00:00:00 2001 From: danybeltran Date: Fri, 19 Apr 2024 19:03:12 -0600 Subject: [PATCH 2/3] core(node): Bumps v14 --- .github/workflows/publish-npm.yml | 21 --------------------- .github/workflows/test.yml | 4 ++-- 2 files changed, 2 insertions(+), 23 deletions(-) delete mode 100644 .github/workflows/publish-npm.yml diff --git a/.github/workflows/publish-npm.yml b/.github/workflows/publish-npm.yml deleted file mode 100644 index 63cc1f5..0000000 --- a/.github/workflows/publish-npm.yml +++ /dev/null @@ -1,21 +0,0 @@ -name: Publish Package to npmjs -on: - release: - types: [created] -jobs: - test: - uses: atomic-state/http-react/.github/workflows/test.yml@master - - publish: - needs: test - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - # Setup .npmrc file to publish to npm - - uses: actions/setup-node@v2 - with: - node-version: "16" - registry-url: "https://registry.npmjs.org" - - run: npm publish --access public - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 1ff046c..7c87a5b 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -7,10 +7,10 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - name: Use Node.js 14 + - name: Use Node.js 18 uses: actions/setup-node@v2 with: - node-version: 14 + node-version: 18 - run: npm i - run: npm run compile - run: npm test From 997bcfa96de7b14ad2b194b9b2200f2c2c0ec596 Mon Sep 17 00:00:00 2001 From: danybeltran Date: Fri, 19 Apr 2024 19:07:43 -0600 Subject: [PATCH 3/3] core(deps): Rollback to @testing-library/react-hooks --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fdab0ff..d8d2a64 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "@babel/preset-env": "^7.24.4", "@babel/preset-react": "^7.24.1", "@testing-library/react": "^15.0.2", - "@testing-library/react-hooks": "^8.0.1", + "@testing-library/react-hooks": "3.4.1", "@types/jest": "^29.5.12", "@types/react": "^18.2.79", "babel-jest": "^29.7.0",