How can I update my component in real time when clicking?

I'm working on a ReactJS, Redux, and GraphQL stacks' ReactJS component A.

My dataflow is that when on an another component B a user click on a image a specific function it send some data about a document to fetch on my database on component A via GraphQL.

My difficulty is that when I click on the image my ReactJS render with one step behind. Technically is the GraphQL state which update.

How make the rendering simultaneous to the image clicking, which trigger the query ?

Here my component.js:

import React, { Component } from 'react';
import style from "./Displayer.css";

import client from "apollo-client"
import {graphql, Query} from "react-apollo";
import gql from "graphql-tag";

import equal  from 'deep-equal';

class Displayer extends Component { 

    // some data
    backgroundUrl =  {
    foo
    }

    recipe; // declare the recipe variable in order to handle the reception on data ulteriously 

    // my try to render the component immediatly
    shouldComponentUpdate (nextProps) {
    const currentRecipe = this.props.data.recipe;
    const nextRecipe = nextProps.data.recipe;

    // deep check if the previous values and next values are similars
   // if not, rerender the component
    if (!equal(currentRecipe,  nextRecipe)) {
    if(this.props.data.recipe) { 
        var {title, description} =    this.props.data.recipe
        return this.recipe=  (
            <div className={style.dish_details} >
                <p> Title: {title}   </p>
                <p> Description: {description}  </p>
            </div>
        ) 
        // if there is no recipe data, just display a simple text
        }else{ 
        return this.recipe= <div>  Here details </div>
        }
     // if the values are similars don't rerender the component
    }else {
        return false;
    }
    }

    render() {       
        return ( 
          <div>   
                 // render the recipe
                 {this.recipe}
          </div>
        )
    }
}


// set the query 
const fetchRecipe = gql`
  query recipe($id: String!) { 
        recipe(id: $id){ 
      title 
      description
    }
  }
`;

// bind GraphQL to my component
export default graphql(fetchRecipe, 
        {options(ownProps) {
            return {
              variables: { id : ownProps.id} //ownProps.id allow to recuperate the Redux's id's state, to make the recipe query
            }
}})(Displayer); 

I can't figure out what is wrong. If anybody have an hint, would be great.