我的渲染功能
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>
}
</>
);
}
我正在使用具有
refetch
方法的阿波罗数据获取程序。我需要从Query
外部调用它。我该怎么做呢?
最佳答案
您可以在不同的回调中传递该函数。我在translateFormatter
中添加了一个装饰器,以使其无法立即调用:
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>
}
</>
);
}
关于javascript - 从外部使用Apollo GraphQL refetch方法,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54665934/