Setting query string using Fetch GET request
Solution 1
Update March 2017:
URL.searchParams support has officially landed in Chrome 51, but other browsers still require a polyfill.
The official way to work with query parameters is just to add them onto the URL. From the spec, this is an example:
var url = new URL("https://geo.example.org/api"),
params = {lat:35.696233, long:139.570431}
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
fetch(url).then(/* … */)
However, I'm not sure Chrome supports the searchParams
property of a URL (at the time of writing) so you might want to either use a third party library or roll-your-own solution.
Update April 2018:
With the use of URLSearchParams constructor you could assign a 2D array or a object and just assign that to the url.search
instead of looping over all keys and append them
var url = new URL('https://sl.se')
var params = {lat:35.696233, long:139.570431} // or:
var params = [['lat', '35.696233'], ['long', '139.570431']]
url.search = new URLSearchParams(params).toString();
fetch(url)
Sidenote: URLSearchParams
is also available in NodeJS
const { URL, URLSearchParams } = require('url');
Solution 2
A concise, modern approach:
fetch('https://example.com?' + new URLSearchParams({
foo: 'value',
bar: 2,
}))
How it works: When a string (e.g. the URL) is being concatenated with an instance of URLSearchParams, its toString() method will automatically be called to convert the instance into a string representation, which happens to be a properly encoded query string. If the automatic invoking of toString()
is too magical for your liking, you may prefer to explicitly call it like so: fetch('https://...' + new URLSearchParams(...).toString())
A complete example of a fetch request with query parameters:
// Real example you can copy-paste and play with.
// jsonplaceholder.typicode.com provides a dummy rest-api
// for this sort of purpose.
async function doAsyncTask() {
const url = (
'https://jsonplaceholder.typicode.com/comments?' +
new URLSearchParams({ postId: 1 }).toString()
);
const result = await fetch(url)
.then(response => response.json());
console.log('Fetched from: ' + url);
console.log(result);
}
doAsyncTask();
If you are using/supporting...
-
IE: Internet Explorer does not provide native support for URLSearchParams or fetch, but there are polyfills available.
-
Node: As of Node 18 there is native support for the fetch API (in version 17.5 it was behind the
--experimental-fetch
flag). In older versions, you can add the fetch API through a package like node-fetch. URLSearchParams comes with Node, and can be found as a global object since version 10. In older version you can find it atrequire('url').URLSearchParams
. -
Node + TypeScript: If you're using Node and TypeScript together you'll find that, due to some technical limitations, TypeScript does not offer type definitions for the global URLSearchParams. The simplest workaround is to just import it from the
url
module. See here for more info.
Solution 3
let params = {
"param1": "value1",
"param2": "value2"
};
let query = Object.keys(params)
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
.join('&');
let url = 'https://example.com/search?' + query;
fetch(url)
.then(data => data.text())
.then((text) => {
console.log('request succeeded with JSON response', text)
}).catch(function (error) {
console.log('request failed', error)
});
Solution 4
As already answered, this is per spec not possible with the fetch
-API, yet. But I have to note:
If you are on node
, there's the querystring
package. It can stringify/parse objects/querystrings:
var querystring = require('querystring')
var data = { key: 'value' }
querystring.stringify(data) // => 'key=value'
...then just append it to the url to request.
However, the problem with the above is, that you always have to prepend a question mark (?
). So, another way is to use the parse
method from nodes url
package and do it as follows:
var url = require('url')
var data = { key: 'value' }
url.format({ query: data }) // => '?key=value'
See query
at https://nodejs.org/api/url.html#url_url_format_urlobj
This is possible, as it does internally just this:
search = obj.search || (
obj.query && ('?' + (
typeof(obj.query) === 'object' ?
querystring.stringify(obj.query) :
String(obj.query)
))
) || ''
Solution 5
You can use stringify
from query-string.
import { stringify } from 'query-string';
fetch(`https://example.org?${stringify(params)}`)
Related videos on Youtube
mylescc
Updated on July 08, 2022Comments
-
mylescc over 1 year
I'm trying to use the new Fetch API:
I am making a
GET
request like this:var request = new Request({ url: 'http://myapi.com/orders', method: 'GET' }); fetch(request);
However, I'm unsure how to add a query string to the
GET
request. Ideally, I want to be able to make aGET
request to aURL
like:'http://myapi.com/orders?order_id=1'
In
jQuery
I could do this by passing{order_id: 1}
as thedata
parameter of$.ajax()
. Is there an equivalent way to do that with the newFetch API
? -
ericsoco about 7 yearsThere's also developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…, tho as of this writing it's still making its way through spec, and not well-supported yet. And the API is more like Java than JS. :/
-
Mark Amery over 6 yearsSee caniuse.com/#feat=urlsearchparams for support for the
URLSearchParams
interface; I would assume (though I'm not 100% certain) that the browsers in red there are exactly the browsers for whichURL
objects will not have the.searchParams
property. Importantly, Edge still does not have support. -
Malvineous over 5 yearsIt's worth qualifying that this only works reliably with integer types. If you use strings, especially user-supplied ones (like search criteria) then you have to escape the string, otherwise you can get odd results if characters like
/
,+
or&
appear in the string. -
Malvineous over 5 yearsYou have to be very careful with this method because it does not URL-escape the strings first. So if you get a variable that contains a character like
+
or&
then it won't work as expected and you'll end up with different parameters and values to what you thought. -
pakman over 5 yearsFrom the documentation: "Note that using a URLSearchParams instance is deprecated; soon browsers will just use a USVString for the init." source: developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…
-
CodingIntrigue over 5 years@pakman I don't think those docs are up to date. The
init
can be an object containing key/value pairs (as shown here). Perhaps the MDN docs are referring to passing in an instance ofURLSearchParams
as the parameter to an existingURLSearchParams
-
Guido Tarsia over 4 years
new URLSearchParams
doesn't seem to work correctly withArray
properties. I expected it to convert the propertyarray: [1, 2]
toarray[]=1&array[]=2
, but converted it toarray=1,2
. Manually using theappend
method of it does result inarray=1&array=2
, but I would have to iterate over params object, and do that only for array types, not very ergonomic. -
HMR over 3 years@erandros The MDN docs do say that only USVString is a valid type to pass to URLSearchParms as constructor argument and since that seems to be a valid query string it is no use to try and pass anything to the constructor to get a valid query string. You can try the following:
var pr = new URLSearchParams(); [['a',1],['a',2]].forEach( ([key,val])=>pr.append(key,val) ); pr.toString()
-
CodingIntrigue over 3 years@HMR Not sure where you are seeing that, but MDN docs state that
init
can be: "A USVString instance, a URLSearchParams instance, a sequence of USVStrings, or a record containing USVStrings" -
HMR over 3 years@CodingIntrigue I read
soon browsers will just use a USVString for the init.
, for nownew URLSearchParams([['a':1],['a':2]])
will work but for how long? -
CodingIntrigue over 3 years@HMR I queried this statement with the editor at MDN. I hope it is not correct!
-
CodingIntrigue over 3 yearsIt was indeed added in error :) github.com/mdn/sprints/issues/2856
-
marksyzm over 3 years
URL
is now a global in nodejs since v10.0.0: nodejs.org/api/url.html -
Gen1-1 over 3 yearsUsing the Request object can help, especially if you want to use a function to build the request and then hand that to the fetch() call, but I don't think using it is "absolute obvious". Also, the url should not be specified in the object literal of config options; it should be passed separately as the 1st parameter to the Request constructor (developer.mozilla.org/en-US/docs/Web/API/Request/Request).
-
refaelio over 3 yearsThis is a good example of why you should use 3rd party libs - your code might be working fine, but someone already did it much better
-
Jesse Reza Khorasanee about 3 yearsThanks for sharing. I think this should be accepted answer. The asked to pass parameters to the fetch API, and although that isn't possible, this answer is pretty bloody close to what that would look like in structure.
-
jymbob almost 3 yearsThis doesn't appear to correctly handle multiple values for the same key. I was expecting to be able to write
new URLSearchParams({foo: ['bar', 'baz']})
but rather thanfoo=bar&foo=baz
it gets escaped asfoo=bar%Cbaz
-
Scotty Jamison almost 3 years@jymbob to have multiple values, you'll have to use the .append() method on URLSearchParams. e.g.
s = new URLSearchParams({foo: 'bar'}); s.append('foo', 'baz'); s.toString()
. Alternativly, the constructor can take a list of lists instead of an object.new URLSearchParams([['foo', 'bar'], ['foo', 'baz']]).toString()
See the docs page for more usage info: developer.mozilla.org/en-US/docs/Web/API/URLSearchParams -
jymbob almost 3 years@ScottyJamison thanks for responding. I had discovered that from the docs, but it sort of renders URLSearchParams useless for me if I can't pass in a dict and get the expected search param out at the other end.
-
Namrata Das almost 3 years@Gen1-1, ty. Made some edits. My sample was based on OP's snippet, but I simplified it a bit.
-
RavenHursT over 2 yearsAn even more concise approach would be to use string interpolation: ```
https://example.com?${new URLSearchParams({foo: 'value'})}
``` developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… -
Scotty Jamison over 2 yearsFor anyone wondering why URLSearchParams does not work with arrays, it's because there's no standard way to represent array data as search params, and you'll find competing ways to do this task. See stackoverflow.com/questions/6243051/…
-
Jyoti Duhan over 2 yearsThanks Carlos. I forgot to escape the query params.
-
chovy about 2 yearsdo you need to encode the key? i've never done that.
-
Scotty Jamison about 2 years@chovy - you do if your key contains special characters, like "&". Most of the time it won't, but sometimes it can.
-
AnnABlue about 2 yearsWorks like a charm with key, value
-
Scotty Jamison almost 2 yearsNOTE: encodeURIComponent can give bad results, e.g. it'll incorrectly encode a space as "%20" instead of "+" - this behavior is fine when you're percent encoding, for example, a URL's path (an intended use case), but query parameters are generally form-encoded, which follows an older version of the percent-encoding specification - you can use URLSearchParams() to properly encode/decode query parameters. See this S.O. question to learn more.
-
Sergey Nudnov almost 2 years
new URL('/relative/url')
throwing an error: Failed to construct 'URL': Invalid URL -
ggorlen over 1 yearNode supports fetch now!
-
Sebastian Simon over 1 year@SergeyNudnov The
URL
constructor accepts two arguments. The second one is to provide an absolute base URL for the relative URL provided in the first argument. -
Sebastian Simon over 1 yearFunctionally identical to the answer provided by Sudharshan three and a half years earlier.
-
Sebastian Simon over 1 yearThis has the same drawbacks as the answer by Evert and the one by Pat Kearns already provided more than two years earlier. “I tested this over a multiple number of query parameters and it worked like a charm” — You didn’t test this with anything relevant, then. URLs have a syntax that can be tokenized on specific characters. Trying any of these characters in your function should make it obvious that this code is broken.
-
Amjad Abujamous over 1 year@SebastianSimon Two years later, I stand corrected. Thank you my friend.