Apollo GraphQL 变量查询

Posted 2023-03-08

【中文标题】Apollo GraphQL 变量查询

【英文标题】：Apollo GraphQL variable Query

【发布时间】：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 中。我认为这两种方法都有一个案例。

【参考方案1】：

这样定义：

type DisplayLocation = 
  lat: Float,
  lng: Float,

查看更多图表。

【讨论】：

请在您的回答中添加更多详细信息How to answer

只需将数字更改为浮点数