Append query params to url if provided (#28)

If a user wants to request a url with query params, they have to build the URL with query params on their own with `URLSearchParams` or something similar.

For example, a dynamic country / state select you might do the following to update the state select field after choosing a country:

```javascript
async updateStateSelect(event) {
  const value = event.target.selectedOptions[0].value
  const query = new URLSearchParams({ country: value })
  const response = await  get(`/addresses/states?${query}`, {
    responseKind: "turbo-stream"
  })
}
```

This PR adds a `query` option that will automatically be appended to the URL if provided.  The above example can then become the following:

```javascript
async updateStateSelect(event) {
  const response = await  get("/addresses/states", {
    query: { country: event.target.selectedOptions[0].value },
    responseKind: "turbo-stream"
  })
}
```

Both examples will make requests to `/addresses/states?country=us`.

I also updated the README to document all the request options a bit clearer (and documented `query`). Originally, I named the option `params` but thought `query` was clearer.

Author: excid3

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'
   }