在 GraphQL 查询之后：“void”类型上不存在属性“then”

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 execution function should return a promise #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

这取决于loadUsers 中究竟发生了什么，但您很可能忘记了那里的退货声明。

如果您更改 loadUsers 以返回正在加载的用户的承诺，您的代码应该开始正常工作。

Answer 3

如果您将the docs 视为useLazyQuery，它不会像useMutation 那样返回Promise，因此它们的行为不同。

您必须使用调用useLazyQuery 时返回的第二个参数（加载、数据），而不是依赖Promise。这就是为什么在您的编辑中，您的代码可以在没有 .then 的情况下工作。