Dependent fetching just doesn't work?

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”…

<script>
  import { useSWR } from "sswr";

  const { data: post } = useSWR("https://jsonplaceholder.typicode.com/posts/1");
  // 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(
    () => `https://jsonplaceholder.typicode.com/users/${$post.userId}`
  ));
</script>

{#if $post}
  <div>{$post.title}</div>
{/if}
{#if $user}
  <div>{$user.name}</div>
{/if}

Only the $post store ever gets populated - and what’s more, the https://jsonplaceholder.typicode.com/users/${$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!

[ekzhang]

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.

[smblee]

@ConsoleTVs are you referring to https://github.com/StudioLambda/TurboQuery?