Question

我在名为Student.tsx的文件中有这个Relay片段容器（此问题的排除html ）

const StudentFragContainer = createFragmentContainer(withRouter(Student), {
  viewer: graphql`
    fragment Student_viewer on Student {
      id
      firstName
      lastName
      results {
        score
      }
    }`
  }
);

然后将此组件呈现在名为Students.tsx的文件中

像上面这样在其数据需求片段中使用上述片段

const StudentsPaginationContainer = createPaginationContainer(
  withRouter(Students), {
    viewer: graphql`
      fragment Students_viewer on School @argumentDefinitions(
        count: { type: "Int", defaultValue: 10 }
        after: { type: "String", defaultValue: "" }) {

      students(first: $count, after: $cursor) @connection(key: "Students_students") {
        edges {
          node {
            id
            ...Student_viewer
          }
        }
      }
    } 
  `
 },
{
  direction: "forward",
  getFragmentVariables(prevVars, totalCount) {
    return {
      ...prevVars,
      count: totalCount
    };
  },
  getVariables(_props, { count, cursor }, _fragmentVariables) {
    return {
      count,
      cursor
    };
  },
  query
 });

因为这是我的中继片段层次结构的根，所以我还在与上面的片段直接相同的文件中添加了以下查询。我这样做是为了可以使用中继的StudentsPaginationContainer

渲染QueryRenderer

这是它的样子

const query = graphql`
  query StudentsQuery($id: ID!, $count: Int, $cursor: String) {
    viewer: node(id: $id) {
      ... on School {
        name
        registeredDate
        ...Students_viewer @arguments(count: $count, after: $cursor)
      }
    }
  }
`;

然后我像这样渲染

<QueryRenderer
  environment={environment}
  query={query}
  variables={combinedVariables}
  // removed if error else if props, in this example
  render={({ error, props, retry }) => {
    return <Container
             environment={environment}
             {...moduleProps}
             {...props}
          />
        );
      }
     }
    }
      />

这里的一切都按预期工作。唯一奇怪的是，当我在Student组件的render方法中记录道具时，数据

id
firstName
lastName
results {
  score
}

它声明为其渲染要求的

仍然被掩盖，结果我得到警告

警告：RelayModernSelector：期望的对象包含片段Student_viewer的数据，得到`{“ students”：{“ edges”：[{“ node”： {“ id”：“ U3R1ZGVudDoyNzA =”，“ __ typename”：“学生”，“ __片段”： {“ Student_viewer”：{}}，“ __ id”：“ U3R1ZGVudDoyNzA =”，“ __ fragmentOwner”： {“ fragment”：{“ dataID”：“ client：root”，“ node”：

问题：

为什么仍然在明确声明为要求的级别屏蔽数据？
我对Relay的工作方式有什么误解
如何解决此问题？

PS：为了有趣，在浏览器的“网络”选项卡中，graphql查询已成功执行并解析了正确的数据

为什么片段数据会被屏蔽？

0 个答案: