title: How to refresh graphql query in parent component after a form is submitted in a child component?
body: <p>My attempt below is not causing the INVOICE_QUERY to be fetched or the Table component to be re-rendered.</p>
  
  <p>A snapshot of the parent's Query component:</p>
  
  <pre><code>&lt;Query query={INVOICES_QUERY} variables={{ orderBy: 'date_DESC' }} &gt;
       {({ data, loading }) =&gt; {
       if (loading) return &lt;Loading /&gt;;
  
       return (
        &lt;Wrapper&gt;
          &lt;Form/&gt; 
          &lt;Table invoices={data.invoices}/&gt;
        &lt;/Wrapper&gt;
     ):
   }}
  &lt;/Query&gt;
  </code></pre>
  
  <p>A snapshot of the child's Mutation component:</p>
  
  <pre><code> &lt;Mutation mutation={CREATE_INVOICE}
     refetchQueries={[
      {
        query: INVOICES_QUERY,
        variables: {
          orderBy: 'date_DESC',
         },
       },
     ]} 
     awaitRefetchQueries
      &gt;
        {(createInvoice, { error, loading, data }) =&gt; (
          &lt;Formik
            render={formikProps =&gt; (
              &lt;InvoiceForm
                loading={loading}
                error={error}
                {...formikProps}
              /&gt;
            )}
            onSubmit={(values, actions) =&gt; this.handleSubmit(values, actions, createInvoice)}
            initialValues={this.initialValues}
          /&gt;
        )}
      &lt;/Mutation&gt;  
  </code></pre>
  
  <p>The parent component displays a form for submitting invoices and a table that shows a list of invoices that have been submitted. When a new form is submitted in the Form component (child 1), executing a graphql Mutation, I would like the INVOICES_QUERY graphql query to refresh so that the Table component (child 2) displays the updated list of invoices. Thank you!                   </p>