Setting query string using Fetch GET request

400,869

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 at require('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)}`)
Share:
400,869

Related videos on Youtube

mylescc
Author by

mylescc

Updated on July 08, 2022

Comments

  • mylescc
    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 a GET request to a URL like:

    'http://myapi.com/orders?order_id=1'
    

    In jQuery I could do this by passing {order_id: 1} as the data parameter of $.ajax(). Is there an equivalent way to do that with the new Fetch API?

  • ericsoco
    ericsoco about 7 years
    There'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
    Mark Amery over 6 years
    See 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 which URL objects will not have the .searchParams property. Importantly, Edge still does not have support.
  • Malvineous
    Malvineous over 5 years
    It'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
    Malvineous over 5 years
    You 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
    pakman over 5 years
    From 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
    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 of URLSearchParams as the parameter to an existing URLSearchParams
  • Guido Tarsia
    Guido Tarsia over 4 years
    new URLSearchParams doesn't seem to work correctly with Array properties. I expected it to convert the property array: [1, 2] to array[]=1&array[]=2, but converted it to array=1,2. Manually using the append method of it does result in array=1&array=2, but I would have to iterate over params object, and do that only for array types, not very ergonomic.
  • HMR
    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
    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
    HMR over 3 years
    @CodingIntrigue I read soon browsers will just use a USVString for the init. , for now new URLSearchParams([['a':1],['a':2]]) will work but for how long?
  • CodingIntrigue
    CodingIntrigue over 3 years
    @HMR I queried this statement with the editor at MDN. I hope it is not correct!
  • CodingIntrigue
    CodingIntrigue over 3 years
    It was indeed added in error :) github.com/mdn/sprints/issues/2856
  • marksyzm
    marksyzm over 3 years
    URL is now a global in nodejs since v10.0.0: nodejs.org/api/url.html
  • Gen1-1
    Gen1-1 over 3 years
    Using 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
    refaelio over 3 years
    This 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
    Jesse Reza Khorasanee about 3 years
    Thanks 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
    jymbob almost 3 years
    This 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 than foo=bar&foo=baz it gets escaped as foo=bar%Cbaz
  • Scotty Jamison
    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
    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
    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
    RavenHursT over 2 years
    An 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
    Scotty Jamison over 2 years
    For 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
    Jyoti Duhan over 2 years
    Thanks Carlos. I forgot to escape the query params.
  • chovy
    chovy about 2 years
    do you need to encode the key? i've never done that.
  • Scotty Jamison
    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
    AnnABlue about 2 years
    Works like a charm with key, value
  • Scotty Jamison
    Scotty Jamison almost 2 years
    NOTE: 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
    Sergey Nudnov almost 2 years
    new URL('/relative/url') throwing an error: Failed to construct 'URL': Invalid URL
  • ggorlen
    ggorlen over 1 year
    Node supports fetch now!
  • Sebastian Simon
    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
    Sebastian Simon over 1 year
  • Sebastian Simon
    Sebastian Simon over 1 year
    This 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
    Amjad Abujamous over 1 year
    @SebastianSimon Two years later, I stand corrected. Thank you my friend.