rival-black

How to keep 'enabled' prop reactive when a Ref is passed

My code:

export const useSearchQuery = (input: Ref<string>) => useQuery({
  queryFn: async ({ signal }) => {
    const { data: { data } } = await fetchSearch(input.value, signal)

    return data
  },
  queryKey: [QUERY_KEYS.SEARCH_RESULT, input],
  enabled: // what goes here?

export const useSearchQuery = (input: Ref<string>) => useQuery({
  queryFn: async ({ signal }) => {
    const { data: { data } } = await fetchSearch(input.value, signal)

    return data
  },
  queryKey: [QUERY_KEYS.SEARCH_RESULT, input],
  enabled: // what goes here?

If I just pass !!input.value it isn't reactive, and if I pass !!input it's always true. How do I avoid triggering a fetch when the input is an empty string?

5 Replies

flat-fuchsia•3y ago

I use a computed ref for this, so something like enabled: computed(() => !!input.value)

rival-blackOP•3y ago

I ended up doing that, something's just so disgusting to me with making a ref (computed) of a ref

flat-fuchsia•3y ago

I agree. I love Vue, but some of the reactivity is a little wonky sometimes

rival-blackOP•3y ago

I loved vue2 so much, then landed a job with react/next, then the current one with vue3. I gotta say I hate vue3 reactivity as much as I hated react syntax.

flat-fuchsia•3y ago

Composition API and React hooks API both have their trade offs for sure

Gaming

Programming

How to keep 'enabled' prop reactive when a Ref is passed

Did you find this page helpful?