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

Question

I was using graphql mutations like this and the.then &.catch work perfectly:

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

Now I am doing something similar here for a graphql query (fuller working version below):

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

but I keep getting an error on then that Property 'then' does not exist on type 'void'

Edit:

Without the.then, .catch, my code works correctly. Full form is something like this:

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 (
.....);
}

This is how the GraphQL query itself looks like:

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
    }
  }
`;

How else can I access the data properties/errors? From the console.log, I know that this is returned:

Object

__typename: "User"

email: "first@first.com"

firstName: "First"

id: 148

lastName: "User"

phoneNumber: "+49123"

But if I try to access lets say data.users.id , why do I get undefined? How can I fix this?

Answer 1

As stated in other answers, it's known problem - "useLazyQuery execution function should return a promise #3499"

Instead of

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

you can use onCompleted option

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

Answer 2

It depends on what exactly is happening in loadUsers , but it's likely that you've forgotten to a return statement there.

If you change loadUsers to return the promise for the user's it's loading, your code should start working nicely.

Answer 3

If you look at the docs for useLazyQuery , it does not return a Promise like useMutation so they behave differently.

Instead of relying on a Promise, you must utilize the second parameters (loading, data) returned when invoking useLazyQuery . This is why in your edit, your code works without the .then .