axios-hooks - npm Package Compare versions

Comparing version 1.0.2-alpha.1 to 1.1.0

CHANGELOG.md

@@ -5,2 +5,15 @@ # Changelog
 
+## [1.1.0](https://github.com/simoneb/axios-hooks/compare/v1.0.2-alpha.1...v1.1.0) (2019-05-25)
+
+
+### Features
+
+* Add manual option to skip automatic execution ([a98fba2](https://github.com/simoneb/axios-hooks/commit/a98fba2)), closes [#6](https://github.com/simoneb/axios-hooks/issues/6)
+
+
+
+## [1.1.0](https://github.com/simoneb/axios-hooks/compare/v1.0.2-alpha.1...v1.1.0) (2019-05-25)
+
+
+
 ### [1.0.2-alpha.1](https://github.com/simoneb/axios-hooks/compare/v1.0.2-alpha.0...v1.0.2-alpha.1) (2019-05-25)
@@ -7,0 +20,0 @@

package.json

 {
   "name": "axios-hooks",
-  "version": "1.0.2-alpha.1",
+  "version": "1.1.0",
   "description": "axios-hooks",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -66,11 +66,13 @@ # axios-hooks
 
-### useAxios(url|config)
+### useAxios(url|config, options)
 
-The main React hook to execute HTTP requests. It accepts the same arguments as `axios`.
+The main React hook to execute HTTP requests.
 
-- `url|config` The request URL or [config](https://github.com/axios/axios#request-config) object
+- `url|config` The request URL or [config](https://github.com/axios/axios#request-config) object, the same argument accepted by `axios`
+- `options` a configuration object containing these keys:
+  - `manual` False by default. If true, the request is not executed immediately. Useful for non-GET requests that should not be executed when the component renders. Use the `execute` function returned when invoking the hooks to execute the request manually, optionally providing additional arguments to `axios`.
 
 Returns:
 
-`[{ data, loading, error, response }, refetch]`
+`[{ data, loading, error, response }, execute]`
 
@@ -82,3 +84,3 @@ - `data` The [success response](https://github.com/axios/axios#response-schema) data property (for convenient access)
 
-- `refetch` Function to reload the data
+- `execute([config])` Function to execute the request manually, bypassing the cache. It optionally accepts the same `config` object as `axios`, which is _shallow-merged_ with the config object provided when invoking the hook. Useful to provide arguments to non-GET requests.
 
@@ -106,2 +108,54 @@ ### configure({ cache, axios })
 
+## Manual requests
+
+On the client, requests are executed when the component renders using a React `useEffect` hook.
+
+This may be undesirable, as in the case of non-GET requests. By using the `manual` option you can skip the automatic execution of requests and use the return value of the hook to execute them manually, optionally providing configuration overrides to `axios`.
+
+### Example
+
+In the example below we use the `useAxios` hook twice. Once to load the data when the component renders, and once to submit data updates via a `PUT` request configured via the `manual` option.
+
+[![Edit axios-hooks Manual Request](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/axioshooks-manual-request-bq9w4?fontsize=14)
+
+```js
+import useAxios from 'axios-hooks'
+
+function App() {
+  const [{ data: getData, loading: getLoading, error: getError }] = useAxios(
+    'https://api.myjson.com/bins/820fc'
+  )
+
+  const [
+    { data: putData, loading: putLoading, error: putError },
+    executePut
+  ] = useAxios(
+    {
+      url: 'https://api.myjson.com/bins/820fc',
+      method: 'PUT'
+    },
+    { manual: true }
+  )
+
+  function updateData() {
+    executePut({
+      data: {
+        ...getData,
+        updatedAt: new Date().toISOString()
+      }
+    })
+  }
+
+  if (getLoading || putLoading) return <p>Loading...</p>
+  if (getError || putError) return <p>Error!</p>
+
+  return (
+    <div>
+      <button onClick={updateData}>update data</button>
+      <pre>{JSON.stringify(putData || getData, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
 ## Configuration
@@ -108,0 +162,0 @@

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26788

increased by10.49%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

263

increased by25.84%

No dependency changes