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

Posted 2023-03-10

【中文标题】我如何以及在哪里使用来自 Apollo 客户端的数据？

【英文标题】：How and where do I use the data from an Apollo Client?

【发布时间】：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
             
         
       `;

【参考方案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