react-apollo - 래핑 된 구성 요소에서 쿼리 변수를 설정하는 방법?</p> <pre><code><MyComponentWithData propsForQueryVariables={...} /> </code></pre> <p>하지만 포장 구성 요소에서 변수 쿼리를 시작해야합니다

Question

react-apollo 변수를 쿼리 구성 요소 소품을 변환 할 수있는 기능을 제공합니다. 같은

뭔가 :

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

filter이 Null을 허용하지 입니다

처럼

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 MyComponent에 대한

QUERY 보인다. 따라서 첫 번째 요청에는 유효한 변수 filter이 있어야하며이 변수는 래핑 된 구성 요소에 만들어야합니다.

Answer 1

refetch은 variables 개체를 인수로 받아들입니다 (documentation 참조). 초기의 변수에 부모 소품을 통과 할 수

Answer 2

이처럼 graphql HOC에서 가져 오기 : 새와

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); 

이후의 refetches 매개 변수는 refetch()을 통해 처리 할 수 ​​있습니다.