[svelte] Do queries not get executed unless the store's values are used?

[aryzing]

The following is a relatively simple case of dependent queries. The idea is that after the first one completes, the second one should run and update the outerValue variable,

<script lang="ts">
  import { createQuery } from "@tanstack/svelte-query";

  export let prop: string = "prop";

  let outerValue: string;

  $: query1 = createQuery<string>({
    queryKey: ["test1", prop],
    queryFn: () =>
      new Promise((resolve) => {
        setTimeout(() => {
          console.log("Resolving 1");
          resolve("foo1");
        }, 1000);
      }),
  });

  $: {
    // Note 1: This code block runs when `query1` is updated.

    let enabled = Boolean($query1.data);

    console.log(enabled); // => true
    console.log($query1.data); // => "foo1"

    createQuery<string>({
      queryKey: ["test2", $query1.data],
      queryFn: () =>
        // Note 2: this queryFn never runs
        new Promise((resolve) => {
          setTimeout(() => {
            console.log("Resolving 2");
            resolve("foo2");
          }, 1000);
        }),
      enabled,
      onSuccess: (data) => {
        // Note 3: this code never runs.
        outerValue = data;
      },
    });
  }
</script>

<h1>Dependent queries</h1>

<h3>Query1</h3>
<pre><code>{JSON.stringify($query1.data)}</code></pre>

<h3>Query2</h3>
<pre><code>{JSON.stringify(outerValue)}</code></pre>

However, the second query is not running. The second createQuery is clearly being called, but the queryFn is not being run, and therefore neither is onSuccess.

However, modifying the second query slightly, it seems to only run if the store is used,

<script lang="ts">
  import { createQuery } from "@tanstack/svelte-query";

  export let prop: string = "prop";

  $: query1 = createQuery<string>({
    queryKey: ["test1", prop],
    queryFn: () =>
      new Promise((resolve) => {
        setTimeout(() => {
          console.log("Resolving 1");
          resolve("foo1");
        }, 1000);
      }),
  });

  $: query2 = createQuery<string>({
    queryKey: ["test2", $query1.data],
    queryFn: () =>
      new Promise((resolve) => {
        setTimeout(() => {
          console.log("Resolving 2");
          resolve("foo2");
        }, 1000);
      }),
    enabled: Boolean($query1.data),
  });
</script>

<h1>Dependent queries</h1>

<h3>Query1</h3>
<pre><code>{JSON.stringify($query1.data)}</code></pre>

<h3>Query2</h3>
<pre><code>{JSON.stringify($query2.data)}</code></pre>

So, the two questions that arise from these examples are,

1. How can createQuery be called and be enabled, yet not run queryFn?
2. Is using the returned store a prerequisite to having the query execute?**