react-apollo와 비동기로 가져온 변수가 포함 된 graphql 쿼리를 호출하십시오.

Question

react 구성 요소가있어서 가까운 곳의지도가 표시됩니다.

My HOC은 해당 관심 지점을 쿼리하고 순수 UI 구성 요소에 소품으로 데이터를 제공하기 위해 react-apollo을 사용합니다.

사용자의 위치를 ​​navigator.geolocation에서 내 graphql 쿼리의 변수로 가져 오려고합니다. 그러나 탐색 API가 비동기 적이기 때문에 작동하지 않는 것처럼 보입니다.

이 같은 대한 같습니다

const getCurrentPosition = async (settings = {}) => 
    new Promise((resolve, reject) => { 
    navigator.geolocation.getCurrentPosition(resolve, reject, settings); 
    } 
); 

const query = gql` 
    query($coordinates: [[Float]]){ 
    whatever(filter: {coordinates: $coordinates}) { 
     _id 
     coordinates 
    } 
    } 
`; 

const withData = graphql(query, { 
    options: async (props) => { 
    const position = await getCurrentPosition(); 

    return { 
     variables: { 
     coordinates: [position.coords.latitude, position.coords.longitude], 
     }, 
    }; 
    }, 
    props: ({ data: { loading, whatever, refetch, variables: { coordinates } } }) => ({ 
    loading, 
    whatever, 
    coordinates, 
    refetch, 
    }), 
}); 


const List = ({ loading, whatever, coordinates, refetch }) => { 
    if (loading) { 
    return null; 
    } 
    return (/* map display*/); 
}; 

List.propTypes = { 
    loading: React.PropTypes.bool.isRequired, 
    whatever: React.PropTypes.array, 
    coordinates: React.PropTypes.array, 
    refetch: React.PropTypes.func, 
}; 

export default withData(Map); 

coordinates 항상 내 구성 요소 내부 null입니다.

일을 기록 할 때 위치가 계산되지만 graphql 쿼리와 구성 요소 렌더링이 그 전에 발생하는 것으로 보입니다.

사용자 위치를 가져올 때 쿼리가 호출되지 않고 구성 요소가 다시 렌더링되지 않습니다.

가능합니까? 내가 뭔가 잘못하고 있는거야?

Answer 1

비동기 호출을 미리 만들어서 소품을 통해 주입 한 다음 http://dev.apollodata.com/react/api.html#graphql-config.skip을 사용하여 위치가 아직없는 경우 쿼리를 건너 뛸 수 있습니다.

아마도 recompose/withProps 등을 사용하고 있을까요?