Refetch queries in react-native with graphql

import React from 'react';
import PropTypes from 'prop-types';
import { compose, graphql } from 'react-apollo';
import { ucfirst } from 'utils/string';

import CustomersTable from 'components/Customer/CustomersTable';
import Typography from 'material-ui/Typography';

import Loading from 'components/Loading/Loading';

import GET_CUSTOMERS_PAGINATED_QUERY from './getCustomersPaginated.graphql';
import GET_CUSTOMERS_PAGINATED_COUNT_QUERY from './getCustomersPaginatedCount.graphql';


const getCustomersPaginatedCountOptions = {
  name: 'customersPaginatedCount',
  options({ variables }) {
    return {
      variables: variables,
      fetchPolicy: 'network-only',
    };
  },
  props({ customersPaginatedCount }) {
    return { customersPaginatedCount: customersPaginatedCount };
  },
};
const getCustomersPaginatedOptions = {
  name: 'customersPaginated',
  options({ variables }) {
    return {
      variables: variables,
      fetchPolicy: 'network-only',
    };
  },
  props({ customersPaginated }) {
    return { customersPaginated: customersPaginated };
  },
};

@compose(
  graphql(GET_CUSTOMERS_PAGINATED_QUERY, getCustomersPaginatedOptions),
  graphql(GET_CUSTOMERS_PAGINATED_COUNT_QUERY, getCustomersPaginatedCountOptions),
)
export default class CustomersTableContainer extends React.PureComponent {

  state = {
    currentOnFilterChangeTimeoutID: null,
  };

  constructor(props) {
    super(props);

    this.onCurrentPageChange = this.onCurrentPageChange.bind(this);
    this.onSortingChange = this.onSortingChange.bind(this);
    this.onFiltersChange = this.onFiltersChange.bind(this);
  }

  onCurrentPageChange(newPage) {
    const { onChange, variables } = this.props;

    onChange({
      currentPage: newPage,
      'offset': newPage * variables.limit,
    });
  }

  onFiltersChange(args) {
    clearTimeout(this.state.currentOnFilterChangeTimeoutID);

    const newCurrentOnFilterChangeTimeoutID = setTimeout(() => {
      const { onChange, variables } = this.props;

      const newVariables = Object.assign({}, variables);

      if (args.length > 0) {
        for ( const i in args ) {
          newVariables['filter' + ucfirst(args[i].columnName)] = args[i].value;
        }
      } else {
        for ( const i in newVariables ) {
          if (i.substr(0, 6) === 'filter') newVariables[i] = null;
        }
      }

      onChange({
        ...newVariables,
        'currentPage': 0,
        'offset': 0 * variables.limit,
      });
    }, 1000);

    this.setState({ currentOnFilterChangeTimeoutID: newCurrentOnFilterChangeTimeoutID });
  }

  render () {
    const { variables, customersPaginated, customersPaginatedCount } = this.props;

    if (customersPaginated.error) console.error( customersPaginated.error );
    if (customersPaginatedCount.error) console.error( customersPaginatedCount.error );


    return (
      <div>
        {(customersPaginated.error || customersPaginatedCount.error) && (
          <Typography color="error" gutterBottom>
            Une erreur est survenue.
          </Typography>
        )}
        <div>
          <CustomersTable
            customers={customersPaginated.customersPaginated}
            currentPage={variables.currentPage}
            onCurrentPageChange={this.onCurrentPageChange}
            onSortingChange={this.onSortingChange}
            onFiltersChange={this.onFiltersChange}
            pageSize={variables.pageSize}
            totalCount={customersPaginatedCount.customersPaginatedCount || 0}
          />
          {(customersPaginated.loading || customersPaginatedCount.loading) && <Loading />}
        </div>
      </div>
    );
  }

  static propTypes = {
    customersPaginated: PropTypes.object.isRequired,
    customersPaginatedCount: PropTypes.object.isRequired,
    variables: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
  };
}

import React from 'react';

import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import AddIcon from 'material-ui-icons/Add';

import CustomersTableContainer from 'containers/Customer/CustomersTableContainer';

export default class CustomersPage extends React.PureComponent {

  constructor(props) {
    super(props);

    this.state = {
      customersTableVariables: {
        filterId: null,
        filterSiren: null,
        filterName: null,
        filterEmail: null,
        pageSize: 10,
        currentPage: 0,
        offset: 0,
        limit: 10,
      },
    };

    this.onCustomersChange = this.onCustomersChange.bind(this);
  }

  onCustomersChange (newVariables) {
    this.setState({
      customersTableVariables: Object.assign({}, this.state.customersTableVariables, newVariables)
    });
  }

  render () {
    const { customersTableVariables } = this.state;
    return (
      <div>
        <Typography align="right">
          <Button fab color="primary" aria-label="add" href="/customer/new">
            <AddIcon />
          </Button>
        </Typography>
        <Typography type="title" gutterBottom>
          Clients/Prospects
        </Typography>
        <CustomersTableContainer variables={customersTableVariables} onChange={this.onCustomersChange} />
      </div>
    );
  }
}

export const isAuth = compose(
  graphql(GET_ME, {
    options: {
      fetchPolicy: 'cache-first',
      errorPolicy: 'ignore',
    },
  })
);

this.willFocusSubscription = this.props.navigation.addListener(
    "willFocus",
    payload => {
        this.fetchData()
    }
)

<FlatList
    data={this.state.data}
    onRefresh={() => {
        this.onRefresh()
    }}
    refreshing={this.state.refreshing}
/>