reactjs - 400 Bad request when passing in variables in gql (Apollo client)

Question

I'm trying to pass some variables into my gql string but can't seem to get it to work. When passing in the data manually the query works.

  const UPDATE_WEATHER = gql`
  {
    weatherByLocation(
      latitude: "51.8917473"
      longitude: "-2.0877334999999997"
    ) {
      currently {
        summary
      }
    }
  }
`;

const WeatherInfo = ({ lat, long }) => {
  const { loading, error, data } = useQuery(UPDATE_WEATHER, {
    variables: { lat, long },
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return <h1>{data.weatherByLocation[0].currently.summary}</h1>;
};

I've tried following the guide here but with no success. Here is my updated gql with the variables

const UPDATE_WEATHER = gql`
  query weatherByLocation($lat: String!, $long: String!) {
    weatherByLocation(latitude: $lat, longitude: $long) {
      currently {
        summary
      }
    }
  }
`;

However this results in a 400 bad request. Here is the request payload

operationName: "weatherByLocation"
query: "query weatherByLocation($lat: String!, $long: String!) {?  weatherByLocation(latitude: $lat, longitude: $long) {?    currently {?      summary?      __typename?    }?    __typename?  }?}?"
variables: {lat: 51.891751299999996, long: -2.0877779}

question from:https://stackoverflow.com/questions/65904893/400-bad-request-when-passing-in-variables-in-gql-apollo-client

Answer 1

You need to convert your variables into String! Because in the Query you expect variables with the type of string