如何将变量数据传递给 createFragementContainer

Posted 2023-03-08

【中文标题】如何将变量数据传递给 createFragementContainer

【英文标题】：How to pass a variable data to createFragementContainer

【发布时间】：2018-04-06 13:45:15

【问题描述】：

我正在使用 Relay Modern 构建我的组件，我想将一个变量传递给片段，以便它可以用作我的查询中的 GraphQL 参数。

这是我正在使用的代码：

class Test extends Component 
    static propTypes = 
       userId: PropTypes.string.isRequired
    

    render = () => 

        return (

            <p>User Id: this.props.userId</p>
            <p>User name: this.props.viewer.name
        );
    


export default createFragmentContainer(
    Test,
    graphql`
        fragment Test_viewer on Viewer 
            user(id: $userId)  <<=== The $userId must be the this.props.userId passed
                id
                name
            
        
    `
);

当发出查询时，GraphQL 服务器返回错误提示 Variable \"$userId\" is not defined by operation \"UserQuery\"."。

我在父组件中的查询：

const UserQuery = graphql` 

  query AdminQuery 
    viewer 
      ...Test_viewer
    
  
`

我怎样才能使上面的代码工作？

【参考方案1】：

您需要在查询级别传递您的变量：

const UserQuery = graphql` 
  query AdminQuery($userId: ID!) 
    viewer 
      ...Test_viewer
    
  
`;

在 <QueryRenderer /> 元素上使用此查询时，您还将将变量作为 prop 传递：

<QueryRenderer
  query=UserQuery
  variables=
    userId: 'USER_ID',
  
  // ... others props
/>