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?

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

!!input.value

!!input.value

!!input.value it isn't reactive, and if I pass

!!input

!!input

!!input

!!input it's always true. How do I avoid triggering a fetch when the input is an empty string?

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

Similar Threads

Similar Threads

Similar Threads