CODEWITHSUNDEEP
reduxreact-apollo
kindoflike
kindoflike

Reputation: 487

Dispatch redux action after apollo-react query

I want to dispatch a redux action, right after a query finishes. – where would be the right place to do this?

here I am keeping a reference to the refetch function, so that I can easily update the view with the most recent data at a later point.

export default graphql(
    allFilesQuery,
    {
        props: ({ ownProps, data }) => {
            const { dispatch } = ownProps;
            dispatch(
                setRefetchAllFiles(data.refetch)
            );
            return {
                data,
                ...ownProps,
            };
        }
    }
)(FileListComponent);

while this works, I also get a warning, saying:

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

Upvotes: 4

Views: 687

Answers (1)

Sebastien Lorber
Sebastien Lorber

Reputation: 92112

The props function is supposed to be pure and return props to inject in component without performing any kind of side effects. Actually you might be able to dispatch in it, by wrapping your dispatch in a setTimeout, but this would be a very bad idea, because the props function is run everytime your component re-renders and will likely trigger many unwanted dispatches. It could even lead to infinite loops if your dispatch makes the component re-renders.

The correct place to do what you want is in your component. You can use componentWillReceiveProps (or other lifecycle), and compare previous props to next props trigger a dispatch when appropriate. You can use data.networkStatus or data.loading for that.

Upvotes: 1

Related Questions