После GraphQL Query: свойство 'then' не существует для типа 'void'

Question

Я использовал мутации graphql, подобные этой, и .then & .catch отлично работают:

  let submitForm = (
    email: string,
    firstName: string
  ) => {
    setIsSubmitted(true);

    if (email && (firstName)) {
      const input: UpdateUserInput = {};
      if (firstName) {
        input.firstName = firstName;
      }
      updateUser({
        variables: {
          email: email,
          input: input,
        },
      })
        .then(({ data }: ExecutionResult<UpdateUserResponse>) => {
          if (data !== null && data !== undefined) {
            setIsUpdated(true);
          }
        })
        .catch((error: { message: string }) => {
          console.log('Error msg:' + error.message);
        });
    }
  };

Теперь я делаю нечто подобное здесь для запроса graphql (более полная рабочая версия ниже):

let ShowUsers = () => {
    const where: WhereInput = {};
    if (criteria === '2') {
      if (searchItem) {
        where.firstName_contains = searchItem;
        loadUsers({
          variables: {
            where: where
          },
        })
        .then(({ data }: any) => {
          if (data !== null && data !== undefined) {
          }
        })
      }
    }
}

но я продолжаю получать сообщение об этом Property 'then' does not exist on type 'void'

Редактировать:

Без .then, .catch мой код работает правильно. Полная форма выглядит примерно так:

function UserSearchPage() {
  const [criteria, setCriteria] = useState('');
  const [searchItem, setSearchItem] = useState('');

  const [loadUsers, { loading, data }] = useLazyQuery(LoadUsersQuery);

  function PrintUsers({ data }: any) {
    return (
      <div>
        {data &&
          data.users.nodes &&
          data.users.nodes.map((c: any, i: any) => (
            <li key={i}>
              Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
              Email: {c.email}, phoneNumber: {c.phoneNumber}
            </li>
          ))}
      </div>
    );
  }

  let ShowUsers = () => {
    const where: WhereInput = {};
    if (criteria === '1') {
      loadUsers({
        variables: {
          where: where
        },
      });      
    }

    if (criteria === '2') {
      if (searchItem) {
        where.firstName_contains = searchItem;
        loadUsers({
          variables: {
            where: where
          },
        });
      }
    }
  };
  return (
.....);
}

Вот так выглядит сам запрос GraphQL:

interface UserFilter {
  email_contains: String;
  firstName_contains?: String;
  lastName_contains?: String;
  phoneNumber_contains?: String;
  id?: Number;
}
export const LoadUsersQuery = gql`
  query usersList($where: UserFilter) {
    users(where: $where) {
      nodes {
        id
        email
      }
      totalCount
    }
  }
`;

Как еще можно получить доступ к свойствам / ошибкам данных? Из console.log я знаю, что это возвращается:

Object

__typename: "User"

email: "first@first.com"

firstName: "First"

id: 148

lastName: "User"

phoneNumber: "+49123"

Но если я пытаюсь получить доступ, скажем, data.users.id, почему я получаю неопределенное? Как я могу это исправить?

Answer 1

Как указано в других ответах, это известная проблема - "Функция выполнения useLazyQuery должна возвращать обещание # 3499"

Вместо

    loadUsers({
      variables: {
        where: where
      },
    })
    .then(({ data }: any) => {
      if (data !== null && data !== undefined) {
      }
    })

, которые вы можете использовать onCompleted опция

const [loadUsers, { loading, data }] = useLazyQuery(LoadUsersQuery, {
  onCompleted: ( data : any ) => {
    if (data !== null && data !== undefined) {
      // some action
    }
  }
});

Answer 2

Если вы посмотрите на документы для useLazyQuery, он не вернет Promise как useMutation, поэтому они ведут себя по-разному.

Вместо того, чтобы полагаться на Обещание, вы должны использовать вторые параметры (загрузка, данные), возвращаемые при вызове useLazyQuery. Вот почему в вашем редакторе ваш код работает без .then.

Answer 3

Это зависит от того, что именно происходит в loadUsers, но, скорее всего, вы забыли там инструкцию return.

Если вы измените loadUsers, чтобы вернуть обещание для пользователя, который он загружает , ваш код должен начать хорошо работать.