Update browser example

axelrindle · Jul 4, 2023 · 0a315aa · 0a315aa
1 parent 559ba1d
commit 0a315aa
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/docs/docs/examples/03-browser/index.md b/docs/docs/examples/03-browser/index.md
@@ -13,8 +13,9 @@ import { useState } from 'react'
 import { useQuery } from 'react-query'
 
 export default function App() {
-    const { data } = useQuery<CheckResult['update'], any, CheckResult['update'], any>({
+    const { data, refetch } = useQuery<CheckResult['update'], any, CheckResult['update'], any>({
         queryKey: ['updater'],
+        enabled: false,
         queryFn: async () => {
             const { update } = await versionCheck({
                 owner: 'axelrindle',
@@ -27,20 +28,38 @@ export default function App() {
     })
 
     return (
-        <p>
-            {data === undefined ?
-                (
-                    <p>
-                        No update found.
-                    </p>
-                ) :
-                (
-                    <p>
-                        <b>{data?.name}</b>
-                    </p>
-                )
-            }
-        </p>
+        <>
+            <button onClick={() => refetch()}>
+                Check
+            </button>
+            <p>
+                {isIdle ? (
+                    <span>Hit <b>Reload</b> to check for updates.</span>
+                ) : isLoading ? (
+                    <span>Loading...</span>
+                ) : isError ? (
+                    <span>Error: {error.message}</span>
+                ) : (
+                    <>
+                        <div>
+                            {data === undefined ?
+                                (
+                                    <p>
+                                        No update found.
+                                    </p>
+                                ) :
+                                (
+                                    <p>
+                                        <b>{data?.name}</b>
+                                    </p>
+                                )
+                            }
+                        </div>
+                        <div>{isFetching ? 'Fetching...' : null}</div>
+                    </>
+                )}
+            </p>
+        </>
     )
 }
 ```
diff --git a/packages/example-browser/src/App.tsx b/packages/example-browser/src/App.tsx
@@ -19,6 +19,7 @@ function App() {
         refetch
     } = useQuery<CheckResult['update'], any, CheckResult['update'], any>({
         queryKey: ['updater'],
+        enabled: false,
         queryFn: async () => {
             const { update } = await versionCheck({
                 owner: 'axelrindle',
@@ -61,7 +62,7 @@ function App() {
 
             <div className="card">
                 {isIdle ? (
-                    'Not ready...'
+                    <span>Hit <b>Reload</b> to check for updates.</span>
                 ) : isLoading ? (
                     <span>Loading...</span>
                 ) : isError ? (