我如何以及在哪里使用来自 Apollo 客户端的数据？答案

【问题标题】：How and where do I use the data from an Apollo Client?我如何以及在哪里使用来自 Apollo 客户端的数据？
【发布时间】：2021-12-09 18:05:16
【问题描述】：

我必须如何以及在何处放置该查询，以便我可以映射它并在标题中显示类别。我是个菜鸟，所有的 apollo 文档都是用钩子和功能组件制作的，但是我必须使用基于类的组件来完成这项任务，我就是想不通。

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
             }
         }
       `;

【问题讨论】：

标签： reactjs graphql apollo

【解决方案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} />;
  };
};

这被称为Higher-Order Component

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

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

export default withQueryHOC(YourComponentHere);

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

【讨论】：