Асинхронная проверка с использованием хука useLazyQuery

avatar
Roman Mahotskyi
1 июля 2021 в 20:57
672
1
0

Как обрабатывать асинхронную проверку на уровне поля в форме react-hook с помощью useLazyQury ловушки Apollo Client?

Насколько я понимаю, хук useLazyQuery — это единственный способ инициализировать запрос GraphQL для какого-либо действия (например, onClick). К сожалению для меня, этот хук возвращает void и заставляет меня использовать переменную data для получения значения. Но. Форма реакции-хука требует вернуть значение true/false в 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
          }
        }
      })}
    />
  )
}
Источник

Ответы (1)

avatar
knoefel
2 июля 2021 в 10:51
2

Я думаю, вам нужно использовать здесь useQuery вместо useLazyQuery. Вам просто нужно установить skip на true в вашем объекте options, а затем вы можете использовать <37007888986876> для ленивой загрузки/проверки вашего псевдонима, поскольку 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.

Edit Apollo Client useLazyQuery Example (forked)

Roman Mahotskyi
3 июля 2021 в 01:02
0

Спасибо, кажется, это работает для меня. Я попробую и дам вам отзыв.

Roman Mahotskyi
5 июля 2021 в 13:44
1

Я проверил ваше предложение, и оно работает так, как ожидалось. Спасибо большое