Компонент запроса, встроенный в функциональный компонент

Question

const Users = () => (
  <Query query={getName}>
    {({ loading, error, data }) => {
      if (loading) return "Loading...";
      if (error) return `Error! ${error.message}`;
      return (
        <div>
          <ul name="user">
            <li style={{ color: "white" }}>
              {data.user.firstname} - {data.user.lastname}
            </li>
          </ul>
        </div>
      );
    }}
  </Query>
);

const AppLayout = ({ children }) => (

        <div>
          <Users/>
        </div>
      
);
=================================================
import gql from 'graphql-tag';

const getName = gql`
  {
    user {
      firstname
      lastname
    }
  }
`;

export default getName;
=============================================

Ниже приведен код, используемый для graphql для отображения имени и фамилии с использованием gql.

Первый - это функциональный компонент Users, который включает в себя компонент Query.,Компонент AppLayout просто оборачивает этот компонент Users Query, а getName - это gql-запрос, используемый внутри свойства Query.

Но при интеграции я получаю сообщение об ошибке, подобное следующему: {Invariant Violation: Тип элемента недопустим: ожидаетсястрока (для встроенных компонентов) или класс / функция (для составных компонентов), но получили: undefined.Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы смешали импорт по умолчанию и с именами.