{"_id":"@acato/react-fetch","_rev":"3-278a16d4f73f530592f68049a7cc333a","name":"@acato/react-fetch","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@acato/react-fetch","version":"1.0.1","author":{"name":"Marcel Bos","email":"marcel@acato.nl"},"license":"ICS","_id":"@acato/react-fetch@1.0.1","maintainers":[{"name":"beheeracato","email":"beheer@acato.nl"}],"homepage":"https://bitbucket.org/acato/react-fetch#readme","dist":{"shasum":"7915a58c3fe28a846d94d779967336e415195c26","tarball":"https://registry.npmjs.org/@acato/react-fetch/-/react-fetch-1.0.1.tgz","fileCount":3,"integrity":"sha512-AwkCo2K70PoEewAE5yLHahBFl49JxR51TEitfgo/jyZyy+IDeFl3hAAYpYy3SnYCfm6jMG/PFcgGCRUiJUTjzA==","signatures":[{"sig":"MEUCIQDoTxUioWCMJwvuIrVVspgPFfVFSyz5tzxuzZIpRn94iQIgSuU3x0rLJAzw3E5Ewop1rJc6F4pJCJJEzazo1IzQbSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUvy+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDkRAAjWgMWhq1GoaQOhvBocaNo5BivQ2RHikLWu5UwZuwd5O31auP\r\nxHiIrwVe5fBtMmfubIS3OpRM2gaKeA/0jKcqtD0ncaWiU/9HhW22zJ1Vu1IZ\r\nErmMJ3OKRqoXU3eZsXofFg0g17t5bxn3l+PXGSK+945MkoRBLjqmezh4tQeQ\r\nN3XOM7ompjxP2onTgihgvgi6IgAwqcs0Z36hS38u89w/p9+YJAxAxG38SQll\r\n9W1oXomQfIVJrca6iiEsJCBwIQEWWaeLyIg/Ivq9BOztcp39HI6IK0a42M18\r\nloz2vZ3lCRE2HBkU5gqlrF1XxHtLKT3y2YeAovTmw87qGEQVdQjO83t3K1Cr\r\nNG2oc7INtffkv8PA2tbuUIHpDm9EHSUNEyzEsp8y9wb4fv6vuq8X9Z1Ej90X\r\nuxOOafaxGIQgfvqSu0Tc9Ug/8x/eHxltHI6R10N2D86LUihAazU9Mo0p8wH0\r\nGwYxCfQQgwhuGoEWXAgHgIU6GyR/NNsuEXYEmMQr7rPvZ4p4xmrRwhbOvW1O\r\nI4NwLajzxm9anr29AgQfbfvGfqpDDdncU4h82mXWMTlXJW/ONlW5/wjqJerY\r\nWQDuSU+L9PYd887nUZL3Kt5E4KOFI309eqD172a4pn1q0s0bOnWkhvgHmtq+\r\n4WyjGr+kOKRbxW7ZPYTpacWG+TXtid4Gaso=\r\n=ZZ9k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","husky":{"hooks":{"pre-commit":"lint"}},"scripts":{"lint":"eslint ./src","test":"jest ./src","build":"yarn clean & rollup --config","clean":"rimraf ./dist","format":"prettier --write './src/**/*.{spec,js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc","release":"standard-version","lint:fix":"eslint ./src --fix"},"_npmUser":{"name":"beheeracato","email":"beheer@acato.nl"},"repository":{"url":"git+ssh://git@bitbucket.org/acato/react-fetch.git","type":"git"},"_npmVersion":"6.14.16","description":"custom fetch hooks","directories":{},"_nodeVersion":"14.19.0","browserslist":["last 1 chrome versions"],"_hasShrinkwrap":false,"devDependencies":{"jest":"^27.5.1","axios":"^0.26.0","husky":"^7.0.4","react":"^17.0.2","eslint":"^8.10.0","rimraf":"^3.0.2","rollup":"^2.68.0","prettier":"^2.5.1","react-dom":"^17.0.2","standard-version":"^9.3.2","axios-mock-adapter":"^1.20.0","rollup-plugin-copy":"^3.4.0","eslint-plugin-react":"^7.29.2","react-test-renderer":"^17.0.2","rollup-plugin-terser":"^7.0.2","eslint-config-prettier":"^8.4.0","eslint-plugin-prettier":"^4.0.0","@rollup/plugin-commonjs":"^21.0.3","@rollup/plugin-node-resolve":"^13.1.3","@testing-library/react-hooks":"^7.0.2","@babel/plugin-transform-modules-commonjs":"^7.16.8"},"peerDependencies":{"react":"^17.0.2"},"standard-version":{"scripts":{"prerelease":"yarn clean && yarn lint"}},"_npmOperationalInternal":{"tmp":"tmp/react-fetch_1.0.1_1649605822747_0.09655034910321314","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@acato/react-fetch","version":"1.0.2","author":{"name":"Marcel Bos","email":"marcel@acato.nl"},"license":"ICS","_id":"@acato/react-fetch@1.0.2","maintainers":[{"name":"beheeracato","email":"beheer@acato.nl"}],"homepage":"https://bitbucket.org/acato/react-fetch#readme","dist":{"shasum":"587461eef878033d80f66b7a8fdbbaff288a740a","tarball":"https://registry.npmjs.org/@acato/react-fetch/-/react-fetch-1.0.2.tgz","fileCount":3,"integrity":"sha512-bcCzClNlEZKeImOjZHM+N0UDLQ0F13kUWUaJRwQ3AU1c+ckYmu9TjQ1qlwEdAE7dvd9ZnGMdiIN8oRADbm9dZQ==","signatures":[{"sig":"MEYCIQC5BWvktgn1z2L97zjz4MTEyXlXf31+uAzh5/qq9/ucRwIhAJYJmnqSF/3pUPHumS9CdW9d1y1M+wBKbTCIvC4UVy6j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZn8tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlPhAAgyM25+KVQaCU4qMdk+YKPIgOrwwKjbAql+cS0lKhuEp6/UaE\r\nFUk/8bauAU62LKuiHYKcBq2ioReT2N4hOoo2W9yEQDhaudWUEPIBLUwDarzV\r\nAhQEO+GAk5id0F/l3UvJ41gfO5j+/Xst6LZhMqg/gZsIw1priAaQDKJXS7Cy\r\nxS2NOO53j9CdhTZNTXPJfx4D5IvxjFAAfwGTJ2iIf0VbisGIGbd5ZwUEJBzg\r\nLkk3IrA3sV+d+wDM6Mi8XGFtGy9aX4qM5LM2WDgeHm+W9kUAy2LQAsKOjcOC\r\nCHQ5T5ql0nW0I2yB+8BhxO7uw1dtEiNErKoi5v3b9psZ3syPDzbwI8StR7M3\r\nZj+bSloTWlStSZ9Qk7kCbCx53xfBkwlodlGLM7n+JUoi/+vlPdVikD2pMenK\r\nr5VVIWDV2jE32AcH2URfKhBftI95228tF00m8SdqqvmMzNDpjSseSXadssu1\r\nQ54OoTfxj2NSvpgwOD5AATYP6d7+4UnT73ovN/TAhCCoKYKEzVKfBZAtdoX5\r\nWqJ6lg5N78RYW1mUZMTRT2K/1tZNCN9Q+pwleA1fQUpPqPwR8YUIE10scNlp\r\nT8C7bduuruahfLlbushQg1GEu6UecDJMmFTID/9OOIGyf2sYZ/6WsiUop0K3\r\ncsYrZ/CIua85Z2K9mfSFZb1Mw1zwynLwBp4=\r\n=M5wy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","husky":{"hooks":{"pre-commit":"lint"}},"scripts":{"copy":"copyfiles ./package.json ./README.md  dist","lint":"eslint ./src","test":"jest ./src","build":"yarn clean & rollup --config","clean":"rimraf ./dist","format":"prettier --write './src/**/*.{spec,js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc","release":"standard-version","lint:fix":"eslint ./src --fix","prerelease":"yarn format & yarn lint & yarn build"},"_npmUser":{"name":"beheeracato","email":"beheer@acato.nl"},"repository":{"url":"git+ssh://git@bitbucket.org/acato/react-fetch.git","type":"git"},"_npmVersion":"6.14.16","description":"custom fetch hooks","directories":{},"_nodeVersion":"14.19.0","browserslist":["last 1 chrome versions"],"_hasShrinkwrap":false,"devDependencies":{"jest":"^27.5.1","axios":"^0.26.0","husky":"^7.0.4","react":"^17.0.2","eslint":"^8.10.0","rimraf":"^3.0.2","rollup":"^2.68.0","prettier":"^2.5.1","copyfiles":"^2.4.1","react-dom":"^17.0.2","standard-version":"^9.3.2","axios-mock-adapter":"^1.20.0","rollup-plugin-copy":"^3.4.0","eslint-plugin-react":"^7.29.2","react-test-renderer":"^17.0.2","rollup-plugin-terser":"^7.0.2","eslint-config-prettier":"^8.4.0","eslint-plugin-prettier":"^4.0.0","@rollup/plugin-commonjs":"^21.0.3","@rollup/plugin-node-resolve":"^13.1.3","@testing-library/react-hooks":"^7.0.2","@babel/plugin-transform-modules-commonjs":"^7.16.8"},"peerDependencies":{"react":"^17.0.2"},"standard-version":{"scripts":{"prerelease":"yarn prerelease"}},"_npmOperationalInternal":{"tmp":"tmp/react-fetch_1.0.2_1650884396955_0.11161275730166698","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-04-10T15:50:22.666Z","modified":"2025-05-26T12:15:29.186Z","1.0.1":"2022-04-10T15:50:22.948Z","1.0.2":"2022-04-25T10:59:57.126Z"},"author":{"name":"Marcel Bos","email":"marcel@acato.nl"},"license":"ICS","homepage":"https://bitbucket.org/acato/react-fetch#readme","repository":{"url":"git+ssh://git@bitbucket.org/acato/react-fetch.git","type":"git"},"description":"custom fetch hooks","maintainers":[{"email":"beheer@acato.nl","name":"beheeracato"},{"email":"paul@acato.nl","name":"paulacato"}],"readme":"# react-fetch\n\nReact hooks based fetching with cache and abortcontroller support\n\n# Table of contents\n\n- [Features](#features)\n- [Installing](#installing)\n- [Example](#example)\n- [API](#api)\n\n# Features\n\n- Create custom fetch hooks from (axios) resources/services\n- Auto abort fetch requests\n- Memoize fetch responses\n\n# Installing\n\nUsing yarn:\n\n```js\nyarn add @acato/react-fetch\n```\n\nUsing npm:\n\n```js\nnpm i @acato/react-fetch\n```\n\n# Example\n\nFirst, create a (axios) resource:\n\n```js\nexport const myResource = createResource(...)\n```\n\n> `createResource` is a function from the **_@acato/axios_** module.\n\nThen, define your service, using the resource we have just created.\n\n```js\nexport const myService = {\n  getSomething: (signal) => myResource.get('api/something', { signal: signal() }),\n  postSomething: (data, signal) =>\n    mockResource.post('api/anything', { ...data }, { signal: signal() })\n}\n```\n\nThe `signal` argument is added by the **_createFetchHooks_** function. The custom\nhook, created with this function, will automagically abort any pending requests on\n'unmounting' or when a new request executes when the last one is still pending.\n\nNext, we'll create our custom hooks:\n\n```js\nconst handlers = {\n  response: (res) => res?.data,\n  error: (err) => {\n    return err.message\n  }\n}\nexport const myFetchHooks = createFetchHooks(\n  {\n    name: 'useGetSomethingWithCache',\n    fetcher: myService.getSomething,\n    memoize: true,\n    handlers\n  },\n  {\n    name: 'useGetSomethingWithTTLCache',\n    fetcher: myService.getSomething,\n    memoize: {\n      ttl: 10000\n    },\n    handlers\n  },\n  {\n    name: 'useGetSomethingWithTTLAndArgsCache',\n    fetcher: myService.getSomething,\n    memoize: {\n      ttl: 10000,\n      memoizeArgs: true\n    },\n    handlers\n  },\n  {\n    name: 'useGetSomething',\n    fetcher: myService.getSomething,\n    handlers\n  },\n  { fetcher: myService.postSomething, handlers }\n)\n```\n\nThe function `createFetchHooks` will create a custom hook for each hook-definition\nyou pass to this function. The only required property is `fetcher`, the actual fetch\nfunction. The `name` prop is not required, it will be derived from the function name.\n\nThe response and error handlers are just there to pre-populate responses and errors,\nso in the consuming component you dont have to grab the props you need (like:\nresponse?.data?.data). You could also trigger some custom logic in there as well,\nlike setting some global state, notifiers, etc.\n\n> `myFetchHooks` will have these properties:\n\n- _useGetSomethingWithCache_: after 1st fetch it will always be resolved from cache.\n- _useGetSomethingWithTTLCache_: will be resolved from cache only if ttl is valid.\n- _useGetSomethingWithTTLAndArgsCache_: will cache the response for each new args and\n  will be resolved from cache if the ttl is still valid.\n- _useGetSomething_: will always be fetched, no caching used.\n- _usePostSomething_: will never be cached.\n\nNow we are ready to go and use our new fetch hooks!\n\n```js\nconst myComponent = () => {\n  const [getSomething, loading, something, err] = useGetSomething()\n\n  useEffect(() => {\n    getSomething()\n  }, [getSomething])\n\n  // with arguments?\n  useEffect(() => {\n    getSomething(arg)\n  }, [getSomething, arg])\n}\n```\n\n# API\n\nFetch hooks can be made by passing relevant hook-configs to `createFetchHooks`.\n\n**createFetchHooks(...hookConfig)**\n\n## Hook config\n\n```js\n{\n name: 'useGetPosts', // name is not required, hook name can be derived from the `fetcher` property.\n fetcher: myService.getPosts, // Required. This is the fetch function used in the hook. It should return a `Promise`\n\n // memoize: boolean or object. Not required.\n memoize: true,\n memoize: {\n     ttl: 10000, // Time to live, max age of cached response\n     memoizeArgs: true, // If get requests require argument(s), each request will be cached with args as the cache key.\n },\n // handlers: Object, not required.\n // Handler functions can be used to make it easier to handle api responses in a generic way.\n handlers: {\n     response: res => res?.data,\n     error: err => err?.message\n }\n}\n```\n\n## Hook return value\n\nThe hook function, once invoked, will give you the following return value:\n\n```js\nconst [fetchFn, loadingState, data, err] = useGetSomething()\n\nfetchFn: The actual fetch function. Stable,\nloadingState: Indicates if the request is pending or finished,\ndata: Depending on using `handlers` or not, it will hold the fetch response,\nerr: Depending on using `handlers` or not, it will hold the error state,\n```\n","readmeFilename":"README.md"}