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 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?

Answer 1

Define like that:

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

See more graph.