Append query params to url if provided

README.md

@@ -54,33 +54,44 @@ async myMethod () {
 }
 ```
 
-#### Request body
+#### Request Options
 
-Instead of stringify the body of a request which the content type is `application/json`, you can just pass the javascript object as the body of the request and Request.JS will stringify it for you.
+You can pass options to a request as the last argument. For example:
 
-```js
-import { post } from '@rails/request.js'
-
-...
-
-async myMethod () {
-  const response = await post('localhost:3000/my_endpoint', { body: { name: 'Request.JS' } })
-  if (response.ok) {
-    ...
-  }
-}
+```javascript
+post("/my_endpoint", {
+  body: {},
+  contentType: "application/json",
+  headers: {},
+  query: {},
+  responseKind: "html"
+})
 ```
 
-### responseKind
+##### body
 
-You can provide this option to specify which kind of response will be accepted. Default is `html`.
+This is the `body` for POST requests. You can pass in a Javascript object, FormData, Files, strings, etc.
 
-Options are `html`, `turbo-stream`, `json`.
+Request.js will automatically JSON stringify the `body` if the content type is `application/json`.
 
-### contentType
+##### contentType
 
 When provided this value will be sent in the `Content-Type` header. When not provided Request.JS will send nothing when the `body` of the request is `null` or an instance of `FormData`, when the `body` is an instance of a `File` then the type of the file will be sent and `application/json` will be sent if none of the prior conditions matches.
 
+##### headers
+
+Adds additional headers to the request.  `X-CSRF-Token` and `Content-Type` are automatically included.
+
+##### query
+
+Appends query parameters to the URL. Query params in the URL are preserved and merged with the query options.
+
+##### responseKind
+
+Specifies which response format will be accepted. Default is `html`.
+
+Options are `html`, `turbo-stream`, `json`.
+
 #### Turbo Streams
 
 Request.JS will automatically process Turbo Stream responses. Ensure that your Javascript sets the `window.Turbo` global variable:

src/fetch_request.js

@@ -5,8 +5,8 @@ import { getCookie, compact, metaContent } from './lib/utils'
 export class FetchRequest {
   constructor (method, url, options = {}) {
     this.method = method
-    this.url = url
     this.options = options
+    this.originalUrl = url
   }
 
   async perform () {
@@ -93,6 +93,24 @@ export class FetchRequest {
     return this.options.body
   }
 
+  get query () {
+    const originalQuery = (this.originalUrl.split('?')[1] || '').split('#')[0]
+    const params = new URLSearchParams(originalQuery)
+
+    if (this.options.query) {
+      for (const [key, value] of Object.entries(this.options.query)) {
+        params.append(key, value)
+      }
+    }
+
+    const query = params.toString()
+    return (query.length > 0 ? `?${query}` : '')
+  }
+
+  get url () {
+    return this.originalUrl.split('?')[0] + this.query
+  }
+
   get responseKind () {
     return this.options.responseKind || 'html'
   }