1

我有一个由 App 组件呈现的 Toolbar 组件，我想在单击工具栏按钮时进行一些 api-call 更新，例如。'节省'。

index.js：

ReactDOM.render(
  <BrowserRouter>
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>
  </BrowserRouter>,
  document.getElementById('root')
)

应用程序.js

function App(props) {

  return (
    <div className="App">      
      <div>
        <Toolbar />
      </div>
    </div>
  )

我知道如何处理工具栏中的按钮单击以及如何在树上上下传递道具和处理程序，这样我就不用担心，但我实际上想直接在子组件中访问 Apollo 'client' 对象 - 沿着这些行（例如在工具栏中）：

const saveButtonClicked = (() => {

  client
    .query({...my query info...})
    .then(response => 
      {
        //Update was done
      })
})

我已经使用 useQuery 钩子在其他组件中使用了客户端，但这期望返回渲染/JSX 数据，我只想运行一个查询。我的理解是“客户端”对象保存在某个地方的上下文中，但我不知道如何获取对它的引用，所以我想我要问的是如何在挂钩之外访问“客户端”对象？

4

1 回答 1

0

您可以使用 withApollo 高阶组件将客户端放入组件的 props 中。

import { withApollo } from '@apollo/react-hoc';    

const MyComponent = ({ client }) => {
  ...
}
export default withApollo(MyComponent)

这是文档的链接https://www.apollographql.com/docs/react/api/react-hoc/#withapollocomponent

于 2020-03-09T14:35:45.317 回答