0

在编写 GraphQL 查询片段作为 a 的一部分时RelayContainer，我一直在努力解决如何在某些情况下设置查询变量。文档中概述的基础知识非常简单。但是考虑到这些查询的静态特性以及 a 如何RelayContainer是高阶 React 组件，当查询所需的输入是来自外部源（例如 Redux 存储）的对象时，我不确定处理这个问题的最佳方法。在组件加载之前，我没有任何方法从该存储中检索数据，因此作为一种解决方法，我一直在使用该@include指令并在组件加载后将就绪变量设置为 true：

class ListData extends React.Component {

  // ... proptypes 

  componentWillMount() {
    const { listDataInfo } = this.context.store.getState(); // Retrieve from Redux store

    this.props.relay.setVariables({
      input: {
        id: listDataInfo.id,
        user: listDataInfo.user
      },
      inputReady: true,
    });

    // The query will now execute and fetch all the data
  }

  render() {
    return (
      {/* view */}
    )
  }
}

export default Relay.createContainer(ListData, {
  initialVariables: {
    input: null,
    inputReady: false,
  },
  fragments: {
    listData: () => Relay.QL`
      fragment on ListDataQuery {
        listData(input: $input) @include(if: $inputReady) {
          city
          state
          zip
          phone
        }
      }
    `,
  },
});

最后，这按预期工作，但我担心这更像是一种黑客行为，并且我错过了 Relay 应该如何处理查询变量的重要信息。有一个更好的方法吗？prepareVariables看起来很有用，但我仍然无法访问我的数据存储。这是我明显的选择：

  1. 保持原样
  2. 将其转换为将在组件生命周期方法中执行的突变。我宁愿不这样做，因为它会删除与组件的数据绑定。
  3. 使用自定义RelayNetworkLayer（可以访问我的商店）来拦截我的查询并从那里的外部商店设置变量。这也感觉像一个黑客。
4

1 回答 1

0

我发现这个要点完全符合我的要求。它允许您通过@container带有属性的装饰器传入 redux 状态变量variablesFromState。本质上，它将返回标准中继容器（如果variablesFromState未设置）或包装在 reduxProvider包装器中的中继容器，其中传入了 redux 存储实例。

于 2016-12-12T16:24:27.157 回答