Understanding Query Key Objects

type Colors = {
  blue: boolean;
  green: boolean;
  red: boolean;
};

type Square = {
  id: number;
  color: 'blue' | 'green' | 'red'
};

const useSquaresQuery = (colors: Colors) => {
  return useQuery({
    queryKey: ['square', colors],
    queryFn: () => fetchSquares(colors)
  });
}
...
const blueRedSquares = useSquaresQuery({
  blue: true,
  red: true
});

type Size = 'big' | 'small';
type Filters = {
  colors: Colors
  size: Size
}
const useSquaresQuery = (filters: Filters) => {
  return useQuery({
    queryKey: ['square', filters],
    queryFn: () => fetchSquares(filters)
  });
}