apollo-client - 使用 useLazyQuery 钩子进行异步验证

Question

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

据我了解，钩子是在某些操作（如）useLazyQuery上初始化 GraphQL 请求的唯一方法。onClick不幸的是，这个钩子返回void并迫使我使用data变量来获取价值。但。true/falsereact-hook-form 需要在 asyncValidation中返回一个值。如何处理这种情况？

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
          }
        }
      })}
    />
  )
}

标签： apollo-clientreact-hook-form

Answer 1

我认为你必须在useQuery这里使用而不是useLazyQuery. 您只需在对象中设置skip为，然后您可以使用延迟加载/验证您的昵称，因为将返回. 一件重要的事情是在这里为您的函数使用一个函数，以便您可以等待该查询调用的结果。trueoptionsrefetchrefetchApolloQueryResultasyncasyncValidate

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.