Monday.com create board item JSON layout

Question

I have a Monday.com board (table). I want to add a new item (row) including the column values. Columns are of type:

• email
• color
• timeline
• date
• hour
• text

I want to create the GraphQL API call in JavaScript on the browser.

Answer 1

The issue is that you need to JSON encode the column_values attribute value and escape it since it is within the query value.

Example

The msg function logs the message.

The following was tested as JavaScript running in a browser. The Monday.com API supports CORS.

  let colValues = {
    to: {text: "Larry K",
         email: "larry@example.com"},
    status: {index:1},
    timeline: {to: "2022-12-28", from: "2022-12-02"},
    date: {date: "2022-12-01"},
    hour: {hour:12, minute:0},
    text6: "12345-67890-ABCD"
  };
    
  let req = {query:
    `mutation {create_item (
          board_id: ${mon_boardId},
          group_id: ${mon_groupId},
          item_name: "New from JS",
      column_values: ${JSON.stringify(JSON.stringify(colValues))}
    ) {
            id
        }}`};
    const r = await callMondayApi(req);   
    ....

    /*
     * Makes a Monday.com API call with JSON request/results
     */
    async function callMondayApi(req) {
        let body = JSON.stringify(req, null, 4);

        try {
            let headers = new Headers({
                Accept: `application/json`,
                Authorization: `${mon_token}`,
                "Content-Type": "application/json",
            });
            let results = await fetch("https://api.monday.com/v2", {
                method: "POST",
                mode: "cors",
                headers: headers,
                body: body
            });
            if (results && results.ok) {
                return await results.json();
            } else {
                const res = await results.text();
                errMsg(
                    `Problem while making Monday API call. ` +
                    `Error: ${results ? results.statusText : "no response"}.` +
                    res
                );
                return false;
            }
        } catch (e) {
            errMsg(`Problem while making Monday API call. ` + `Error: ${e.toString()}.`);
            return false;
        }
    }

Some details

Per the GraphQL docs, the POST JSON structure is

{
  "query": "...",
  "operationName": "...",
  "variables": { "myVariable": "someValue", ... }
}

In other words, the query/mutation is sent as a string. But within that string, the Monday.com column_values value is a JSON string!