Skip to content

Commit

Permalink
docs: fix useResource example
Browse files Browse the repository at this point in the history
* Replace github API call with a free fake & reliable API
* Wrap API call in try/catch to prevent future error 500
  • Loading branch information
ianlet committed Oct 6, 2024
1 parent b219343 commit 987d6b9
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 53 deletions.
5 changes: 5 additions & 0 deletions .changeset/friendly-flowers-run.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@builder.io/qwik': patch
---

docs: fix useResource docs example & remove unused demo
34 changes: 22 additions & 12 deletions packages/docs/src/routes/demo/state/resource/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
/>
Expand Down
33 changes: 0 additions & 33 deletions packages/docs/src/routes/demo/tasks/resource/index.tsx

This file was deleted.

18 changes: 10 additions & 8 deletions packages/docs/src/routes/docs/(qwik)/components/state/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ contributors:
- Balastrong
- Jemsco
- shairez
- ianlet
updated_at: '2023-10-04T21:48:45Z'
created_at: '2023-03-20T23:45:13Z'
---
Expand Down Expand Up @@ -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>}
/>
Expand Down

0 comments on commit 987d6b9

Please sign in to comment.