Using Apollo GraphQL refetch method from outside

Question

My render function

translateFileAndRefetchQuery = (urn) => {
    translateFile(urn);
    // How do I refetch data from here?
  };

render() {
    const translateFormatter = (cell, row) => {
      return (
        <span>
          <Button
            onClick={() => translateFileAndRefetchQuery(row.urn)}
          >
            Translate
          </Button>
        </span>
      );
    };

    const columns = [
      {
        dataField: 'name',
        text: 'Name',
      },
      {
        dataField: 'lastUpdated',
        text: 'Last updated',
      },
      {
        dataField: 'lastTranslated',
        text: 'Translate',
        formatter: translateFormatter,
      },
    ];

    return (
      <>
        <h3>Models</h3>
        <h4>Root > Plans</h4>

        {this.state.plansFolderUrn != null &&
        <Query query={getProjects()}>
          {(data, refetch) => (
            <>
              <BootstrapTable
                keyField="name"
                data={data.projects}
                columns={columns}
              />
            </>
          )}
        </Query>
        }
      </>
    );
  }

I'm using the apollo data fetcher which have a refetch method. I need to call this from outside the Query.

How do i do this?

Answer 1

You could pass the function around in different callbacks. I added a decorator to translateFormatter to not call it right away :

translateFileAndRefetchQuery = (urn, refetch) => {
    translateFile(urn);
    refetch();
};

render() {
    const translateFormatter = refetch => (cell, row) => {
        return (
            <span>
                <Button
                    onClick={() => translateFileAndRefetchQuery(row.urn, refetch)}
                >
                    Translate
        </Button>
            </span>
        );
    };

    const getColumns = refetch => [
        {
            dataField: 'name',
            text: 'Name',
        },
        {
            dataField: 'lastUpdated',
            text: 'Last updated',
        },
        {
            dataField: 'lastTranslated',
            text: 'Translate',
            formatter: translateFormatter(refetch),
        },
    ];

    return (
        <>
            <h3>Models</h3>
            <h4>Root > Plans</h4>

            {this.state.plansFolderUrn != null &&
                <Query query={getProjects()}>
                    {(data, refetch) => (
                        <>
                            <BootstrapTable
                                keyField="name"
                                data={data.projects}
                                columns={getColumns(refetch)}
                            />
                        </>
                    )}
                </Query>
            }
        </>
    );
}