Merge pull request #2070 from tvdeyen/ajax-get-query-params

Parse params in ajax.get as query string
AlchemyCMS · Apr 17, 2021 · 065a7ae · 065a7ae
2 parents 9eb591e + 3c10b0a
commit 065a7ae
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/package/src/utils/__tests__/ajax.spec.js b/package/src/utils/__tests__/ajax.spec.js
@@ -10,15 +10,15 @@ beforeEach(() => {
 
 describe("ajax('get')", () => {
   it("sends X-CSRF-TOKEN header", async () => {
-    xhrMock.get("/users", (req, res) => {
+    xhrMock.get("http://localhost/users", (req, res) => {
       expect(req.header("X-CSRF-TOKEN")).toEqual(token)
       return res.status(200).body('{"message":"Ok"}')
     })
     await ajax("get", "/users")
   })
 
   it("sends Content-Type header", async () => {
-    xhrMock.get("/users", (req, res) => {
+    xhrMock.get("http://localhost/users", (req, res) => {
       expect(req.header("Content-Type")).toEqual(
         "application/json; charset=utf-8"
       )
@@ -28,15 +28,15 @@ describe("ajax('get')", () => {
   })
 
   it("sends Accept header", async () => {
-    xhrMock.get("/users", (req, res) => {
+    xhrMock.get("http://localhost/users", (req, res) => {
       expect(req.header("Accept")).toEqual("application/json")
       return res.status(200).body('{"message":"Ok"}')
     })
     await ajax("get", "/users")
   })
 
   it("returns JSON", async () => {
-    xhrMock.get("/users", (_req, res) => {
+    xhrMock.get("http://localhost/users", (_req, res) => {
       return res.status(200).body('{"email":"mail@example.com"}')
     })
     await ajax("get", "/users").then((res) => {
@@ -45,7 +45,7 @@ describe("ajax('get')", () => {
   })
 
   it("JSON parse errors get rejected", async () => {
-    xhrMock.get("/users", (_req, res) => {
+    xhrMock.get("http://localhost/users", (_req, res) => {
       return res.status(200).body('email => "mail@example.com"')
     })
     expect.assertions(1)
@@ -55,7 +55,7 @@ describe("ajax('get')", () => {
   })
 
   it("network errors get rejected", async () => {
-    xhrMock.get("/users", () => {
+    xhrMock.get("http://localhost/users", () => {
       return Promise.reject(new Error())
     })
     expect.assertions(1)
@@ -65,7 +65,7 @@ describe("ajax('get')", () => {
   })
 
   it("server errors get rejected", async () => {
-    xhrMock.get("/users", (_req, res) => {
+    xhrMock.get("http://localhost/users", (_req, res) => {
       return res.status(401).body('{"error":"Unauthorized"}')
     })
     expect.assertions(1)
@@ -75,27 +75,35 @@ describe("ajax('get')", () => {
   })
 
   it("server errors parsing errors get rejected", async () => {
-    xhrMock.get("/users", (_req, res) => {
+    xhrMock.get("http://localhost/users", (_req, res) => {
       return res.status(401).body("Unauthorized")
     })
     expect.assertions(1)
     await ajax("get", "/users").catch((e) => {
       expect(e.message).toMatch("Unexpected token")
     })
   })
+
+  it("params get attached as query string", async () => {
+    xhrMock.get("http://localhost/users?name=foo", (_req, res) => {
+      return res.status(200).body(`{"name":"foo"}`)
+    })
+    const { data } = await ajax("get", "/users", { name: "foo" })
+    expect(data.name).toEqual("foo")
+  })
 })
 
 describe("ajax('post')", () => {
   it("sends X-CSRF-TOKEN header", async () => {
-    xhrMock.post("/users", (req, res) => {
+    xhrMock.post("http://localhost/users", (req, res) => {
       expect(req.header("X-CSRF-TOKEN")).toEqual(token)
       return res.status(200).body('{"message":"Ok"}')
     })
     await ajax("post", "/users")
   })
 
   it("sends Content-Type header", async () => {
-    xhrMock.post("/users", (req, res) => {
+    xhrMock.post("http://localhost/users", (req, res) => {
       expect(req.header("Content-Type")).toEqual(
         "application/json; charset=utf-8"
       )
@@ -105,15 +113,15 @@ describe("ajax('post')", () => {
   })
 
   it("sends Accept header", async () => {
-    xhrMock.post("/users", (req, res) => {
+    xhrMock.post("http://localhost/users", (req, res) => {
       expect(req.header("Accept")).toEqual("application/json")
       return res.status(200).body('{"message":"Ok"}')
     })
     await ajax("post", "/users")
   })
 
   it("sends JSON data", async () => {
-    xhrMock.post("/users", (req, res) => {
+    xhrMock.post("http://localhost/users", (req, res) => {
       expect(req.body()).toEqual('{"email":"mail@example.com"}')
       return res.status(200).body('{"message":"Ok"}')
     })

diff --git a/package/src/utils/ajax.js b/package/src/utils/ajax.js
@@ -29,16 +29,21 @@ function getToken() {
   return metaTag.attributes.content.textContent
 }
 
-export default function ajax(method, url, data) {
+export default function ajax(method, path, data) {
   const xhr = new XMLHttpRequest()
   const promise = buildPromise(xhr)
+  const url = new URL(window.location.origin + path)
 
-  xhr.open(method, url)
+  if (data && method.toLowerCase() === "get") {
+    url.search = new URLSearchParams(data).toString()
+  }
+
+  xhr.open(method, url.toString())
   xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")
   xhr.setRequestHeader("Accept", "application/json")
   xhr.setRequestHeader("X-CSRF-Token", getToken())
 
-  if (data) {
+  if (data && method.toLowerCase() !== "get") {
     xhr.send(JSON.stringify(data))
   } else {
     xhr.send()