使用带有异步获取变量的 react-apollo 调用 graphql 查询

Question

我有一个 react 组件，它显示一张地图，其中包含您附近的兴趣点。

我的 HOC 使用 react-apollo 查询那些兴趣点并将数据作为 props 提供给纯 UI 组件。

我正在尝试将用户的位置从 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

我会事先进行异步调用并通过 props 注入它，然后使用 http://dev.apollodata.com/react/api.html#graphql-config.skip 跳过查询，如果位置还不在这里。

也许使用 recompose/withProps 等？

使用带有异步获取变量的 react-apollo 调用 graphql 查询

Call graphql query with react-apollo with asynchronously fetched variables

javascript

asynchronous

geolocation

reactjs

react-apollo