How to update the Redux store after Apollo GraphQL query returns How to update the Redux store after Apollo GraphQL query returns reactjs reactjs

How to update the Redux store after Apollo GraphQL query returns


I would do something similar to Option 2, but put the life cycle methods into the actual Component. This way the business logic in the life cycle will be separated from the props inherited from Container.

So something like this:

class yourComponent extends Component{    componentWillReceiveProps(nextProps) {      const {        loading,        items,        selectedItem,        selectItem,      } = nextProps;      if (!selectedItem && !loading && items && items.length) {        selectItem(items[items.length - 1].id);      }    }  render(){...}}// Connect redux and graphQL to the Componentconst yourComponentWithGraphQL = graphql(...)(yourComponent);export default connect(mapStateToProps, mapDispatchToProps)(yourComponentWithGraphQL)


I would listen to changes in componentDidUpdate and when they happened dispatch an action that will set selectedItem in Redux store

componentDidUpdate(prevProps, prevState) {    if (this.props.data !== prevProps.data) {        dispatch some action that set whatever you need to set    }}


there should be sufficient to use 'props', sth like:

const enhance = compose(  connect(    function mapStateToProps(state) {      return {        selectedItem: getSelectedItem(state),      };    }, {      selectItem, // action creator    }  ),  graphql(    dataListQuery, {      options: ({ listId }) => ({        variables: {          listId,        },      }),      props: ({ data: { loading, dataList } }) => {        if (!loading && dataList && dataList.length) {          selectItem(dataList[dataList.length - 1].id);        }        return {          loading,          items: dataList,        }      },    }  ),);