useFetch: allow passing an object to run to be spread over init

Author: phryneas

README.md

@@ -243,9 +243,19 @@ const MyComponent = () => {
   function clickHandler() {
     run(init => ({
       ...init, 
-      body: JSON.stringify(formValues)
+      headers: {
+        ...init.headers,
+        authentication: "..."
+      }
     }))
   }
+
+  // alternatively, you can also just use an object that will be spread over `init`.
+  // please note that this is not deep-merged, so you might override properties present in the 
+  // original `init` parameter
+  function clickHandler2() {
+    run({ body: JSON.stringify(formValues) })
+  }
 }
 ```
 

packages/react-async/src/useAsync.js

@@ -143,7 +143,17 @@ const useAsyncFetch = (input, init, { defer, json, ...options } = {}) => {
     [fn]: useCallback(
       isDefer
         ? ([override], _, { signal }) =>
-            doFetch(input, { signal, ...(typeof override === "function" ? override(init) : init) })
+            doFetch(input, {
+              signal,
+              ...// override is a function, call it with init
+              (typeof override === "function"
+                ? override(init)
+                : // override is an Event or SyntheticEvent - do not spread
+                "preventDefault" in override
+                ? init
+                : // otherwise, spread override over init
+                  { ...init, ...override }),
+            })
         : (_, { signal }) => doFetch(input, { signal, ...init }),
       [isDefer, JSON.stringify(input), JSON.stringify(init)]
     ),

packages/react-async/src/useAsync.spec.js

@@ -162,7 +162,7 @@ describe("useFetch", () => {
     expect(json).toHaveBeenCalled()
   })
 
-  test("calling `run` with an argument allows to override `init` parameters", () => {
+  test("calling `run` with a method argument allows to override `init` parameters", () => {
     const component = (
       <Fetch input="/test" init={{ method: "POST" }}>
         {({ run }) => (
@@ -178,4 +178,35 @@ describe("useFetch", () => {
       expect.objectContaining({ method: "POST", signal: abortCtrl.signal, body: '{"name":"test"}' })
     )
   })
+
+  test("calling `run` with an object as argument allows to override `init` parameters", () => {
+    const component = (
+      <Fetch input="/test" init={{ method: "POST" }}>
+        {({ run }) => <button onClick={() => run({ body: '{"name":"test"}' })}>run</button>}
+      </Fetch>
+    )
+    const { getByText } = render(component)
+    expect(globalScope.fetch).not.toHaveBeenCalled()
+    fireEvent.click(getByText("run"))
+    expect(globalScope.fetch).toHaveBeenCalledWith(
+      "/test",
+      expect.objectContaining({ method: "POST", signal: abortCtrl.signal, body: '{"name":"test"}' })
+    )
+  })
+
+  test("passing `run` directly as a click handler will not spread the event over init", () => {
+    const component = (
+      <Fetch input="/test" init={{ method: "POST" }}>
+        {({ run }) => <button onClick={run}>run</button>}
+      </Fetch>
+    )
+    const { getByText } = render(component)
+    expect(globalScope.fetch).not.toHaveBeenCalled()
+    fireEvent.click(getByText("run"))
+    expect(globalScope.fetch).toHaveBeenCalledWith("/test", expect.any(Object))
+    expect(globalScope.fetch).not.toHaveBeenCalledWith(
+      "/test",
+      expect.objectContaining({ preventDefault: expect.any(Function) })
+    )
+  })
 })