Reactive Query Key Change Detection ?

[peufo]

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] });
  }

[peufo]

Thank for the answer.

But I find that I also need to pass queryFn for this to work.
In anticipation of more complex options (for InfinitQuery for example).
I am obliged to manage in this way:

  let queryOptions = { queryKey: ["test", search], queryFn: getTest };

  const query = useQuery(queryOptions);

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

    // Don't work:
    // query.setOptions({queryKey: ["test", search] });

    // Don't work:
    // query.updateOptions({ queryKey: ["test", search] });
  }

test on codesanbox

If "updateOptions" worked or if a "setQueryKey" method existed it would be easier to use.

Leaving aside the technical difficulties, the way forward would be.

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

That said, I already save a lot of time and structural complexity with svelte-query.

Thanks again

[peufo]

I believe I will use the Query component. 😀

[frederikhors]

Leaving aside the technical difficulties, the way forward would be.

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

Aren't you re-creating again and again that query this way, @PeufOne?

[peufo]

Hi @frederikhors,

Yes, but if the cache and performance are preserved, why not? ...

Isn't that what happened with react-query?

I carried out the same small example to make a comparison:

• Demo in Svelte
• Demo in React

I know Svelte doesn't work like React at all.
But I don't understand that we can't expect the same level of ease of use ...

One-line query handling is great on React.
While on Svelte, using setOptions is inconvenient and updateOptions unfortunately does not refresh the request.

Thank you for your attention.

[frederikhors]

But I don't understand that we can't expect the same level of ease of use...
One-line query handling is great on React.

I know, is very good.

While on Svelte, using setOptions is inconvenient and updateOptions unfortunately does not refresh the request.

I think this is a bug, but we should wait for an @amen-souissi answer.

[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!