better typings for run, add example

Author: phryneas

examples/with-typescript/src/App.tsx

@@ -2,6 +2,7 @@ import React, { Component } from "react"
 import Async, { createInstance } from "react-async"
 import DevTools from "react-async-devtools"
 import "./App.css"
+import { FetchHookExample } from "./FetchHookExample";
 
 const promiseFn = () => Promise.resolve("baz")
 const CustomAsync = createInstance({ promiseFn })
@@ -19,6 +20,7 @@ class App extends Component {
           <CustomAsync>
             <CustomAsync.Resolved>{data => <>{data}</>}</CustomAsync.Resolved>
           </CustomAsync>
+          <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

@@ -6,7 +6,7 @@ export type DeferFn<T> = (args: any[], props: object, controller: AbortControlle
 
 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" }
@@ -114,7 +114,7 @@ export type AsyncRejected<T> = AbstractState<T> & {
 }
 export type AsyncState<T> = AsyncInitial<T> | AsyncPending<T> | AsyncFulfilled<T> | AsyncRejected<T>
 
-export class Async<T> extends Component<AsyncProps<T>, AsyncState<T>> {}
+export class Async<T> extends Component<AsyncProps<T>, AsyncState<T>> { }
 
 export namespace Async {
   export function Initial<T>(props: { children?: AsyncChildren<T>; persist?: boolean }): JSX.Element
@@ -161,6 +161,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