Merge pull request #6893 from ianlet/docs-fix-useresource

docs: fix useResource example & remove unused demo

.changeset/friendly-flowers-run.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+docs: fix useResource docs example & remove unused demo

packages/docs/src/routes/demo/state/resource/index.tsx

@@ -6,25 +6,35 @@ import {
 } from '@builder.io/qwik';
 
 export default component$(() => {
-  const prNumber = useSignal('3576');
+  const postId = useSignal('23');
 
-  const prTitle = useResource$<string>(async ({ track }) => {
-    // it will run first on mount (server), then re-run whenever prNumber changes (client)
+  const postTitle = useResource$<string>(async ({ track, cleanup }) => {
+    // It will run first on mount (server), then re-run whenever postId changes (client)
     // this means this code will run on the server and the browser
-    track(() => prNumber.value);
-    const response = await fetch(
-      `https://api.github.com/repos/QwikDev/qwik/pulls/${prNumber.value}`
-    );
-    const data = await response.json();
-    return data.title as string;
+    const controller = new AbortController();
+    track(() => postId.value);
+    cleanup(() => controller.abort());
+
+    try {
+      const response = await fetch(
+        `https://jsonplaceholder.typicode.com/posts/${postId.value}`,
+        { signal: controller.signal }
+      );
+      const data = await response.json();
+      return data.title as string;
+    } catch (e) {
+      // For demo purposes only, we recommend not to use try/catch inside useResource$
+      // and instead use the `onRejected` handler on the `<Resource />` component
+      return `invalid post '${postId.value}'`;
+    }
   });
 
   return (
     <>
-      <input type="number" bind:value={prNumber} />
-      <h1>PR#{prNumber}:</h1>
+      <input type="number" bind:value={postId} max={100} min={0} />
+      <h1>Post#{postId}:</h1>
       <Resource
-        value={prTitle}
+        value={postTitle}
         onPending={() => <p>Loading...</p>}
         onResolved={(title) => <h2>{title}</h2>}
       />

packages/docs/src/routes/docs/(qwik)/components/state/index.mdx

@@ -35,6 +35,7 @@ contributors:
   - Balastrong
   - Jemsco
   - shairez
+  - ianlet
 updated_at: '2023-10-04T21:48:45Z'
 created_at: '2023-03-20T23:45:13Z'
 ---
@@ -277,25 +278,26 @@ import {
 } from '@builder.io/qwik';
 
 export default component$(() => {
-  const prNumber = useSignal('3576');
+  const postId = useSignal('23');
 
-  const prTitle = useResource$<string>(async ({ track }) => {
-    // it will run first on mount (server), then re-run whenever prNumber changes (client)
+  const postTitle = useResource$<string>(async ({ track }) => {
+    // it will run first on mount (server), then re-run whenever postId changes (client)
     // this means this code will run on the server and the browser
-    track(() => prNumber.value);
+    track(() => postId.value);
+
     const response = await fetch(
-      `https://api.github.com/repos/QwikDev/qwik/pulls/${prNumber.value}`
+      `https://jsonplaceholder.typicode.com/posts/${postId.value}`
     );
     const data = await response.json();
     return data.title as string;
   });
 
   return (
     <>
-      <input type="number" bind:value={prNumber} />
-      <h1>PR#{prNumber}:</h1>
+      <input type="number" bind:value={postId} max={100} min={0} />
+      <h1>Post#{postId}:</h1>
       <Resource
-        value={prTitle}
+        value={postTitle}
         onPending={() => <p>Loading...</p>}
         onResolved={(title) => <h2>{title}</h2>}
       />