Просто просмотр / чтение значения из кеша Apollo
Я пытаюсь выполнить то, что считаю простой задачей. У меня есть окно поиска, которое успешно использует client.writeQuery для добавления элемента в кеш. Оно выглядит так:
client.writeQuery({
query: gql`
{
searchQuery {
query
}
}
`,
data: {
searchQuery: {
query: event.target.value,
__typename: 'searchQuery'
}
}
});
Это работает так, как задумано, поскольку я могу использовать инструменты Apollo Chrome и видеть, как они устанавливаются и обновляются в кеше по мере ввода. Это не то значение, которое мне нужно хранить в базе данных.
Все, что я хочу с этим сделать, - это прочитать его другим компонентом и использовать в запросе. Я просмотрел массу документации и руководств, но мне они не показались очень краткими или понятными. У меня есть еще один компонент, в котором есть компонент запроса, который берет эту строку и использует ее для поиска. Я также знаю, что это работает правильно, потому что до того, как я использовал Apollo Link State, я просто использовал значение в состоянии React.
Как я могу заставить этот компонент React наблюдать и использовать это значение кеша Apollo так же, как он использовал состояние React? Следующий компонент выглядит так:
const MainSearchQuery = ({searchQuery}) => (
<Query query = {MAIN_QUERY} variables = {{searchQuery}}>
{({loading, error, data}) => {
if (loading) return(
<p>Finding something ...</p>
);
if (error) return (
<p>Ah man! There was nothing to find.</p>
);
return (
<MainSearchResults searchResults = {data.ResultsBySubstring} />
);
}}
</Query>
);
Компонент Query, который вызывает MAIN_QUERY, просто передает возвращенные данные компоненту, отвечающему за визуализацию результатов. Любая помощь будет принята с благодарностью, так как эта небольшая проблема, которую, как мне кажется, легко решить, замедлилась из-за того, что процесс изучения Apollo / GraphQL остановился. Спасибо.
Ответы 1
В моем компоненте MainSearchQuery я переключил его на компонент класса ES6, и я смог использовать функцию compose из response-apollo и экспортировать компонент следующим образом:
export default compose(
graphql(READ_SEARCHQUERY, {
props: ({ data: {searchQuery}}) => ({
searchQuery
})
})
)(MainSearchQuery)
А потом внутри моего
const { searchQuery : { query } } = this.props;
А затем мой компонент Query принял такие переменные, как:
variables = {{searchQuery: query}}
И теперь все хорошо.