From 8fe5e60f5f746ba44e43cd9ba8a6f83b20412411 Mon Sep 17 00:00:00 2001
From: Josh McFarlin <josh@mcfarl.in>
Date: Sun, 13 Feb 2022 17:18:17 -0500
Subject: [PATCH] fix(url): add extra level of URI encode on url to preserve
 image src query

---
 CHANGELOG.md                                 | 6 ++++++
 src/hooks/responsiveImage/responsiveImage.ts | 2 +-
 src/utils/url.ts                             | 2 ++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47106e8..3a57d3b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- Added extra level of URI encode on url to preserve image src query
+
 ## [0.3.3] - 2022-02-13
 
 ### Fixed
diff --git a/src/hooks/responsiveImage/responsiveImage.ts b/src/hooks/responsiveImage/responsiveImage.ts
index 9f74a90..0bf64cb 100644
--- a/src/hooks/responsiveImage/responsiveImage.ts
+++ b/src/hooks/responsiveImage/responsiveImage.ts
@@ -23,7 +23,7 @@ export const useResponsiveImage = (
 
   for (const { size } of responsive) {
     const srcSetUrl = encodeQuery(loaderUrl, {
-      src: image.src,
+      src: encodeURI(image.src || ""),
       width: size.width,
       height: size.height,
       ...options,
diff --git a/src/utils/url.ts b/src/utils/url.ts
index c84c5a8..4671b9b 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -17,6 +17,7 @@ export const encodeQuery = (url: string, query: Record<string, any>): string =>
     {
       skipNull: true,
       arrayFormat: "bracket",
+      sort: false,
     }
   );
 
@@ -27,6 +28,7 @@ export const decodeTransformQuery = (
     arrayFormat: "bracket",
     parseNumbers: true,
     parseBooleans: true,
+    sort: false,
   });
 
 export const parseURL = (rawUrl: string, baseUrl?: URL | string): URL => {