apollo useLazyQuery bypass cache

Issue

I'm building forgot functionality in my app using @apollo/client useLazyQuery hooks. for the first time when I click the button, it sends the email and calling the backend API, but as clicking the second time and so on.. it would just return the previous response made from the backend, mean not hitting the backend API.

export const Form: React.FC<Props> = ({ setStatus }) => {
  const [getResetLink, { loading, data }] = useLazyQuery(FORGOT_PASSWORD)
  
  console.log(data, loading, " => Query")

  const onSubmit = (data: any) => {
    const email = data[" "]
    getResetLink({ variables: { email } })
  }

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <Input
          label=" "
          placeholder="eg. alex@gmail.com"
          register={register}
          required={true}
        />

        <Button btnType={true} type="primary" width="100%">
          Submit
        </Button>
      </form>
  )
}

don't worry about the form, I'm using react hook form. just need to fix the issue. let's suppose, a user forgot a password and he rests it with an email. unfortunately, he didn't receive an email for the first try. he would try again, but now he takes the previous response, wouldn't make another request to the backend. I'm pretty sure there is a problem with apollo useLazyQuery. how can we bypass the cache? basically, it returns data from the caches.

Thanks in advance for your valuable answers!

Solution

You could rewrite your hook to set the fetch policy to 'no-cache' or 'network-only'

const [getResetLink, { loading, data }] = useLazyQuery(FORGOT_PASSWORD, {fetchPolicy: 'no-cache'})

On another note, you should consider using Mutation instead of Query for this operation, as probably there is some change in data. For example, you store the unique hash or link for resetting a password or something similar.

Answered By - Anastasiia Solop