AWS Amplify Graphql - TypeError: Must provide Source. Received: undefined

Question

I am doing my queries exactly as in the documentation (https://aws-amplify.github.io/docs/js/api#amplify-graphql-client) but I keep receiving the following error:

TypeError: Must provide Source. Received: undefined

The query is as follows:

export const listUsers = `query ListUsers(
  $filter: ModelUserFilterInput
  $limit: Int
  $nextToken: String
) {
  listUsers(filter: $filter, limit: $limit, nextToken: $nextToken) {
    items {
      id
      firstName
      prefix
      lastName
      phone
      cigarettesDay
      enableNotifications
      age
      coach {
        id
        name
      }
      stopDate {
        nextToken
      }
      notifications {
        nextToken
      }
    }
    nextToken
  }
}
`;

Using API.graphql I call the query as follows:

  async componentDidMount() {
    try {
      const result = await API.graphql(graphqlOperation(listUsers));
      console.log(result);
    } catch (err) {
      console.log(err);
    }
  }

According to this issue https://github.com/graphql/graphql-js/issues/1038 I need to add a source, but I cannot find any example or documentation on how to do that. Any help is much appreciated!

Edit

It worked when I did it as follows:

 async componentDidMount() {
   try {
     const result = await API.graphql(graphqlOperation(queries.listUsers));
     console.log(result);
   } catch (err) {
     console.log(err);
   }
 }

And imported it as import * as queries from '../../../graphql/queries';

Why?

Solution

It was because I imported the query as

import listUsers from '../../../graphql/queries';

Instead of

import { listUsers } from '../../../graphql/queries';