当 GraphQL Playground 返回数据时，Apollo Client 查询返回 null

Question

我有一个将用户添加到我的数据库的功能，一旦成功，我将执行查询以获取该用户。查询在 GraphQL playground 中返回数据，但在我的客户端应用程序中执行时，查询返回 null。我正在使用 useEffect 挂钩在 addPartner 突变完成并返回数据后执行查询。我不明白为什么查询在 playground 中返回数据时返回 null。

addPartner 函数

  const handleSubmit = async (): Promise<void> => {
    ...
    await addPartner({ variables: { input: { ...form } } })
  }

我的useEffect钩子和查询函数

const [addPartner, { data, error: addPartnerError }] = useMutation(ADDPARTNER)
const [fetchPartner, { data: partnerData, loading }] = useLazyQuery<IPartner>(GETPARTNER)

  useEffect(() => {
    checkSuccess()
    console.log(partnerData) // null
  }, [data, loading])

  const checkSuccess = () => {
    if (!addPartnerError) {
      fetchPartner({ variables: { email: form.email } })
      console.log("fetch executed") // "fetch executed"
      console.log(partnerData) // null
      if (partnerData?.getPartner != null) {
        setPartner(partnerData.getPartner)
        router.replace('/success')
      }
    }
  }

Answer 1

这比必要的要复杂一些。突出的第一件事是

fetchPartner

是一个承诺，但您没有在

checkSuccess

函数中等待它，因此数据一开始将为空。此外，您的

useEffect

由

loading

触发，它将通过运行查询依次触发。

您可以使用几种更简单的模式。

1. 返回您因突变而插入的对象。这避免了必须进行两次网络往返，您会立即得到答案。
2. 返回你正在改变的对象的parent。如果您要插入列表或从列表中删除，这会更好，因为这样整个数组就可以刷新并保持正确的顺序。
3. 使用 refetchQueries 作为突变的结果运行您的查询。在你的情况下：

const [addPartner, { data, error: addPartnerError }] = useMutation(ADDPARTNER,{
  refetchQueries: ['GETPARTNER'] 
})