Как использовать клиент Apollo непосредственно в дочернем компоненте React - PullRequest
Новая
       55

Как использовать клиент Apollo непосредственно в дочернем компоненте React

0 голосов
/ 09 марта 2020

У меня есть компонент панели инструментов, визуализируемый компонентом приложения, я хочу выполнить обновление API-вызова при нажатии кнопки панели инструментов, например. 'save'.

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 непосредственно в дочернем компоненте - что-то вроде этого (например, на панели инструментов): 

const saveButtonClicked = (() => {

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

Я использовал клиента в других компонентах, используя хук useQuery, но при этом ожидается возвращение данных рендеринга / JSX, я просто хочу выполнить запрос. Я понимаю, что объект «клиент» где-то содержится в контексте, но я не знаю, как получить ссылку на него, поэтому я предполагаю, что я спрашиваю, как мне получить доступ к объекту «клиент» вне ловушки?

1 Ответ

0 голосов
/ 09 марта 2020

Вы можете использовать компонент высшего порядка withApollo, чтобы поместить клиента в реквизиты вашего компонента. 

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

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

Вот ссылка на документы https://www.apollographql.com/docs/react/api/react-hoc/#withapollocomponent

...