Apollo GraphQL 变量查询答案

【问题标题】：Apollo GraphQL variable QueryApollo GraphQL 变量查询
【发布时间】：2018-03-02 16:53:02
【问题描述】：

在大量阅读 Apollo React 文档之后，我无法使用 Redux 提供的 DiscoveryList 组件的 props 变量 displayLocation 创建 GraphQL 查询。 displayLocation 的流类型如下：-

type DisplayLocation = {
  lat: number,
  lng: number,
};

我收到以下错误：-Variable lat of type Float! was provided invalid value，令人惊讶的是，为 float 变量提供的值是 37.33233141。 Redux 和 Apollo 组件集成代码如下：-

export default compose(
  connect(({ displayLocation }) => ({ displayLocation }), {
    updateDisplayLocation,
  }),
  graphql(
    gql`
    query DiscoveryList($lat: Float!, $lng: Float!) {
      destinations(radius: {
        latitude: $lat,
        longitude: $lng,
        distance: 10000})
        { name
          id
          country_code
        }
      }`,
    {
      options: ({ displayLocation }) => ({
        variables: {
          lat: displayLocation.lat,
          lng: displayLocation.lng,
        },
      }),
    },
  ),
)(DiscoverList);

非常感谢您的帮助。

我还想知道将 redux 道具输入 Apollo GraphQL 查询，我们应该先 connect() redux 然后 Apollo graphql() 还是在导出组件之前反过来？

【问题讨论】：

这看起来是正确的 - 您可以在您的商店中查看 displayLocation 的当前值吗？
我商店中的 displayLocation 是正确的，即使 this.prop.data.variables 对象是正确的，它显示 2 个 json 字段 lat，lng 具有正确的浮点值，但我仍然得到“浮点错误的无效值” .
不使用会怎样！ / 变量可能是双倍的？？试图强迫浮动。查询 DiscoveryList($lat: Float, $lng: Float)
GraphQL 没有双精度，JS 也没有 :)
我强烈建议将这些值存储为字符串，并且仅在使用时将它们转换为浮点数，因为 base 64 系统的不准确性。根据我的经验，我通常将组件包装在 graphql 中，然后将它们包装在 Redux 中。我认为这两种方法都有一个案例。

标签： reactjs react-native graphql apollo react-apollo

【解决方案1】：

这样定义：

type DisplayLocation = {
  lat: Float,
  lng: Float,
}

查看更多图表。

【讨论】：

请在您的回答中添加更多详细信息How to answer
只需将数字更改为浮点数