better typings for run, add example

Author: phryneas

examples/with-typescript/src/App.tsx

@@ -9,6 +9,7 @@ import Async, {
 } from "react-async"
 import DevTools from "react-async-devtools"
 import "./App.css"
+import { FetchHookExample } from "./FetchHookExample";
 
 const loadFirstName: PromiseFn<string> = ({ userId }) =>
   fetch(`https://reqres.in/api/users/${userId}`)
@@ -50,6 +51,7 @@ class App extends Component {
             <CustomAsync.Resolved>{data => <>{data}</>}</CustomAsync.Resolved>
           </CustomAsync>
           <UseAsync />
+          <FetchHookExample />
         </header>
       </div>
     )

examples/with-typescript/src/FetchHookExample.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useFetch } from 'react-async/src';
+
+export function FetchHookExample() {
+  const result = useFetch<{ token: string }>('https://reqres.in/api/login', { method: 'POST' });
+  const { run } = result;
+
+  return (<>
+    <button onClick={run}>just run it without login data</button>
+    <button onClick={() => run(init => ({
+      ...init, body: JSON.stringify({
+        "email": "[email protected]",
+        "password": "cityslicka"
+      })
+    }))}>run it with valid login data (init callback)</button>
+
+    <button onClick={() => run(({
+      body: JSON.stringify({
+        "email": "[email protected]",
+        "password": "cityslicka"
+      })
+    }))}>run it with valid login data (init object)</button>
+    <br />
+    Status:<br />
+    {result.isInitial && "initial"}
+    {result.isLoading && "loading"}
+    {result.isResolved && result.data.token}
+  </>)
+}

packages/react-async/src/index.d.ts

@@ -22,7 +22,7 @@ export type DeferFn<T> = (
 
 interface AbstractAction {
   type: string
-  meta: { counter: number; [meta: string]: any }
+  meta: { counter: number;[meta: string]: any }
 }
 export type Start = AbstractAction & { type: "start"; payload: () => Promise<void> }
 export type Cancel = AbstractAction & { type: "cancel" }
@@ -130,7 +130,7 @@ export type AsyncRejected<T> = AbstractState<T> & {
 }
 export type AsyncState<T> = AsyncInitial<T> | AsyncPending<T> | AsyncFulfilled<T> | AsyncRejected<T>
 
-export class Async<T> extends React.Component<AsyncProps<T>, AsyncState<T>> {}
+export class Async<T> extends React.Component<AsyncProps<T>, AsyncState<T>> { }
 
 export namespace Async {
   export function Initial<T>(props: {
@@ -225,6 +225,17 @@ export function useFetch<T>(
   input: RequestInfo,
   init?: RequestInit,
   options?: FetchOptions<T>
-): AsyncState<T>
+): AsyncInitialWithout<'run', T> & FetchRun<T>;
+
+// unfortunately, we cannot just omit K from AsyncInitial as that would unbox the Discriminated Union
+type AsyncInitialWithout<K extends keyof AsyncInitial<T>, T> = (Omit<AsyncInitial<T>, K> | Omit<AsyncPending<T>, K> | Omit<AsyncFulfilled<T>, K> | Omit<AsyncRejected<T>, K>);
+
+type FetchRun<T> = {
+  run(overrideInit: Partial<RequestInit>): Promise<T>
+  run(overrideInit: (init: RequestInit) => RequestInit): Promise<T>
+  run(ignoredEvent: React.SyntheticEvent): Promise<T>;
+  run(ignoredEvent: Event): Promise<T>;
+  run(): Promise<T>;
+};
 
 export default Async