Building a comparison view with Apollo GraphQL

Question

Scenario

I have a GraphQL endpoint with the following schema, that allows me to get weather statistics for a given city:

type Weather {
  name: String
  times: [Float]
  temp: [Float]
  hum: [Float]
}

type Query {
  weather(city: String): Weather
}

I am trying to build an application in which the user can select one or more cities and a component will display the list of cities and plot the statistics.

function ViewStats({cities}) {

    const temp = cities.map(city => ({x: city.times, y: city.temp}));
    const hum = cities.map(city => ({x: city.times, y: city.hum}));

    return (
        <div>
            <h1>Weather stats for {cities.map(city => city.name).join(', ')}.</h1>
            <Plot title="Temperature" series={temp} />
            <Plot title="Humidity" series={hum} />
        </div>
    );
}

const ViewStatsDecorated = decorateSomehowWithGraphQL(ViewStats);

function App() {
    return <ViewStatsDecorated cities={['new-york', 'paris', 'bangkok']} />;
}

Question

Is it possible to decorate the ViewStats component so that a separate query is done for each city? I would like to take advantage of the caching capability of Apollo, i.e. if two cities are selected, and a new one is added to the list, only one query has to be done. The list of selected cities is kept in a Redux store.