在没有(新)变量的 Relay Modern Refetch Container 中强制重新获取
Force refetch in Relay Modern RefetchContainer with no (new) variables
我正在尝试找出 how/if 是否可以在不传递(新)变量的情况下在 Relay Modern RefreshContainer
中触发刷新?
我正在寻找在 React Native 列表上实现良好的下拉刷新的最佳方法,它应该只是重新获取原始查询 - 不需要变量?
根据文档 (https://facebook.github.io/relay/docs/api-cheatsheet.html) 这应该可以使用
this.props.relay.refetch({}, callback, {force: true})
但我收到一条错误消息 "undefined is not an object ('evaluating taggedNode.modern')"
如果我使用普通的旧 FragmentContainer
,查询工作得很好,但我只是想要一个简单的下拉刷新功能:-)
编辑
为清楚起见添加更多代码。还更新了调用以反映对 API 的更改,其中包括渲染变量,传递 null
class HistoryList extends React.PureComponent<void, Props, State> {
state = { refreshing: false };
_renderRow = ({ item }) => {
return <HistoryListItem item={item.node} />;
};
_renderHeader = ({ section }) => {
return (
<Text style={[cs.breadText, _styles.sectionHeader]}>
{section.title}
</Text>
);
};
_onRefresh = () => {
this.setState({ refreshing: true });
this.props.relay.refetch({}, null, this._onRefreshDone(), { force: true });
};
_onRefreshDone = () => {
this.setState({ refreshing: false });
};
_sortDataIntoSections = (edges: Array<Node>) => {
return _.chain(edges)
.groupBy(element => {
return moment(element.node.huntDate).format('MMMM YYYY');
})
.map((data, key) => {
return { title: key, data: data };
})
.value();
};
render() {
return (
<View style={_styles.container}>
<SectionList
renderSectionHeader={this._renderHeader}
sections={this._sortDataIntoSections(
this.props.entries.allJournalEntries.edges
)}
renderItem={this._renderRow}
keyExtractor={(item, index) => item.node.__id}
onRefresh={this._onRefresh}
refreshing={this.state.refreshing}
/>
</View>
);
}
}
export default createRefetchContainer(
HistoryList,
graphql`
fragment HistoryList_entries on Viewer {
allJournalEntries(orderBy: huntDate_DESC) {
count
edges {
node {
huntDate
...HistoryListItem_item
}
}
}
}
`
);
似乎 this.props.relay.refetch
的参数已更改为 refetch(refetchVariables, renderVariables, callback, options)
(在 https://facebook.github.io/relay/docs/refetch-container.html 中)并且备忘单已过时。
我不确定这在哪个版本中发生了变化,但您可以尝试一下并将您的代码更改为:
this.props.relay.refetch({}, null, callback, {force: true})
robrichard 在 github 找到了解决方案。
我遗漏了 RefetchContainer
的第三个参数,这是在重新获取时执行的查询。这与@zetavg 的建议相结合是所需要的。
导出的模块现在看起来像这样:
export default createRefetchContainer(
HistoryList,
{
entries: graphql`
fragment HistoryList_entries on Viewer {
allJournalEntries(orderBy: huntDate_DESC) {
count
edges {
node {
huntDate
...HistoryListItem_item
}
}
}
}
`
},
graphql`
query HistoryListRefetchQuery {
viewer {
...HistoryList_entries
}
}
`
);
我正在尝试找出 how/if 是否可以在不传递(新)变量的情况下在 Relay Modern RefreshContainer
中触发刷新?
我正在寻找在 React Native 列表上实现良好的下拉刷新的最佳方法,它应该只是重新获取原始查询 - 不需要变量?
根据文档 (https://facebook.github.io/relay/docs/api-cheatsheet.html) 这应该可以使用
this.props.relay.refetch({}, callback, {force: true})
但我收到一条错误消息 "undefined is not an object ('evaluating taggedNode.modern')"
如果我使用普通的旧 FragmentContainer
,查询工作得很好,但我只是想要一个简单的下拉刷新功能:-)
编辑 为清楚起见添加更多代码。还更新了调用以反映对 API 的更改,其中包括渲染变量,传递 null
class HistoryList extends React.PureComponent<void, Props, State> {
state = { refreshing: false };
_renderRow = ({ item }) => {
return <HistoryListItem item={item.node} />;
};
_renderHeader = ({ section }) => {
return (
<Text style={[cs.breadText, _styles.sectionHeader]}>
{section.title}
</Text>
);
};
_onRefresh = () => {
this.setState({ refreshing: true });
this.props.relay.refetch({}, null, this._onRefreshDone(), { force: true });
};
_onRefreshDone = () => {
this.setState({ refreshing: false });
};
_sortDataIntoSections = (edges: Array<Node>) => {
return _.chain(edges)
.groupBy(element => {
return moment(element.node.huntDate).format('MMMM YYYY');
})
.map((data, key) => {
return { title: key, data: data };
})
.value();
};
render() {
return (
<View style={_styles.container}>
<SectionList
renderSectionHeader={this._renderHeader}
sections={this._sortDataIntoSections(
this.props.entries.allJournalEntries.edges
)}
renderItem={this._renderRow}
keyExtractor={(item, index) => item.node.__id}
onRefresh={this._onRefresh}
refreshing={this.state.refreshing}
/>
</View>
);
}
}
export default createRefetchContainer(
HistoryList,
graphql`
fragment HistoryList_entries on Viewer {
allJournalEntries(orderBy: huntDate_DESC) {
count
edges {
node {
huntDate
...HistoryListItem_item
}
}
}
}
`
);
似乎 this.props.relay.refetch
的参数已更改为 refetch(refetchVariables, renderVariables, callback, options)
(在 https://facebook.github.io/relay/docs/refetch-container.html 中)并且备忘单已过时。
我不确定这在哪个版本中发生了变化,但您可以尝试一下并将您的代码更改为:
this.props.relay.refetch({}, null, callback, {force: true})
robrichard 在 github 找到了解决方案。
我遗漏了 RefetchContainer
的第三个参数,这是在重新获取时执行的查询。这与@zetavg 的建议相结合是所需要的。
导出的模块现在看起来像这样:
export default createRefetchContainer(
HistoryList,
{
entries: graphql`
fragment HistoryList_entries on Viewer {
allJournalEntries(orderBy: huntDate_DESC) {
count
edges {
node {
huntDate
...HistoryListItem_item
}
}
}
}
`
},
graphql`
query HistoryListRefetchQuery {
viewer {
...HistoryList_entries
}
}
`
);