Best practice when using a filter in a query based on a user's selection?

1

In my schema Events have a 1 to 1 relationship with a Location. In other words any Event node must occur in a Location.

I have an “events” page where users can filter based on a location or see all. At the moment Im using 2 component with different queries.

If a user choose “all” locations then I use a component with this query:

const EVENTS_ALL = gql`
	query EVENTS_LOCATION($locationFilter: String!) {
		allEvents {
			id
			name
		}
	}
`;

And if they choose a location then I load a component with this query:

const EVENTS_LOCATION = gql`
	query EVENTS_LOCATION($locationFilter: String!) {
		allEvents(
			filter: { location: { machineName: $locationFilter } }
		) {
			id
			name
		}
	}
`;

This is working but feels messy and I’m having to repeat myself. What is the best practice in this situation? Is it possible to have multiple queries in a React component but choose which query to send after a user makes a selection?