how to transfer values between redux and apollo-client ?

Hi

looking at the example with-redux-and-apollo, I can’t figure out how to copy a store’s value to props such that it is passed to a child component performing a graphql query. Here’s my current approach. I would greatly appreciate any hint, since using { connect } + MapStateToProps approach from ‘react-redux’ cannot access the store.

./lib/store.js

import Immutable from 'immutable'
const initialState = Immutable.fromJS({
    keyword: 'I want to query this sentence'
})
export default {
  search: (state = initialState, { type, payload }) => {
    switch (type) {
       default:
        return state
    }
}

./page/search.js

import SearchResult from '../containers/SearchResult'
import withData from '../lib/withData'
import App from '../components/App'

export default withData((props) => (
  <div>
    <App>
      <SearchResult keyword={'I DON'T KNOW HOW TO PASS REDUX-STATE HERE'}/>
		</App>
  </div>
))

./containers/SearchResult.js

import withData from '../lib/withData'
import { gql, graphql} from 'react-apollo';
import SearchResult from '../components/Search'

const search = gql`
  query search($keyword: String!, $size: Int!) {
    search(keyword: $keyword, size: $size){
      title
    }
}
`;

export default withData(graphql(search, {
  options: ({ keyword }) => ({
    variables: {
      keyword: { keyword },
      size: 10
    }
  }),
  props: ({ data }) => ({ data })
})(SearchResult))

[tsupol]

@theednaffattack here is my quick code (not tested) that might help Note: the rest are the same as @timneutkens’s examples and you may have add your reducers and actions

import React from 'react'
// GQL
import { gql, graphql } from 'react-apollo'
// Redux
import { connect, compose } from 'react-redux'
import { bindActionCreators } from 'redux'
// Redux actions if needed
import { doReduxStuff } from '../../redux/filterActions'

class reactClass extends React.Component {

  constructor (props) {
    super(props)
  }

  onClick = (e) => {
    e.preventDefault()
    // dispatch a Redux action
    this.props.action.doReduxStuff({params: 'test'})
  }

  render () {
    // Note: no GQL code here for simplification
    return (
      <div>
        <h1>Data from Redux: {this.props.yourData}</h1>
        <button onClick={this.onClick}>Test Redux</button>
      </div>
    )
  }
}

// You may need to pay attention here
const reduxWrapper = connect(
  // I think this is what you are looking for
  state => ({
    yourData: state.yourData
  }),
  // You can also map dispatch to props
  dispatch => ({
    actions: {
      doReduxStuff: bindActionCreators(doReduxStuff, dispatch),
    }
  }))

// Apollo!
const query = gql`
  query users($id: Int!) {
    users(id: $id) {
      id
      name
    }
  }
`

const gqlWrapper = graphql(query, {
  options: (ownProps) => ({
    variables: {
      id: ownProps.id,
    }
  }),
})

// `compose` makes wrapping component much easier and cleaner
export default compose(
  reduxWrapper,
  gqlWrapper,
)(reactClass)

[jmaylin]

@tsupol Thanks! Be careful though. compose is imported from redux, not from react-redux