在没有（新）变量的 Relay Modern RefetchContainer 中强制重新获取答案

【问题标题】：Force refetch in Relay Modern RefetchContainer with no (new) variables在没有（新）变量的 Relay Modern RefetchContainer 中强制重新获取
【发布时间】：2018-01-03 04:25:49
【问题描述】：

我正在尝试找出如何/是否可以在不传递（新）变量的情况下触发 Relay Modern RefreshContainer 中的刷新？

我正在寻找在 React Native 列表上实现良好的下拉刷新的最佳方法，它应该简单地重新获取原始查询 - 不需要变量？

根据文档 (https://facebook.github.io/relay/docs/api-cheatsheet.html)，这应该可以使用

this.props.relay.refetch({}, callback, {force: true})

但我收到一条错误消息，提示“未定义不是对象（'评估 taggedNode.modern'）”

如果我改用普通的旧 FragmentContainer，查询就可以正常工作，但我只想要一个简单的拉动刷新功能 :-)

编辑为了清楚起见，添加更多代码。还更新了调用以反映对包含渲染变量、传递 null 的 API 的更改

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
          }
        }
      }
    }
  `
);

【问题讨论】：

标签： relay relaymodern

【解决方案1】：

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})

【讨论】：

你是对的！但不幸的是，它也不起作用：-/

【解决方案2】：

robrichar 在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
      }
    }
  `
);

【讨论】：