Allow some properties of vue-query to accept getter functions

[Mini-ghost]

We often need to determine the value of enabled based on different conditions, maybe we can allow passing a getters in certain properties?

like this:

useQuery({
  queryKey: ['TODO'],
  queryFn: () =>  Promise.resolve({ data: []}),

  // Allow `MaybeRefOrGetter<boolean | undefined>`
  enabled() {
    return isMounted.value && isAuth.value
  },
})

This was discussed in Support Vue getters #5461, but here the focus is on specific attributes, such as the mentioned enabled.

[DamianOsipiuk]

Some of the options already support callback functions which are basically getters+. They are running just in time with additional context props.

As for the others, there are a couple of questions

1. How to handle potential conflicts whenever query-core adds a callback possibility to a particular property?
2. getters are a Vue 3.3 feature. What about Vue 2 compatibility? We would either need a polyfill or return different types for different vue versions.
3. Do you see other properties that would benefit from being getters?

[DamianOsipiuk]

I might be missing something, but how would you watch if dependencies encapsulated by the getter changes? Based on the beta branch.
https://github.com/TanStack/query/blob/beta/packages/vue-query/src/useBaseQuery.ts#L78

As I understand it, we would have to make an explicit watch on every getter in options?

[Mini-ghost]

cloneDeepUnref will only copy arrays and objects and unwrap ref, functions (such as queryFn) will not be processed.

So we just need to pick the property of type MaybeRefOrGetter and call it, like below:

const defaultedOptions = computed(() => {
  const clonedOptions = cloneDeepUnref(options)

  if (typeof clonedOptions.enabled === 'function') {
    clonedOptions.enabled = clonedOptions.enabled()
  }

  const defaulted = client.defaultQueryOptions(clonedOptions)

  defaulted._optimisticResults = client.isRestoring.value
    ? 'isRestoring'
    : 'optimistic'

  return defaulted
})

[DamianOsipiuk]

But my question is, how computed would know that enabled should be evaluated, since enabled fn reference would not change?
With other props computed can see that there is a ref in options and reevaluate when it changes, but getter is just a function.
Considering no other option changes, but only a ref that is used only inside enabled getter.

If you could provide a test with this that will work on beta branch against Vue 2 and react to getter dependency change we could think to integrate that.

[Mini-ghost]

The following example demonstrates that Vue 2 can support the getters API.
https://stackblitz.com/edit/vitejs-vite-9rq3ru?file=src%2FApp.vue

This is a PR for the master branch

• feat(vue-query): enabled accepts getter function #6004

I seem to have misunderstood what you meant, maybe I should prepare a PR for the beta branch?

[Mini-ghost]

This PR for the beta branch:

• feat(vue-query): let composables accepts enabled as a getter function #6018

[suneettipirneni]

Just in case anyone else stumbles upon this discussion, getters are now supported for the enabled option as a well for queryKeys