How to update the Redux store after Apollo GraphQL query returns : <p>I'm fetching a list of data with the <code>graphql</code> HOC provided by react apollo. E.g.:</p>

<pre><code>const fetchList = graphql(
  dataListQuery, {
    options: ({ listId }) =&gt; ({
      variables: {
        listId,
      },
    }),
    props: ({ data: { loading, dataList } }) =&gt; {
      return {
        loading,
        list: dataList,
      };
    }
  }
);
</code></pre>

<p>I'm displaying the list in a controlled radio button group and I need to select one of the items by default. The <code>id</code> of the selected item is kept in the Redux store.</p>

<p>So, the question is how to update the Redux store (i.e. set the <code>selectedItem</code>) after the query successfully returns?</p>

<p>Some options that came to my mind:</p>

<h2>Option 1</h2>

<p>Should I listen for <code>APOLLO_QUERY_RESULT</code> actions in my Redux reducer? But that is kind of awkward because then I would need to listen to both <code>APOLLO_QUERY_RESULT</code> and <code>APOLLO_QUERY_RESULT_CLIENT</code> if the query already ran before. And also the <code>operationName</code> prop is only present in the <code>APOLLO_QUERY_RESULT</code> action and not in <code>APOLLO_QUERY_RESULT_CLIENT</code> action. So i would need to dissect every <code>APOLLO_QUERY_RESULT_CLIENT</code> action to know where that came from. Isn't there an easy and straight forward way to identify query result actions?</p>

<h2>Option 2</h2>

<p>Should I dispatch a separate action like <code>SELECT_LIST_ITEM</code> in <code>componentWillReceiveProps</code> e.g (using <a href="https://github.com/acdlite/recompose" rel="noreferrer">recompose</a>):</p>

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

<h2>Option 3</h2>

<p>Should I make use of the Apollo client directly by injecting it with <code>withApollo</code> and then dispatch my action with <code>client.query(...).then(result =&gt; { /* some logic */ selectItem(...)})</code>. But then I would loose all the benefits of the react-apollo integration, so not really an option.</p>

<h2>Option 4</h2>

<p>Should I not update the Redux store at all after the query returns? Because I could also just implement a selector that returns the <code>selectedItem</code> if it is set and if not it tries to derive it by browsing through the <code>apollo</code> part of the store.</p>

<p>None of my options satisfy me. So, how would I do that right?</p>
