react-apollo - Wie setze ich Abfragevariablen von einer umschlossenen Komponente?

Question

react-apollo bietet die Möglichkeit Komponente Requisiten zu konvertieren Variablen abzufragen:

<MyComponentWithData propsForQueryVariables={...} /> 

Aber ich brauche Abfrage mit Variablen aus gewickelter Komponente starten.

Etwas wie:

class MyComponent extends React.Component { 
    //... 
    onReady() { 
    // should be first request to server 
    this.props.refetch({ 
     // variables here 
    }) 
    } 

    onFilterChanged() { 
    this.props.refetch({ 
     // new variables here 
    }) 
    } 
} 

const MyComponentWithData = graphql(QUERY, { 
    options: { 
    waitUntilComponentStartQuery: true 
    // pollInterval:... 
    }, 
    props({ data: { items, refetch } }) { 
    return { 
     items: items, 
     refetch: refetch 
    }; 
    } 
})(MyComponent); 

UPDATE

QUERY für MyComponent sieht aus wie

query getItems($filter: JSON!) { 
items(filter: $filter) { 
    id 
    name 
} 
} 

filternicht auf NULL festlegbare ist. Daher sollte die erste Anforderung die gültige Variable filter haben, und diese Variable sollte in der umschlossenen Komponente erstellt werden.

Answer 1

refetch akzeptiert ein variables Objekt als Argument, siehe documentation.

Answer 2

Sie können die Eltern Requisiten auf die Variablen der Anstich holen in der graphql HoC, wie folgt aus:

ParentComponent.jsx

import ChildComponent from './ChildComponent'; 

const ParentComponent =() => <ChildComponent filterPropValue="myDefaultFilterValue" />; 

export default ParentComponent; 

ChildComponent.jsx

class ChildComponent extends React.Component { 
    refresh() { 
    this.props.refetch({ 
     filter: 'mynewFilterValue' 
    }); 
    } 

    render() { 
    return (
     <div>I am a child component with {this.props.items.length} items.</div> 
    ); 
    } 
} 

export default graphql(MyQuery, { 
    options: (props) => ({ 
    variables: { 
     filter: props.filterPropValue 
    } 
    }), 
    props: ({ data: { items, error, refetch }) => ({ 
    items, 
    error, 
    refetch 
    }) 
})(ChildComponent); 

Nachträgliche refetches mit neuen Parameter können dann über refetch() behandelt werden.