GraphQLクエリに変数を渡すには？

Question

は、私は、次のGraphQLクエリを持っていると仮定しましょ反応し、アポロ

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

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

を今、私は私のコンポーネントがavatarIDを変更Profileリアクトようにしたい場合は、

私はそれをどのように行うのでしょうか？

私が反応するように新しいとGraphQlと私は本当にここ接続を理解していない：

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

は、私は本当にクエリに別のavatarIDを渡すためにProfileWithData の周りに他の親コンポーネントが必要ですか？しかし、IDがProfileコンポーネントによって操作される場合、どうすればParentコンポーネントにそのことを知らせることができますか？

Answer 1

これまでのところ、私はこれに対する2つの可能なアプローチを知っています。

最初のは既に質問に記載されています。変数は同時にProfileWithDataの小道具です。したがって、小道具を変更してコンポーネントを再レンダリングする方法を見つける必要があります。これは、通常、親コンポーネントで実現されます。したがって、通常はProfileWithDataの変数を変更しないでください。このコンポーネントは、表示目的でのみ使用する必要があります。しかし、これはできないと言っているわけではありません。親の状態を操作するために、親コンポーネントのメソッドを子に渡すことができます。これにより、両方のコンポーネントが再レンダリングされ、ProfileWithDataが新しい小道具/変数にレンダリングされます。

第2ののアプローチは、ProfileWithDataコンポーネントの内側から問い合わせることです。その状態で、コンポーネントの内部から変数を操作することができます。これを行うための方法がここに記載されているようあなたが、 withApollo高次成分を使用したアポロクライアントへの参照を渡すことによってそれを行うことができますhere

見つけることができます： 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); 

Answer 2

あなたのProfileWithDataコンポーネントは、特定のユーザーのアバターをレンダリングするのに良い仕事をします。現在表示されているアバターコンポーネントの変更を管理するのは、このコンポーネントの責任ではありません。

1つの方法は、親コンポーネントから継承される新しい小道具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を確認することができます。