Side-effects with the Refetch equivalent of Redux's "action creators"?

[neezer]

Related to the section on Posting + Refreshing Data, I'd like to push a new browser state after an update action. In my app, there is no separate view for an "edit" action: users can click an edit button, and the row reformats to inputs. My problem lies in redirecting back to the list view after the update action completes.

I have it working with the following:

import React, { Component } from 'react';
import { connect } from 'react-refetch';
import { authHeader } from 'lib';

class List extends Component {

  // ...

  componentWillReceiveProps(nextProps) {
    const { fetchPref: nextFetchPref } = nextProps;
    const { fetchPref } = this.props;

    if (fetchPref && nextFetchPref && fetchPref.pending && nextFetchPref.fulfilled) {
      this.context.router.push({ pathname: '/admin/prefs' });
    }
  }

  // ...

  render() {
    // omitting the rest of the JSX for the sake of brevity, but this is actually
    // a table where each row has an edit button that invokes `patchPref`
    // with the `id` for the row and the `data` from user input
    return (
      <a onClick={this.props.patchPref.bind(this, id, data)}>edit</a>
    );
  }
}

export default connect((props) => ({
  fetchPrefs: {
    url: '/api/prefs',
    headers: authHeader(),
  },
  patchPref: (id, data) => ({
    fetchPref: {
      url: `/api/prefs/${id}`,
      method: 'PATCH',
      body: JSON.stringify(data),
      headers: authHeader(),
      andThen: () => ({
        fetchPrefs: {
          url: '/api/prefs',
          headers: authHeader(),
          force: true,
          refreshing: true,
        }
      }),
    }
  }),
}))(List);

As you can see, I've had to do some this.props/nextProps checking in componentWillReceiveProps to support the behavior I'm after.

What I'd _like_ to do is define a then clause on patchPref so that I could invoke it along the lines of:

this.props.patchPref(id, data).then(() => {
  this.context.router.push({ pathname: '/admin/prefs' });
})

The intention being:

Do all the react-refetch stuff defined in connect for patchPref, then do this other thing.

That would allow me to completely delete componentWillReceiveProps.

As the return of this.props.patchPref() is undefined, and as then: and andThen: don't have access to this.context, it doesn't seem like my desired solution is possible currently.

I don't know if such a thing would be possible, or if there is another/cleaner way of accomplishing the same behavior with the library as it is now.

Was hoping to hear y'alls thoughts on this.

[eyalw]

Hey @neezer
this might be a duplicate of #58 ?

[neezer]

Ahh, you're right @eyalw. Missed that. My bad. Will pick up the conversation there.