node.js - apollo useLazyQuery 绕过缓存

Question

我正在使用 @apollo/client 在我的应用程序中构建忘记的功能useLazyQuery Hook 。当我第一次单击按钮时，它会发送电子邮件并调用后端 API，但第二次单击等等.. 它只会返回来自后端的先前响应，意味着没有点击后端 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>
  )
}

不用担心表格，我用的是 react hook form .只需要解决问题。让我们假设，用户忘记了密码，他用电子邮件休息了它。不幸的是，他没有收到第一次尝试的电子邮件。他会再试一次，但现在他接受了以前的响应，不会向后端发出另一个请求。我很确定 apollo useLazyQuery 存在问题。我们如何绕过缓存？基本上，它从缓存中返回数据。
提前感谢您的宝贵答案!

Answer 1

你可以重写你的钩子(Hook)来设置 fetch policy到“无缓存”或“仅网络”

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

另一方面，您应该考虑使用 Mutation 而不是 Query 进行此操作，因为数据可能会发生一些变化。例如，您存储用于重置密码或类似内容的唯一哈希或链接。