How to manually fetch while utilizing cache?

[joeattardi]

I have a component for a user to change their password.

As they type their password, it calls an API to check the password against configured password rules.
I don't want the query to fetch until a password is typed.

I thought I could do this by setting enabled to false, then manually trigger it with refetch(). Unless I'm doing something wrong, it appears that refetch doesn't check for a cached version of the data before sending the request.

Say I type a password "z", then it makes the API call. Then I type another letter, it makes that API call. If I delete the second letter so that it's just "z", I would think it wouldn't make the fetch request again because the result for the query key ['checkPassword', 'z'] is already in the cache. Am I correct in the assumption that refetch bypasses the cache and always does a fetch?

What would be the right way to do this? Is this a use case for a dependent query? Make it dependent on the password having a value, and then will it utilize the cache?

[TkDodo]

refetch is an imperative option that bypasses almost anything - I barely ever use it. react-query is declarative by nature.

there a couple of steps you need to do to achieve this:

• have local state for the password (you likely already have this)
• add the password to the queryKey, so that react-query refetches automatically when the password changes
• disable the query as long as the password is empty
• set keepPreviousData to true so that you don't get loading states while the user is typing 😅
• set staleTime to a higher number or even Infinity to avoid background refetches if you don't want additional requests for passwords you already have.
• optionally debounce the password value a bit so that you don't make a request on every keystroke, but rather once the user stops typing (useDebounce is a good hook).

all in all, my impl would look something like this:

const usePasswordQuery = () => {
  const [password, setPassword] = React.useState('')
  const debouncedPassword = useDebounce(password, 250)
  const queryInfo = useQuery(
    ['password', debouncedPassword],
    () => fetchPassword(debouncedPassword),
    {
        enabled: Boolean(debouncedPassword),
        keepPreviousData: true,
        staleTime: Infinity
    }

  return [queryInfo, { type: 'password', value: password, onChange: (event) => setPassword(event.target.value) }
}

usage:

function MyComponent() {
  const [{ data, error, isLoading }, passwordProps] = usePasswordQuery()

 return <input {...passwordProps} />
}