Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dependent fetching just doesn't work?

See original GitHub issue

If I clone the default Svelte template via npx degit sveltejs/template my-svelte-project, then yarn add sswr, and copy&paste the dependent fetching example from the README into “App.svelte”…

  import { useSWR } from "sswr";

  const { data: post } = useSWR("");
  // We need to pass a function as the key. Function will throw an error when post is undefined
  // but we catch that and wait till it re-validates into a valid key to populate the user variable.
  $: ({ data: user } = useSWR(
    () => `${$post.userId}`

{#if $post}
{#if $user}

Only the $post store ever gets populated - and what’s more, the${$post.userId} URL never seems to get fetched.


I was, actually tracking down a bug I thought was on my side - I’m changing the key based on a reactive variable (which in turn is set based on a useSWR fetch) and not a SWR-returned store directly (as in the example). So, I thought that the fact the second fetch never happens is a consequence of the way the reactivity is set up (since useSWR() uses onMounted(), I presume a useSWR() call which happens later (i.e. when my reactive variable is updated) doesn’t get hooked properly) - but now I’m not so sure. This may be a separate issue entirely, in which case I will delete this portion of the issue.

Thanks in advance!

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

ekzhangcommented, Mar 14, 2022

Unfortunately I don’t have a replication at the moment, but the error might have to do with the fact that onMount is called in the constructor? If useSWR is reactively called behind a $: in the dependent fetching scenario, then it would be rerun later in the component lifecycle after the mount has already happened.

smbleecommented, Jun 22, 2022
Read more comments on GitHub >

github_iconTop Results From Across the Web

Trouble fetching multiple data which one is dependent to ...
I have two async function for fetching data. As you can see, second fetchURL is depending on first function's state. Since second one...
Read more >
Alternative way to do dependent fetching besides throwing ...
My solution was to make another user variable that is null if the is null. Since mUser is now undefined, will...
Read more >
Dependent and Conditional Data Fetching With useSWR
Dependent fetching happens when you have a fetch request that relies on the fetching of other data before it can begin. SWR takes...
Read more >
Conditional Fetching
Use null or pass a function as key to conditionally fetch data. If the function throws or returns a falsy value, SWR will...
Read more >
How to fetch data in React with performance in mind
It doesn't depend on anything of React in this case - no props, state or internal variables dependencies. So what will happen if...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found