apollo useLazyQuery 绕过缓存

Posted 2023-03-10

【中文标题】apollo useLazyQuery 绕过缓存

【英文标题】：apollo useLazyQuery bypass cache

【发布时间】：2021-01-29 16:17:26

【问题描述】：

我正在使用 @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. [e-mail]"
          register=register
          required=true
        />

        <Button btnType=true type="primary" >
          Submit
        </Button>
      </form>
  )

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

提前感谢您的宝贵回答！

【参考方案1】：

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

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

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