Question

我正在使用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
    }
  }
`

如何使上面的代码正常工作？

Answer 1

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

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

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

传递

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

如何将变量数据传递给createFragementContainer

1 个答案: