react-apolloを使用してgraphqlクエリに変数を渡す

Question

graphqlクエリに変数オプションを渡す際に問題があります。 console.log（ownProps.match.params.id）の場合、正しいIDを取得します。

しかしイムは、このエラーを取得：

Error: The operation 'selectCustomer' wrapping 'Apollo(Apollo(withRouter(Consumer)))' is expecting a variable: 'id' but it was not found in the props passed to 'Apollo(Apollo(Apollo(withRouter(Consumer))))'

輸出

const ConsumerWithMutations = graphql(selectCustomer, { 
    name : 'selectCustomer', 
    options: (ownProps) => ({ 
    variables: { 
     id: ownProps.match.params.id 
    } 
    }) 
})(graphql(deleteCustomer, { 
    name: 'deleteCustomer' 
})(withRouter(Consumer))) 

export default graphql(selectCustomer)(ConsumerWithMutations); 

クエリ

const selectCustomer = gql` 
query selectCustomer($id: String!) 
{ 
    consumer(id: $id) { 
    id 
    firstname 
    lastname 
    dateOfBirth 
    ... 

Answer 1

あなたは二度同じクエリHOCを使用してコンポーネントをラップしようとしています - あなたの定義内で初めてConsumerWithMutationsとし、再度輸出明細書の中に入れてください。

エクスポートステートメント内のHOCにオプションを渡さないため、selectCustomerクエリで指定したid変数が見つからないため、取得したエラーが表示されます。

はこれにエクスポート・ステートメントを変更：

export default ConsumerWithMutations; 

、それが動作するはずです。

このように複数のHOCを使用している場合は、composeを利用することを強くおすすめします。コードを読みやすくするのに役立ちます。例hereを確認してください。