Jesper We Jesper We - 4 months ago 48
React JSX Question

How to structure a component that receives a prop from redux, makes query and saves result back to redux?

In my Redux store I am storing an accountId. This is stored by the

component after a successful authorization. The
component only receives the
(inside a JWT), not the full Account object with all its properties.

can also be modified from by other actions from other components.

When the
gets modified for whatever reason I want to fire a new GraphQL query for the full Account document, and store that in Redux too.

To this end I have created a component. I initially put the Redux dispatch pieces in
, but then it does not work (it does not receive the completed GraphQL query results). If I put it in
like below, it works:

import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { message } from 'antd';

// This service receives an accountId prop from Redux, and returns the complete account record
// to Redux once the graphQL query completes.

class AccountService extends React.Component {

render() {
if( !this.props.accountId ) {
this.props.onAccount( null ); // Logged out -> Redux
} else {
if( && ) {
console.log( );
message.error(, 20 );

if( && === false ) {
if( ) {
let account = {
// ...etc.
this.props.onAccount( account ); // -> Redux dispatch

return ( null );

const accountQuery = gql`
query ($accountId: Int!) {accountById(id:$accountId) {
// ...etc.

export default graphql( accountQuery, {
options: ( { accountId } ) => ({ variables: { accountId: accountId || 0 } }),
} )( AccountService );

The above component works as intended. But it throws a warning when I call the dispatch:

Warning: setState(...): Cannot update during an existing state transition

So apparently I m not doing things the right way. How can I structure this so that I get the results and am able to store them back into Redux without warning?


You could try putting the logic in componentDidUpdate if the only issue is the warning.