Query keys are encoded in URLComponent's url

Question

I'm using URLQueryItem to encode query values but when I pass queries to the URLComponent in the url property query keys are encoded too.

var urlComponents = URLComponents(url: url, resolvingAgainstBaseURL: false)
urlComponents.queryItems = [URLQueryItem]()
for (key,value) in parameters {
    let queryItem = URLQueryItem(name: key,
                                 value: "\(value)".addingPercentEncoding(withAllowedCharacters: .urlHostAllowed))
    urlComponents.queryItems?.append(queryItem)
}
print("URLComponents Query Items:\n \(urlComponents.queryItems)")
print("URLComponents URL:\n \(urlComponents.url)")

Output is:

URLComponents Query Items:
 Optional([per_page=10, filters[status]=Active])
URLComponents URL:
 Optional(https://example.com/endpoint?per_page=10&filters%5Bstatus%5D=Active)

How can this be prevented? I don't want query names be encoded.

Answer 1

Remove the explict .addingPercentEncoding(withAllowedCharacters: .urlHostAllowed) call - URLQueryItem takes care of the encoding.