Query(...)：const 中的渲染没有返回任何内容

Question

我在 React 中有一个组件，用于使用 GrapghQL 进行查询。我看不出查询组件和他的导入有什么问题

 const Query = ({ children, query, id }) => {const { data, loading, error } = useQuery(query, {
 variables: { id: id },
 });
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {JSON.stringify(error)}</p>;
return children({ data });
};
export default Query;

在另一个组件类别中，我循环返回类别对应的按钮

    const Category = () => {
const classes = useStyles();
return (
 <Query query={CATEGORIES_QUERY} id={null}>
  {({ data: { categories } }) => {
    categories.map((catego, i) => {
      console.log(catego);
      return (
        <Button
          {...{
            key: catego.id,
            color: "inherit",
            className: classes.menuButton,
          }}
        >
          {catego.Nom}
        </Button>
      );
    });
  }}
 </Query>
);
};
export default Category;

最后在我的导航栏组件中

const Nav = () => {
   ....some code....
  const displayDesktop = () => {
     return (
       <Toolbar className={toolbar}>
         {logo}
        <div>
         <Category />
        </div>
       </Toolbar>
);};
 return (
   <header>
     <AppBar className={header}>
     {mobileView ? displayMobile() : displayDesktop()}
     </AppBar>
   </header>
 );
};
export default Nav;