如何在 React 子组件中直接使用 Apollo 客户端

Question

我有一个由 App 组件呈现的工具栏组件，我想在单击工具栏按钮时进行一些 api 调用更新，例如。 'save'.

index.js:

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

App.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 挂钩的其他组件中使用了客户端，但这需要 return render/JSX 数据，我只想运行查询。我的理解是 'client' 对象保存在上下文中的某个地方，但我不知道如何获取对它的引用所以我想我要问的是如何访问外部的 'client' 对象钩子？

Answer 1

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

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

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

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

如何在 React 子组件中直接使用 Apollo 客户端

How to use the Apollo client directly in a React child component

reactjs

react-apollo

react-apollo-hooks