score:1

my solution was to pass the refetch method of the query component to the form component and call refetch() on completion of the mutation.

in the parent component:

<query query={invoices_query} variables={{ orderby: 'date_desc' }}>
    {({ data, loading, refetch }) => {
      if (loading) return <loading />;

inside the form component:

<mutation mutation={create_invoice}
      oncompleted={() => {
        this.props.invoicesubmitted();
        this.props.refetch();
      }}
    >

score:3

i believe that the query component render prop has a refetch method. you can then pass this down and call it as needed.

<query query={invoices_query} variables={{ orderby: 'date_desc' }} >
  {({ data, loading, refetch }) => {
    ...
    <form onsubmit={() => refetch()} />
    ...
  }}
</query> 

https://www.apollographql.com/docs/react/data/queries/#refetching


Related Query

More Query from same tag