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中到底发生了什么，但是您可能忘记了那里的return语句。

如果您更改loadUsers以返回对用户的承诺，则您的代码应该可以正常工作。

Answer 3

如果您在useLazyQuery中查看the docs，它不会像Promise那样返回useMutation，因此它们的行为会有所不同。

您不必依赖Promise，而必须利用调用useLazyQuery时返回的第二个参数（加载，数据）。这就是为什么在您的编辑中代码无需.then就能工作的原因。

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

3 个答案: