Просто просмотр / чтение значения из кэша Apollo

Question

Я пытаюсь выполнить то, что считаю простой задачей. У меня есть окно поиска, которое успешно использует client.writeQuery для добавления элемента в кеш. Это выглядит так:

client.writeQuery({
        query: gql`
            {
                searchQuery {
                    query
                }
            }
        `,
        data: {
            searchQuery: {
                query: event.target.value,
                __typename: 'searchQuery'
            }
        }
    });

Это работает как задумано, так как я могу использовать инструменты Apollo Chrome и видеть, как он устанавливается и обновляется в кеше по мере ввода текста. Это не то значение, которое мне нужно хранить в базе данных.

Все, что я хочу сделать, это прочитать его другим компонентом и использовать в запросе. Я просмотрел тонны документации и учебных пособий, но мне они не кажутся очень краткими или ясными. У меня есть другой компонент, который имеет компонент Query, который берет эту строку и использует ее для поиска. Я также знаю, что это работает правильно, потому что до того, как я использовал 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 остановилось. Благодарю.

Answer 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}}

И сейчас все хорошо.