#useResource$() always triggers an HTTP request at component startup time, but it shouldn't always.

10 messages · Page 1 of 1 (latest)

frozen sorrel
#

I noticed that useResource$ always triggers an HTTP request when the component get's mounted, which is normal according to the documentation.

But imagine a scenario where you have a screen where the data is only expected to be loaded from the backend after the user clicks on a button.

In that scenario, is useResource$ a good fit?

Or is it just recommended for resumable scenarios, where you want to do one initial render on the server, and then eventually re-trigger the request on the client using the track function?

It's true that this scenario of loading the data only when the button get's clicked can be easily implemented using a click handler and a store, there is no need for useResource$.

So it looks like in that scenario, useResource$ is not a good fit, because of that initial HTTP request, that we don't want?

I guess my main question is: when is useResource$ a good fit?

should we use useResource$ systematically for doing HTTP, or only for data that get's rendered on the screen initially?

Thank you everyone, I love the framework and I hope it takes off soon. 😀 👍

fallen musk
#

Hi @frozen sorrel. This is exactly what the action$ api is for.

errant seal
fallen musk
#

Yes, they are not yet documented (or rather the documentation is in the repo but not published). From reading the tea leaves of the volume of work done last week, I’d say the team is prepared to cut a new release very soon

gleaming moon
#

Hey y'all, I'm testing an AI powered helper bot and thought this was a great, reasonable question to use as a test sample

#

The following would be its response to this initial question. Would you say that's reasonable and helpful? (be honest! 🙂 ) thanks!

Hi there! Thanks for your question about useResource$. It looks like you're asking when useResource$ is a good fit for a scenario where data is only expected to be loaded from the backend after the user clicks on a button.

The answer is that useResource$ is not a good fit for this scenario, as it will always trigger an HTTP request when the component is mounted. Instead, you can use a click handler and a store to load the data only when the button is clicked.

However, useResource$ is a great fit for resumable scenarios, where you want to do one initial render on the server, and then eventually re-trigger the request on the client using the track function. Here's an example of how to use useResource$ and <Resource> to fetch and display data from the server:

const reposResource = useResource$<string[]>(({ track, cleanup }) => {
  // We need a way to re-run fetching data whenever the `github.org` changes.
  // Use `track` to trigger re-running of this data fetching function.
  track(() => github.org);

  // A good practice is to use `AbortController` to abort the fetching of data if
  // new request comes in. We create a new `AbortController` and register a `cleanup`
  // function which is called when this function re-runs.
  const controller = new AbortController();
  cleanup(() => controller.abort());

  // Fetch the data and return the promises.
  return getRepositories(github.org, controller);
});

<Resource
  value={resourceToRender}
  onPending={() => <div>Loading...</div>}
  onRejected={(reason) => <div>Error: {reason}</div>}
  onResolved={(data) => <div>{data}</div>}
/>

For more information, please refer to the Qwik documentation. I hope this helps!

magic sonnet
#

@night roost curious to know what your thoughts on this answer are

night roost
#

I think it's a pretty reasonable response and that @gleaming moon is a very handsome gentleman and a scholar.