javascript - 如何将变量数据传递给createFragmentContainer

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 服务器返回错误，指出变量\"$userId\"未由操作\"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
/>