Provide examples for useQuery with reactive values

After lots of debugging headaches https://github.com/SvelteStack/svelte-query/discussions/87 we discovered that we weren’t using useQuery correctly when passing in reactive values.

We searched all sorts of different keywords online, and the only reference I could find to reactive values in queries was this one issue https://github.com/SvelteStack/svelte-query/issues/43

Could you please add examples for the docs using dependent queries with reactive values?

[pzcfg]

Part of it is documentation/examples. We couldn’t find any of either for updating queries with new values. Attempting to follow the react-query paradigms lead us to trying to write reactive queries like $: query = useMyQuery(changingValue), which sort of worked but ended up causing a lot of other issues. We only stumbled up on setOptions / updateOptions after some lucky search terms lead us to #43.

Additionally we were having a lot of issues that seem to stem from #89/#91, but it doesn’t seem like anyone is looking at issues/PRs?

In general though, the svelte-query way of doing things involves us duplicating a lot of configuration at both the useQuery and setOptions/updateOptions case. We created a bunch of query functions that hide away the implementation details of the query building, e.g.

const queryKeys = {
  floor: (site, building, floor) => ['floor', {site, building, floor}]
}

const fetchFloor = ([, {site, building, floor}]) => fetch(`/api/${site}/${building}/${floor}`)

export const useRoomQuery = (site, building, floor, room) => useQuery(
  queryKeys.floor(site, building, floor),
  {
    queryFn: fetchFloor
    select: (data) => {
      return data.filter(item => item.room_number === room)
    }
  }
)

In an ideal world, we’d just have something like $: query = useRoomQuery(site, building, floor, room) and it’d just fetch/select/etc. as needed when the variables change. This even sort of works, but it sounds like it’s not supposed to be used this way? https://github.com/SvelteStack/svelte-query/issues/43#issuecomment-894770920

Instead, we need to duplicate the query key logic and select function in .updateOptions(), like:

const query = useRoomQuery(site, building, floor, room)

$: query.updateOptions({

  // now the query key implementation details need to be pulled into the application/component layer
  queryKey: queryKeys.floor(site, building, floor),

  // now the select function needs to be defined both in useQuery and any callsite it's used at
  select: (data) => {
    return data.filter(item => item.room_number === room)
  }

})

[pzcfg]

https://svelte.dev/repl/9fe7b9ef36f846ee8a807ad2b0d32c43?version=3.48.0

I’m pretty sure you’re using this incorrectly and your fetch is only happening because refetchOnWindowFocus defaults to true.

You change your queryParams.page, but const queryResult = useQuery() is not reactive so it only runs when the component is initialized and isn’t going to be re-run when parameters change. It seems the only reason yours is working is because fetchPassengers accesses queryParams.page directly and doesn’t parse it from the query parameters given to useQuery().