apollo useLazyQuery 绕过缓存

Question

我正在使用 @apollo/client useLazyQuery 挂钩在我的应用程序中构建被遗忘的功能。当我第一次点击按钮时，它会发送电子邮件并调用后端 API，但是第二次点击等等......它只会 return 之前从后端做出的响应, 意思是不打后端 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 有问题。我们如何绕过缓存？基本上，它 return 来自缓存的数据。

提前感谢您宝贵的回答！

Answer 1

您可以重写您的钩子以将 fetch policy 设置为 'no-cache' 或 'network-only'

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

另一方面，您应该考虑对此操作使用 Mutation 而不是 Query，因为数据可能有一些变化。例如，您存储唯一的哈希值或 link 用于重置密码或类似的东西。

apollo useLazyQuery 绕过缓存

apollo useLazyQuery bypass cache

node.js

typescript

apollo

reactjs