阿波罗useLazyQuery绕过缓存

编程问答 2022-06-08

问题描述

我正在使用@apollo/client useLazyQuery挂钩在应用程序中构建忘记的功能。第一次单击按钮时，它将发送电子邮件并调用后端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。只需要解决这个问题。假设，一个用户忘记了密码，然后他通过电子邮件将其保留。不幸的是，他没有收到第一次尝试的电子邮件。他会再试一次，但是现在他接受了之前的回复，不会再向后端发出其他请求。我很确定阿波罗useLazyQuery有问题。我们如何绕过缓存？基本上，它从缓存中返回数据。

预先感谢您提供宝贵的答案！

解决方法

您可以重写钩子，将fetch policy设置为“无缓存”或“仅网络” 

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

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

apolloapolloapolloreactjsreactjsreactjsreactjstypescripttypescripttypescript