使用 useLazyQuery 钩子进行异步验证

Question

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

据我所知，useLazyQuery 钩子是针对某些操作（例如 onClick）初始化 GraphQL 请求的唯一方法。不幸的是，这个钩子返回 void 并迫使我使用 data 变量来获取值。但。 react-hook-form 需要在 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。您只需在 skip 对象中将 true 设置为 options，然后您可以使用 refetch 延迟加载/验证您的昵称，因为 refetch 将返回ApolloQueryResult。一件重要的事情是在此处为您的 async 函数使用 asyncValidate 函数，以便您可以等待该查询调用的结果。

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 异步加载数据的小例子。