Passing Params to CC Task via HTTP

General Q&A
#1

I have a CC Task that implements the HTTP capability. There is a function that looks similar to the example,

export async function get({params, request, response}) {
return {hello: 'world'};}

I can call this through a view js:

view.text = "https://{some_url}.poweredbyjourney.com/ccTask"

and then using an HTML tag in the xml.

<html src="{text}" show-fullscreen-button="true"/>

My question is, how can I pass a parameter to the function and still obtain the webpage/request? For instance if I wanted the CC Task to be:

    export async function get({params, request, response}) {
          return {hello: params.message};
    }

I have tried using fetch, however, it is receiving the response not the URL in view.text.

#2

After some trial and error. You can add query parameters into the URL and the CC Task function will recognize it as a parameter. EX:

https://{some_url}.poweredbyjourney.com/ccTask/?message=world

The CC Task recognizes it and if you execute console.log(params.message) it will reveal world

Is there another way? I need to pass JSON objects and it would be much nicer to pass this through the body with a POST request. Is this possible? Thanks.

#3

To expose an endpoint that accepts HTTP Post you need to define the post function in your CloudCode task e.g.

export async function post({params, request, response, authContext}) {
    // Set response
    response.status(200);
    // Return the params
    return params;
}

There are other functions you can implement to expose other HTTP Methods, for more details, please see this article in our documentation.

On the client application you can then do the following:

function post () {
    var user = DB.user.first();
    var baseUrl = "https://dev-community-test.poweredbyjourney.com";
    var ccEndpoint = "/post";
    var queryParam = user.id;
    // You can add query params to the POST as well
    var url = baseUrl + ccEndpoint + "?id=" + queryParam;
    var body = { id: user.id, name: user.name };
    
    console.log(url, body);

    return fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json; charset=UTF-8"
        },
        body: JSON.stringify(body)
    }).then(function (response) {
        if(response.status < 200 || response.status >= 300) {
            // Request failed
            throw new Error("Failed to make network request: [" + response.status + "]");
        } else {
            return response.json();
        }
    }).then(function (json) {
        // Do something with response data
        return dialog("Data from CC", JSON.stringify(json))
    }).catch(function (error) {
        console.log("Something went wrong", error ? error : "");
    });
}

If using a TypeScript app, you won’t need to do the promise handling and use async/await which simplifies this code.

1 Like
#4

This was great! Thanks, @mike_barnes !

The only thing I needed to change was setting the header after the body in the fetch request.

headers: { 
      'Content-Type': 'application/json; charset=UTF-8' 
}
#5

You’re most welcome @alex-valdez and a good catch. I’ve updated my original answer for future viewers.

1 Like