useResource$() - Explicit Reactivity

For this tutorial, we would like to fetch the list of repositories for a given GitHub organization. To aid you, we have added the getRepositories() function to the bottom of the file. Your task is to use the getRepositories() function to fetch the list of repositories whenever the user updates the org input.

Qwik provides useComputed$() to help you fetch and display data from the server. When fetching data the application can be in one of three states:

• pending: the data is being fetched from the server => Render loading... indicator.
• rejected: the data could not be fetched from the server due to an error => Render the error.
• resolved: the data has successfully been fetched from the server => Render the data.

Use useComputed$() function to set up how the data is fetched from the server.

Fetching data

Use useComputed$() to set up how the data is fetched from the server.

const reposResource = useComputed$<string[]>(({ abortSignal }) => {
  // We need a way to re-run fetching data whenever the `github.org` changes.
  // Reading githubOrg.value re-runs this function whenever it changes.
  const org = githubOrg.value;
 
  // The abortSignal is automatically (lazily) provided and will be aborted when this
  // function re-runs, allowing you to cancel pending operations.
  return getRepositories(org, abortSignal);
});

The useComputed$() function returns a ComputedSignal, which is reactive state that can be serialized by Qwik. Qwik automatically tracks every signal and store property the function reads before the first await, so it re-runs when they change; reads after an await must use the track() provided on the context argument. The abortSignal allows you to cancel pending operations when the function re-runs. Finally, the async function returns a promise that will resolve to the value.

Rendering data

The ComputedSignal provides the .pending and .error reactive properties to allow you to render different content depending if the resource is pending, resolved or rejected.

During SSR, the rendering will pause until the ComputedSignal has loaded so it will always render as either resolved or rejected.

{reposResource.pending ? <div>Loading...</div> : reposResource.error ? <div>Error: {reposResource.error}</div> : <div>{reposResource.value}</div>}

SSR vs Client

Notice that the same code can render on both server and client (with slightly different behavior, which skips the pending state rendering on the server.)