Multiple SWRs in one component keep resetting each other

[marekdedic]

Hi, I have a component with the following setup:

<script lang="ts" strictEvents>
  import { useSWR } from "sswr";

  const { data: rawCompetences } = useSWR("example.com/competence");
  const { data: rawLessons } = useSWR("example.com/lesson");
  const { data: rawFields } = useSWR("example.com/field");

  rawCompetences.subscribe(value => {
    console.log("COMPETENCES");
    console.log(value);
  });
  rawLessons.subscribe(value => {
    console.log("LESSONS");
    console.log(value);
  });
  rawFields.subscribe(value => {
    console.log("FIELDS");
    console.log(value);
  });
  $: console.log("CONDITION") ||
    console.log(
      !(
        $rawCompetences === undefined ||
        $rawLessons === undefined ||
        $rawFields === undefined
      )
    );
</script>

And I see in the console that basically, the first SWR gets loaded, on completion, it marks the component as dirty, which resets the other 2 SWRs to undefined. Then the second SWR loads and does the same to the third. Only once the third gets loaded that the "CONDITION" resolves to true (it briefly resolves to true each time one of the SWR resolves but then that immediately resets the whole component...)

Mind you, all 3 of the SWRs were loaded before, so I would expect the component to be ready (all three != undefined) immediately with the stale values and update later. Instead, the component is ready only once all 3 SWRs revalidate.

Am I doing something wrong? I looked at revalidateOnStart, but i do want to revalidate, I just want it to also use the stale value while doing that....