飾られた反応コンポーネントにgraphQLクエリ変数を渡す方法

Question

アポロにクエリ変数を追加する適切な方法は、どのように反応するのか誰にも分かりますか？私が代わりに手動$nameクエリ変数に渡すの書籍名の文字列を追加しますが、場合、私は仕事に以下のコードを取得することができ、すぐに私はそれを追加して、Invariant Violation: The operation 'data' wrapping 'BookPage' is expecting a variable: 'name' but it was not found in the props passed to 'Apollo(BookPage)'

を試してみて、propTypesのオプションを通じてで名前の変数を渡すよう

私はので、私はそれが他の例よりも少し糖衣構文を持って知っているreactQLパッケージから直接デコレータのための構文を引っ張ったが、それはまだ、クエリ権利のために有効である必要がありますか？

const query = gql` 
    query ($name: String!){ 
    bookByName(name: $name) { 
     id 
    } 
} 
`; 

@graphql(query) 
class BookPage extends React.PureComponent { 
    static propTypes = { 
    options: (props) => { return { variables: { name: "Quantum Mechanics"}}}, 
    data: mergeData({ 
     book: 
     PropTypes.shape({ 
      id: PropTypes.string.isRequired, 
     }), 
    }), 
    } 

    render() { 
    const { data } = this.props; 
    if (data.loading) { 
     return <p>Loading</p> 
    } 
    const { bookByName } = data; 
    const book = bookByName; 

    return (
     <p>book.id</p> 
    ); 
    } 
} 

export default BookPage; 

Answer 1

@graphqlデコレータは、クエリまたは変異のためのオプションを定義二番目のパラメータがあります。

configのオプションの定義と同様です。

だからあなたの場合には、それは次のようになります。私はオプションではなくデコレータの、あなたの方法は素晴らしい仕事propTypesにconfigのことを入れしようとしていた

const query = gql` 
 
    query ($name: String!){ 
 
    bookByName(name: $name) { 
 
     id 
 
    } 
 
} 
 
`; 
 

 
@graphql(query, { 
 
    options: (ownProps) => ({ 
 
    variables: { 
 
     name: ownProps.bookName // ownProps are the props that are added from the parent component 
 
    }, 
 
    })}) 
 
class BookPage extends React.PureComponent { 
 
    static propTypes = { 
 
    bookName: PropTypes.string.isRequired, 
 
    data: mergeData({ 
 
     book: 
 
     PropTypes.shape({ 
 
      id: PropTypes.string.isRequired, 
 
     }), 
 
    }), 
 
    } 
 

 
    render() { 
 
    const { data } = this.props; 
 
    if (data.loading) { 
 
     return <p>Loading</p> 
 
    } 
 
    const { bookByName } = data; 
 
    const book = bookByName; 
 

 
    return (
 
     <p>book.id</p> 
 
    ); 
 
    } 
 
} 
 

 
export default BookPage;