Wie man graphQL Abfragevariable in eine verzierte react Komponente übergibt

Question

Weiß jemand, wie der richtige Weg, um eine Abfragevariable zu apollo hinzuzufügen, von reagieren ist? Ich kann den folgenden Code zu arbeiten, wenn ich manuell den Buchnamen Zeichenfolge anstelle der Übergabe der $name Abfragevariable, aber sobald ich es hinzufügen und versuchen, und übergeben Sie die Variable Name über eine Optionen in den propTypes, die Invariant Violation: The operation 'data' wrapping 'BookPage' is expecting a variable: 'name' but it was not found in the props passed to 'Apollo(BookPage)'

Ich zog die Syntax für den Dekorator direkt aus dem reactQL Paket, so dass ich weiß, es hat ein wenig mehr syntaktischen Zucker als andere Beispiele, aber es sollte immer noch gültig für eine Abfrage richtig?

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

Der @graphql Dekorateur hat einen zweiten Parameter in dem Sie Optionen für die Abfrage oder Mutation definieren.

Ähnlich wie die Optionen Definition in der config.

in Ihrem Fall So könnte es aussehen:

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;