I'm confused regarding combining external parameters and defineQuery

[marpe]

In the last few examples here you're neither specifying a key nor calling useQuery. Isn't both required? Is the returned search key used implicitly?

Going off of the earlier examples this is what I came up with:

export const useDeck = defineQuery(() => {
  const deckId = Number(useRoute("decks-deckId").params.deckId);
  const result = useQuery({
    key: () => ["decks", { deckId }],
    query: () => useRequestFetch()(`/api/decks?deckId=${deckId}`).then(decks => {
      return decks.find(d => d.id === deckId);
    }) as Promise<(Deck & { cardCount: number }) | undefined>,
  });
  return {
    ...result,
    deckId,
  }
});

But I'm not getting it to retrigger as the deckId parameter changes... if i e.g go /decks/1, then /decks/2, I'm getting the first set of values back it seems :'( Tried putting the value in useState() too as suggested for search params in the docs, but no luck. New to vue so I might be doing something else strange. Figured it could have been KeepAlive or I'm missing a .value somewhere

---

Edit:

Ok so switching to @vueuse/routers useRouteParams() seem to have done the trick. It's just that I'm not sure why. Is this "reactive" hook being picked up as a dependency so vue knows to rerun the callback kinda like a watchEffect or what's going on?

export const useDeck = defineQuery(() => {
  const deckId = useRouteParams("deckId", '-1', { transform: Number });
  const result = useQuery({
    key: () => ["decks", { deckId: deckId.value }],
    query: () => useRequestFetch()(`/api/decks?deckId=${deckId.value}`).then(decks => {
      return decks.find(d => d.id === deckId.value);
    }) as Promise<(Deck & { cardCount: number }) | undefined>,
  });
  return {
    ...result,
    deckId,
  }
});

[posva]

You don't need useRouteParams() but you need to adapt key so that deckId is a reactive value instead of a plain one. In the first example you need to pass route.params.deckId. route is reactive but deckId is just a string primitive once read

export const useDeck = defineQuery(() => {
  const deckId = useRoute("decks-deckId");
  const result = useQuery({
    key: () => ["decks", { deckId: Number(route.params.deckId) }],
    query: () => useRequestFetch()(`/api/decks?deckId=${deckId}`).then(decks => {
      return decks.find(d => d.id === deckId);
    }) as Promise<(Deck & { cardCount: number }) | undefined>,
  });
  return {
    ...result,
    deckId,
  }
});

You can find more about the reactive limitation in Vue docs: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive

[posva]

Oh, also the docs you mentioned seem to be using an outdated version of the API (returning the object passed to useQuery()). Using useQuery() directly within defineQuery() like you do is the correct approach

[marpe]

Thanks!

[marpe]

Actually I spoke too soon, can't get it to work even with these changes:

export const useDeck = defineQuery(() => {
  const route = useRoute("deck-deckId");
  // const deckId = computed(() => Number(route.params.deckId));

  const result = useQuery({
    key: () => ["decks", { deckId: Number(route.params.deckId) }],
    query: () => useRequestFetch()(`/api/decks`).then(decks => {
      return decks.find(d => d.id === Number(route.params.deckId));
    }) as Promise<(Deck & { cardCount: number }) | undefined>,
  });

  return {
    ...result
  }
});

Initial load works, but navigating back and forth doesn't trigger another fetch. Tried using computed as I've commented out, didn't work either.

Edit: I'll see if i can setup a minimum repro in a bit

Edit: Repro here

Sorry but I forgot to mention earlier that I'm using compatibilityVersion: 4