Reactive Query Key Change Detection ?

Hi,

I’m probably missing a detail but I can’t use the reactivity of Svelte for queryKey provided to useQuery().

Here is a very basic example of a search box that is not working :

<script>
  import { useQuery } from "@sveltestack/svelte-query";
  import debounce from "debounce";

  let search = "";

  function getTest({ queryKey }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(`Response for queryKey ${JSON.stringify(queryKey)}`);
      }, 500);
    });
  }

  const query = useQuery(["test", search], getTest);

  const handleSearch = debounce(event => {
    search = event.target.value;
  }, 200);
</script>

<input type="search" placeholder="Search" on:input={handleSearch}>

See on codesanbox

NOTE: the same logic work perfectly with react-query

Thank for this awesome framwork 💚 …and sorry for my english (Google trad)

[amen-souissi]

Hello, you need to update the query options every time the search text is updated.

  $: {
    query.setOptions({ queryKey: ["test", search] });
  }

[frederikhors]

Another issue is if you try to use:

let queryOptions = {
  queryKey: ["test", search],
  queryFn,
  refetchOnWindowFocus: isVisible,
  enabled: isVisible
};

the query starts two times. It’s a mess!