title: React: An component attribute is not properly storing the data (from a query) that I want
body: <p>I recently started learning react and I have encountered something that I do not understand. So when I declare a component I also declare an attribute in the constructor. Then, after executing the first query (I am using Apollo client - GraphQL ) I want to store the result (which I know that will be always an email) in the attribute declared so I can use it as a parameter in the second query.</p>
  
  <p>The app logic is that I want to show all the orders of a given email, but first I get the email with a query.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>export default class Orders extends Component {
      constructor(){
          super();
          this.email = '';
        }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Query query = { GET_MAIL_QUERY }&gt;
                  {({data, loading}) =&gt; {
                      if (loading) return "Loading...";
                      this.email = data.me.email;
                      return &lt;h1&gt;{this.email}&lt;/h1&gt;
                   }}
  </code></pre>
  
  <p>At this point a header containing the email is returned, so all good. But when I execute the second query  (or try to display the email in the second header for that matter) it seems that the value is not properly stored.</p>
  
  <pre><code>                &lt;/Query&gt;
                  &lt;h1&gt;{this.email}&lt;/h1&gt;
                  &lt;Query query = { GET_ORDERS_QUERY }
                  variables = {{
                      email: this.email
                  }}&gt;
                      {({data, loading}) =&gt; {
                          if (loading) return "Loading...";
                          console.log(data);
                          let orders = data.ordersByEmail.data;
                          console.log(orders);
                          return orders.map(order =&gt;
                              &lt;div&gt;
                                  &lt;h1&gt;{order.date}&lt;/h1&gt;
                                  &lt;h1&gt;{order.price}&lt;/h1&gt;
                                  &lt;h1&gt;{order.conference.conferenceName}&lt;/h1&gt;
                                  &lt;h1&gt;{order.user.email}&lt;/h1&gt;
                                  &lt;br&gt;&lt;/br&gt;
                              &lt;/div&gt;)
                      }}
                  &lt;/Query&gt;
              &lt;/div&gt;
          )
      }
  }
  const GET_MAIL_QUERY = gql`
  query getMyMail{
      me{
        email
      }
    }
  `;  
  
  const GET_ORDERS_QUERY = gql`
  query getOrdersByEmail($email: String!) {
      ordersByEmail(email: $email) {
        data {
          gid
          date
          price
          user {
              email
            }
          conference{
              conferenceName
          }
        }
      }
    }
  `;
  </code></pre>
  
  <p>I would love an explanation for this and maybe a solution (to store a value returned from a query to use it in another)</p>
  
  <p>Thanks in anticipation :)</p>