中继 - 在查询之前设置变量

Posted 2023-03-08

【中文标题】中继 - 在查询之前设置变量

【英文标题】：Relay - set variable before query

【发布时间】：2016-06-12 10:26:16

【问题描述】：

我目前正在处理一个页面，该页面显示特定用户的一组特定“任务”的状态。为了获取数据，我有以下中继容器：

export default Relay.createContainer(TaskReview, 
  initialVariables: 
    limit: Number.MAX_SAFE_INTEGER,
    studentId: null,
  ,
  fragments: 
    task: () => Relay.QL`
      fragment on Task 
        id,
        title,
        instruction,
        end_date,
        taskDataList(first: $limit, type: "subTasks", member: $studentId) 
          edges 
            node 
              id,
              answer,
              completion_date,
            
          
        ,
        ...

为了定义我想从哪个用户获取数据，我使用：

componentWillMount = () => 
  let relay = this.props;
  relay.setVariables(
    studentId: this.props.member.id
  );

但是，这里的问题是查询首先使用null 执行，如initialVariables 中定义的那样。我的后端实现有它，如果studentId 为NULL，那么它返回所有成员的数据。

结果是上面的查询执行了两次，第一次是所有成员，第二次是给定的memberId。

这与我的 componentWillUpdate 中的其他内容混淆了。无论如何我可以传递这个变量并且只在第一个查询中获取该成员的数据吗？

谢谢。

【参考方案1】：

通过将变量向下传递到路由，为您的应用提供这些初始条件。

class TaskReviewRoute extends Relay.Route 
  static paramDefinitions = 
    studentId: required: true,
  ;
  static queries = 
    task: () => Relay.QL`query  ... `,
  ;
  static routeName = 'TaskReviewRoute';


<Relay.RootContainer
  Container=TaskReview
  route=new TaskReviewRoute(studentId: '123')
/>

【讨论】：

您能否详细解释一下您的答案，这将如何解决 OP 的问题？在初始加载时，studentId 将为 null，因此，请求将 null 值发送到后端以获取数据。这就是问题所在。

如果你通过我上面描述的路由将studentId传递给中继容器，并且删除componentWillMount逻辑，那么studentId将是非-null 从一开始。将initialVariables 视为占位符/默认值，以防某个值没有从父级作为道具传递下来（例如，由于上述路由参数的存在，由Relay.RootContainer 传递）。

如果studentId 事先不知道并且不能传递给路由的初始化器怎么办？我有一个值通过路由器的params 传递的情况，所以我需要另一种方法来做到这一点

我得看你的路由器代码才能详细告诉你，但基本前提是每次路由参数改变时重新渲染RootContainer，构造并传递一个新的TaskReviewRoute。假设params 在范围内并来自您的路由器：new TaskReviewRoute(studentId: params.studentId)。

总而言之，我一定是错过了什么。您已经说过您没有预先设置studentId，但同时您将member.id 拉出this.props，这意味着您肯定必须预先设置它。我认为我们需要查看更多代码。