如何将变量传递给GraphQL查询？

让我们假设我有以下GraphQL查询反应阿波罗如何将变量传递给GraphQL查询？

const CurrentUserForLayout = gql` 
    query CurrentUserForLayout($avatarID: Int!) { 
    currentUser { 
     avatar_url(avatarID: $avatarID) 
    } 
    } 
`; 

const ProfileWithData = graphql(CurrentUserForLayout, { 
    options: { variables: { avatarID: 1 } }, 
})(Profile);

现在，如果我想让我的阵营组成部分Profile改变avatarID，

我会怎么做呢？

我是新来的反应，GraphQl，我真的不明白这里的连接：

graphql(CurrentUserForLayout, { 
     options: { variables: { avatarID: 1 } }, 
    })(Profile);

我真的需要围绕ProfileWithData 另一个父组件到另一个avatarID传递给查询？但是，如果ID由Profile组件操作，那么如何让Parent组件知道？

来源

2016-12-31 henk

到目前为止，我知道两种可能的方法。

第一个已经在问题中说明了。这些变量同时是ProfileWithData的道具。所以你需要找到一种方法来改变道具并重新渲染组件。这通常是通过父组件实现的。所以通常你不要改变ProfileWithData中的变量。该组件只能用于显示目的。但是，这并不是说它不能完成。您可以将父组件的方法传递给子代以操纵父代的状态。这将重新渲染这两个组件并使用新的道具/变量渲染ProfileWithData。

第二个的做法是从ProfileWithData组件内部查询。然后您可以使用状态从组件内部操作变量。要做到这一点的方法可以发现here

您可以通过使用 withApollo高阶成分传递到阿波罗客户参考做到这一点，如记录在这里： http://dev.apollodata.com/react/higher-order-components.html#withApollo

然后，您可以请拨打client.query传递对象，如下所示：
class MyComponent extends React.Component { 
     runQuery() { 
     this.props.client.query({ 
      query: gql`...`, 
      variables: { ... }, 
     }); 
     } 

     render() { ... } 
    } 

    withApollo(MyComponent); 

来源

2017-11-19 14:22:07 henk

您的ProfileWithData组件在呈现特定用户的头像方面做得很好。管理当前显示的虚拟角色组件的变化不是该组件的责任。

一种方法是添加从父组件传递的新子道路avatarId。然后，你需要写：

graphql(CurrentUserForLayout, { 
    options: (ownProps) => ({ 
    variables: { 
     id: ownProps.avatarId 
    } 
    }) 
})(Profile);

如果您熟悉react-router，另一种方法是使用路由参数来确定的化身ID。您将需要调整的graphql调用是这样的：

graphql(CurrentUserForLayout, { 
    options: (ownProps) => ({ 
    variables: { 
     id: ownProps.params.avatarId 
    } 
    }) 
})(Profile);

要了解更多有关查询变量的这样的使用情况，您可以检查React Track of Learn Apollo。

来源

2017-01-03 02:10:10 marktani

如何将变量传递给GraphQL查询？

回答

相关问题