conscious-sapphire

Refetch when input value changes.

i have 2 pages: 1. BaseInputSearchResults.vue 2. useLp.ts (Vue/query hook) im trying to call the query every time the searchValue is changes with the new value, but it not works for some reason. i did a thing like this with react/query and i was very easy with useState, i thought it will be like this with ref in vue, but it seems that not. how to fix it , please help. @MrMentor i saw you helped someone with vey similar issue.

9 Replies

deep-jade•2y ago

useGetPlatesByPlateNumber(searchValue) Pass a ref, not a value of it to preserve reactivity

conscious-sapphireOP•2y ago

perfect it worked!! and the useQuery function like this? or in the queryKey to put the plateNumber with the value

conscious-sapphireOP•2y ago

@MrMentor

deep-jade•2y ago

queryKey needs a ref to react to changes as its instantiated only once within setup. queryFn is evaluated every time so it can use .value

conscious-sapphireOP•2y ago

thank you, you helped a lot.

stormy-gold•2y ago

Gonna piggy back here since I'm having an issue with enabled. Here's my code:

export const useSearchQuery = (input: Ref<string>) => {
  const enabled = computed(() => !!input.value)

  return useQuery({
    queryFn: async ({ signal }) => {
      const { data: { data } } = await fetchSearch(input.value.trim(), signal)
      console.log(enabled.value)
      return data
    },
    queryKey: [QUERY_KEYS.SEARCH_RESULT, input],
    enabled,
    select: mapSearchResult
  })
}

export const useSearchQuery = (input: Ref<string>) => {
  const enabled = computed(() => !!input.value)

  return useQuery({
    queryFn: async ({ signal }) => {
      const { data: { data } } = await fetchSearch(input.value.trim(), signal)
      console.log(enabled.value)
      return data
    },
    queryKey: [QUERY_KEYS.SEARCH_RESULT, input],
    enabled,
    select: mapSearchResult
  })
}

The weirdest thing is that it seems to have begun acting weird with no code changes in the last few days. Scenario: 1. page loads, search input is empty, nothing happens. 2. text input appears, the fetch triggers, everything ok so far. 3. If I backspace the whole input, no request, as expected. 4. If I clear the input via navigation, the input is cleared, but the fetch is triggered even though enabled is false, verified with the console.log If I refresh the page the fetch isn't triggered. So only when there's a URL change, the enable gets ignored.

deep-jade•2y ago

@Dili Should be fixed by https://github.com/TanStack/query/pull/6043

GitHub

fix(vue-query): avoid use sync watchers that cause frequent request...

Linked issue resolves #5996 Description Starting from v4.34.3, there is an issue where the queryFn is erroneously triggered under the following conditions: When the enabled property is set to fals...

stormy-gold•2y ago

Nice! Curious side question: In a situation like this (a package I'm using fixes an issue), how do I find the version of the package that has the fixing change? Say I'm behind 2 major versions, and would only need to bump minor from X to Y to get the fix. Is there an easy way to know this?

deep-jade•2y ago

You can refer to the package changelog and to find out there. But depending on the package and the fix description it might be hard to know if this fixes your particular issue, unless your opened issue is linked to that. As a rule of thumb, try the latest version, and see if it fixes your issue. Minimal reproduction might help with verification.

Gaming

Programming

Refetch when input value changes.

Did you find this page helpful?