Apollo GraphQL variable Query

Question

After much reading Apollo React documentation I am unable to create a GraphQL query using a Redux provided props variable displayLocation of the DiscoveryList component. Flow type of displayLocation given below: -

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

I am getting the following error: - Variable lat of type Float! was provided invalid value, surprisingly the provided value to the float variable is 37.33233141. Redux and Apollo Component integration code given below :-

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

Many thanks for your help.

I was also wondering to feed redux props into the Apollo GraphQL query, should we connect() redux first and then Apollo graphql() or the other way around before exporting the component please?

this looks correct - can you check in your store to see the current value of displayLocation? — stubailo
The displayLocation in my store is correct even the this.prop.data.variables object is correct, it shows 2 json fields lat, lng with correct float values but still i get the 'invalid value to Float error'. — aprofromindia
what if you don't use ! / the variable maybe a double?? try to coerce to float. query DiscoveryList($lat: Float, $lng: Float) — johndpope
I would strongly suggest to store these values as strings, and only convert them to floats at the point of use, because of the inaccuracies of the base 64 system. In my experience I generally wrap components in graphql then I wrap them in Redux. I think there is a case for both approaches. — Benjamin Charais

Unknown Unknown · Accepted Answer · 2018-03-29T12:51:38

-1

votes

Define like that:

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

See more graph.

Apollo GraphQL variable Query

1 Answers