A way to avoid using outside state

[posva]

maybe a defineQuery(() => {}) to allow using globals and creating global state associated with the query (e.g. a page?).

Currently one can try to do this:

<script setup lang="ts">
const page = ref(1)
useQuery({
  query() {
     return fetchData(page.value)
  },
  key: () => ['key', page.value]
})
<script>

But this can fail in some scenarios, notably if the same key is used in a different component or if this gets abstracted with

export const useSomeData = () => {
const page = ref(1)
return useQuery({
  query() {
     return fetchData(page.value)
  },
  key: () => ['key', page.value]
})
}

and used in multiple components, the page will end up scoped to the first component that calls it. Both components will create a page ref but only the first one will be used within query and key. Therefore, if the first component is unmounted while the other still lives, the page ref will not be reactive anymore, breaking the usage.

Notes

• An eslint plugin could warn agains this usage. It would be better to have some runtime warning but not sure how to do it, maybe checking for the active scope and saving it somewhere in dev only?
• Maybe run within a computed and check its deps
• The function version is nice to setup initial state. Each query/mutation is effectively a mini store

[posva]

There should also be an equivalent for defineMutation()

[posva]

I think a good version would be defineQuery(() => { ...}) similar to a setup store. This looks like a composable and behaves like one except it's a singleton

[posva]

This is partially done with https://pinia-colada.esm.dev/guide/queries.html#Reusable-Queries but it only mentions reusable queries while defineQuery() covers more than that as it can encapsulate more than than.