reactjs - 如何将 GraphQL 查询结果作为道具传递给另一个组件 - react-apollo

Question

我有一个包装器，它根据teamName参数查询 mongodb 集合以获取文档 ID。我想将此文档 ID 传递给另一个组件。我不太确定如何做到这一点。这是我到目前为止所拥有的：

包装：

import React, { Component } from 'react';
import { gql } from 'apollo-boost';
import { Query } from 'react-apollo';

export const GET_TEAM_REGISTRATION_ID = gql`
    query($teamName: String!) {
        getTeamRegistrationID(teamName: $teamName) {
            _id
        }
    }
`;

const withTeamRegistrationID = Component => props => {

    return (
        <Query query={GET_TEAM_REGISTRATION_ID}>
            {({ loading, data }) => {

                return (
                    <Component getTeamRegistrationIDLoading={loading} getTeamRegistrationID={data && data.getTeamRegistrationID} {...props} />
                );
            }}
        </Query>
    );
};

export default withTeamRegistrationID;

零件：

@withTeamRegistrationID
export class FormPlayerDetails extends Component {

    render() { 
        console.log(this.props); 
}

我有两个问题：1）如何teamName在组件中传递参数，2）如何将查询结果作为道具传递给另一个组件？我想做类似的事情this.props.getTeamRegistrationID

标签： reactjsgraphqlapolloreact-apollo