How do I pass Pinia instance to useQuery?

[rtcpw]

I am using Quasar framework, and I am using queryCache's refresh + ensure combo to do prefetching in the Quasar's PreFetch hook. This works fine for SSR, because I can pass Pinia instance to the useQueryCache. However, I am tired of having to duplicate my fetching code, once for prefetching via useQueryCache, and then again in the script setup when calling useQuery. Is it possible to use useQuery in the preFetch hook without polluting the state across different SSR requests? It seems useQuery does not accept Pinia instance, so I suppose I cannot use useQuery in preFetch? Any thoughts or ideas?

[posva]

You cant useQuery outside of a component or effect scope. It creates a lot of extra stuff for reactivity and it would hurt your SSR performance

[posva]

then again in the script setup when calling useQuery

I missed that part. You don't need to call anything in script setup. It will automaticaly refetch when needed. You already have the right approach

[rtcpw]

So, I have attempted to illustrate my conundrum with the following pseudo-code:

<template>
  <div class="page" v-if="myData != null">
    {{ myData.text }}
  </div>
</template>

<script setup lang="ts">
defineOptions({
  preFetch: async (options) => {
    const itemId = options.currentRoute.params['id'];
    await queryCache.refresh(queryCache.ensure(myQuery1({ id: itemId })));

    // this is a simple example, but imagine there is several queries here, one dependent on the other
  },
});

const route = useRoute();

const { data: myData } = useQuery(myQuery1, () => ({
  id: route.params['name'],
}));

// again this is simplified example, but imagine I have to repeat the cascaded queries here as well
</script>

<style scoped lang="scss"></style>

Having just a single query myQuery1 like in this example is trivial. But if I have myQuery2 that depends on myQuery1, and then myQuery3 that depends on myQuery2, and so on and so forth, that chaining needs to be repeated in the preFetch (which is basically just a Quasar wrapper around router guard), and then again in the script setup part to get the reactive refs that I can bind in the UI. I am not really sure what's the best approach to doing cascaded / dependent queries like this. But having to repeat the cascading logic twice seems like there is a missing piece to the puzzle.

[rtcpw]

Each query is basically a REST API call. I did have a thought of building out all this logic within a single Pinia Colada query, but then I need to have the caching done on REST API call level, each API call should be cached individually. So, I would need to have each API call be a dedicated query, and then another query that somehow reuses these other queries. I have not seen an example of how to do it, so I am not sure if that scenario is even supported.

[posva]

The version you have seems good. Use query runs in the component but the prefetch runs in a navigation guard. They are collocated for convenience but (I think) they are extracted at build. Because of this, they need to be independent

[rtcpw]

I understand the need for calling both independently. The point I am trying to make is that there should be some way to SHARE the code between router guard and the component setup. As it stands - unless I am missing some undocumented feature in Pinia Colada - the router guard needs really similar but not quite the same code as the component setup, and the fetching logic needs to be essentially duplicated - once using ensure and refresh async methods in router guard, and then essentially the same logic expressed using reactive/ref variables in script setup. I feel like this is a missed opportunity, and it makes using Pinia Colada more error-prone for users who use prefetching in SSR.

If I only use a single query, this isn't really much of a problem, but as soon as I use multiple cascaded queries, this problem only becomes worse.