如何以及在哪里使用来自Apollo客户机的数据?

Question

如何以及在哪里放置该查询，以便我可以通过它进行映射并在标题中显示类别。我是一个新手，所有的阿波罗文档都是用钩子和功能组件制作的，但是我必须用基于类的组件来完成这个任务，我就是弄不明白。

index.js:

const client = new ApolloClient({
uri: "http://localhost:4000/graphql",
cache: new InMemoryCache(),
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root")
);

App.js:

class App extends Component {
render() {
return (
<>
<Header />
</>
);
}
}
export default App;

Header.js:

class Header extends Component {
render() {
return (
<header>
<ul className="nav-list">
//Display categories here with map in a <li className="nav-item">
</ul>
</header>
)
}
}

查询头元素:

const QUERY = gql`
query getCategories {
categories {
name
}
}
`;

Answer 1

钩子不能与类组件一起工作-但是你可以包装你的类组件，并将钩子结果作为道具传递给类组件:

import React from 'react';
import { useScreenWidth } from '../hooks/useScreenWidth';
export const withQueryHOC = (Component, query) => {
return (props) => {
const { loading, error, data } = useQuery(query);
return <Component loading={loading} error={error} data={data} {...props} />;
};
};

这被称为高阶分量

其中Component是要包装的类组件。这样，你可以使用类组件，但仍然可以访问钩子。

你应该像这样导出你的组件:

export default withQueryHOC(YourComponentHere);

在您的组件中，您应该通过this.props访问loading,error和data