Passing Apollo Client cache data with apollo Query

Question

I have two queries:

const GET_FILTERS = gql`
  query getFilters {
    filters @client {
      id
      title
      selected
    }
  }
`

And

const GET_POSTS = gql`
  query getPosts {
    posts {
      id
      author
      status
    }
  }
`

First one fetches the data from a local state using apollo-link-state and the second one is a external call.

I have a HOC for fetching posts setup like this:

const withPosts = (Component) => (props) => (
  <Query
    query={GET_POSTS}  
  >
    {({loading, data, error})} => {
      if(loading) return null
      if(error) return null
      return <Component {...data} {...props}/>
    }}
  </Query>
)

The fetching of the posts is fine but what I would like to do is to add whatever is returned from GET_FILTERS query with every call to GET_POSTS query?

One thing I could do is to wrap withPost in to another, lets say withFilters HOC, and pass the result in to GET_POSTS query as variables but I have been wondering if there is any other way to access that data via some sort of context and for example cache.readQuery using only withPost HOC.

Answer 1

Apollo has 'native' tools for HOC pattern, you can compose many (named) queries and mutations to enhance component. IMHO it's much more readable and powerfull than using query/mutaions components.

You can pass queried (filter) values as variables via data.fetchMore - of course you can use query component for 'inner query'.

Using cache directly isn't required while query 'cache-first' fetchPolicy option can be used.