Params in Fetch, do they work?

How-to Discussions
1

I want to use an API that requires me to send parameters outside of the base URL. I have tried adding the parameters in the base URL of the call, but this generates various errors from Invalid Path to Missing API Key. So I copied my params object from a Meteor project I was working on to test it in Fuse.

This is the original script I used in Meteor using the HTTP plugin:

HTTP.get('https://api.somesite.com/catalog/v4/search/',
{
  params: {
    "q": query,
    "offers": "bestoffer",
    "offset": "0",
    "limit": "10",
    "dataoutput": "products,categories",
    "ids": "8299",
    "apikey": "mysupersecretapikey",
    "format": "json"
  },
  headers: {}
});

In my Fuse project I replaced query with searchTerm, this is intentional. My Fuse fetch call looks like:

fetch('https://api.somesite.com/catalog/v4/search/', {
    params: {
          "q": searchTerm,
          "offers": "bestoffer",
          "offset": "0",
          "limit": "10",
          "dataoutput": "products,categories",
          "ids": "8299",
          "apikey": "mysupersecretapikey",
          "format": "json"
        },
	method: "GET",
    headers: { "Content-type": "application/json"},
    body: JSON.stringify(requestObject)
}).then(function(response) {
    status = response.status;
    response_ok = response.ok;
    return response.json();
}).then(function(responseObject) {
    console.log(responseObject);
}).catch(function(err) {
    console.log('Error');
});

So the query parameter q holds the searchTerm value extracted from the TextInput on the previous page. When I used fetch like this, it tells me that the API Key is not present. Is params supported by Fuse at the moment? Or am I not seeing a stupid newbie mistake? Thanks.

2

Hi, params is not part of the fetch standard, so you’ll have to append the query string to the URL yourself. Here is a function to build a query string from an object:

function createQueryString(obj) {
	return "?" + Object.keys(obj).map(function(key, index) {
		return encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
	}).join("&");
}

// Example
console.log(createQueryString({ foo: "bar", q: "fuse" })); // Prints "?foo=bar&q=fuse"
3

Sebastian, you are a legend! It worked. I changed my code and followed your example… BINGO!

Current code for others seeking the same solution:

function createQueryString(obj) {
    return "?" + Object.keys(obj).map(function(key, index) {
        return encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
    }).join("&");
}

params = {
          "q": searchTerm,
          "offers": "bestoffer",
          "offset": "0",
          "limit": "10",
          "dataoutput": "products,categories",
          "ids": "8299",
          "apikey": "mysupersecretapikey",
          "format": "json"
}

params = createQueryString(params);

fetch('https://api.somesite.com/catalog/v4/search/' + params, {
	method: 'GET',
    headers: { "Content-type": "application/json"}
}).then(function(response) {
    status = response.status;  // Get the HTTP status code
    response_ok = response.ok; // Is response.status in the 200-range?
	debugger;
    return response.json();    // This returns a promise
}).then(function(responseObject) {
    console.log(responseObject);
}).catch(function(err) {
    console.log('Error');
});

Thanks again!

4

Happy to hear it’s working :slight_smile: