使用 useLazyQuery 钩子进行异步验证

Question

如何使用Apollo Client的useLazyQury hook处理react-hook-form中的字段级异步验证？

据我所知，useLazyQuery 挂钩是对某些操作（如 onClick）初始化 GraphQL 请求的唯一方法。不幸的是，这个钩子 returns void 迫使我使用 data 变量来获取值。但。 react-hook-form 需要 return asyncValidation 中的 true/false 值。如何处理这种情况？

const AsyncValidation = () => {
  const [nicknameUniqueness, data ] = useLazyQuery(NICKNAME_UNIQUENESS_QUERY)
   
  return (
    <input
      {...register('nickname', {
        validate: {
          asyncValidate: (value) => {
            nicknameUniqueness({ variables: { nickname: value } }) // returns void by Apollo documentation

            // How to get up-to-dated data here?

            return data?.nicknameUniqueness.isUnique
          }
        }
      })}
    />
  )
}

Answer 1

我认为你必须在这里使用 useQuery 而不是 useLazyQuery。您只需在 options 对象中将 skip 设置为 true 然后您可以使用 refetch 来延迟 load/validate 您的昵称，因为 refetch 会return ApolloQueryResult。一件重要的事情是在此处为您的 asyncValidate 函数使用 async 函数，以便您可以等待该查询调用的结果。

const AsyncValidation = () => {
  const { refetch: nicknameUniqueness } = useQuery(NICKNAME_UNIQUENESS_QUERY, {
    skip: true
  });

  return (
    <input
      {...register("nickname", {
        validate: {
          asyncValidate: async (value) => {
            const { data } = await nicknameUniqueness({
              variables: { nickname: value }
            });

            return data?.nicknameUniqueness.isUnique;
          }
        }
      })}
    />
  );
};

我做了一个使用useQuery异步加载数据的小例子。

使用 useLazyQuery 钩子进行异步验证

Async validation with useLazyQuery hook

apollo-client

react-hook-form