查询组件集成在功能组件内部

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显示名字和姓氏的代码。

首先是用户的功能组件，其中包括查询组件。 AppLayout组件只包装了该Users Query组件， getName是Query属性中使用的gql查询。

但是当我进行集成时，会出现如下错误： {不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。