Question

我正在尝试使用来自graphql查询的日期来构建组件，但是如果创建组件时props中没有可用的变量，则无法看到如何动态地提供变量。例如。我有：-

class UsageComponent extends Component {
    render() {
        const params = this.queryStringParse(window.location.href);
        const queryStringImageId = params.id;

        const imageDetailsResults = this.props.getImageDetails.imageByImageId

        (etc...)
    }
}



const GET_IMAGE_DETAILS_QUERY = gql`
    query getImageDetails($imageId: Int!){
        imageByImageId(imageId:$imageId) {
            filename
            originalFilename
            width
            height
            description
            (etc...)
        }
    }
`;


export default compose(
        graphql(GET_IMAGE_DETAILS_QUERY, {name: "getImageDetails", options: props => { return { variables: { imageId: 123456 }}; }}),
        graphql(GET_PUBLICATIONS_QUERY, {name: "getPublications"})
)(ImageBrowser);

哪个工作正常。即填充了imageDetailsResults，随后我可以在render函数中使用数据。

但是我希望能够用在组件render中获得的queryStringImageId值替换组成的graphql中的那个硬设置“ imageId：123456”。

当我从重定向的URL进入此组件页面时，我认为我无法将其设置为props值：-

<Switch>
    <AuthRoute path="/image" component={ImageBrowser} token={token} />
</Switch>

任何建议将不胜感激！

Answer 1

您可能正在寻找一种使用/image/123456之类的网址的方法。

使用react-router-dom，您可以使用param定义路由：

    <AuthRoute path="/image/:id" component={ImageBrowser} token={token} />

通过这种方式，组件可以传递路由器的prop，在这种情况下，match.params.id ...与最终的参数传递只有一步之遥：

export default compose(
    graphql(GET_IMAGE_DETAILS_QUERY, {
      name: "getImageDetails", 
      options: props => { 
        return { variables: { imageId: props.match.params.id }};
      }}),
    graphql(GET_PUBLICATIONS_QUERY, {name: "getPublications"})
)(ImageBrowser);

如何在React中将URL querystring变量动态传递给组合的graphql查询？

1 个答案: