Simply watching/reading a value from Apollo cache

Question

I am trying to perform what I believe is a simple task. I have a search box that is successfully using the client.writeQuery to add an item to the cache.It looks like this:

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

This works as intended as I can use the Apollo Chrome tools and see it getting set and updated in the cache as I type. This is not a value I am needing to keep in the database.

All I want to do with this is have it read by another component and use it in a query. I've looked over tons of documentation and tutorials but not seem to be very concise or clear to me. I have another component that has a Query component that takes that string and uses it to search. I also know this works properly because before I was using Apollo Link State I was just having it use a value in the React state.

How can I get this React component to watch and use this Apollo cache value in the same way it was using the React state? The subsequent component just looks like this:

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>
);

The Query component that calls MAIN_QUERY just passes the returned data to a component in charge of rendering the results. Any help would be greatly appreciated as this small issue that I imagine is simple to solve has slowed by progress of learning Apollo/GraphQL to a halt. Thanks.

Answer 1

In my MainSearchQuery component, I switched it to an ES6 class component, and I was able to use the compose function from react-apollo and export the component like this:

export default compose(
    graphql(READ_SEARCHQUERY, {
        props: ({ data: {searchQuery}}) => ({
            searchQuery
        })
    })
)(MainSearchQuery)

And then inside my

    const { searchQuery : { query } } = this.props;

And then had my Query component take the variables like:

variables={{searchQuery: query}}

And all is well now.