如何在浏览器端用JavaScript编写Monday.com指定列的看板项新增GraphQL API调用

核心说明 #

要在浏览器端通过JavaScript调用Monday.com的GraphQL API添加包含多类型列的看板项，需使用create_item mutation，同时根据列类型传入对应格式的参数。

各列类型参数格式 #

• Text列：直接传入字符串值，格式："text列的内部名称": "自定义文本"
• Email列：传入标准邮箱字符串，格式："email列的内部名称": "user@example.com"
• Color列：传入看板预设/自定义的颜色标识（如"red"、"green"或自定义颜色ID），格式："color列的内部名称": "red"
• Date列：传入YYYY-MM-DD格式的日期字符串，格式："date列的内部名称": "2024-05-20"
• Hour列：传入HH:MM格式的时间字符串，格式："hour列的内部名称": "14:30"
• Timeline列：传入包含from和to的对象，值为YYYY-MM-DD格式日期，格式："timeline列的内部名称": {"from": "2024-05-20", "to": "2024-05-25"}

完整浏览器端JS代码示例 #

// 替换为你的Monday.com API密钥和目标看板ID
const API_KEY = 'your_monday_api_key';
const BOARD_ID = 1234567890;

async function createNewBoardItem() {
  try {
    const response = await fetch('https://api.monday.com/v2', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': API_KEY
      },
      body: JSON.stringify({
        query: `
          mutation {
            create_item(
              board_id: ${BOARD_ID},
              item_name: "新添加的项名称",
              column_values: JSON.stringify({
                "text_column": "这是文本列内容",
                "email_column": "contact@example.com",
                "color_column": "blue",
                "date_column": "2024-05-20",
                "hour_column": "10:15",
                "timeline_column": {"from": "2024-05-20", "to": "2024-05-27"}
              })
            ) {
              id
              name
            }
          }
        `
      })
    });

    const data = await response.json();
    if (data.errors) {
      console.error('创建失败:', data.errors);
    } else {
      console.log('项创建成功:', data.data.create_item);
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
}

// 调用函数执行创建操作
createNewBoardItem();

注意事项 #

• 代码中的列内部名称需替换为你看板中实际列的内部名称（可在看板列设置中查看）
• 生产环境中请勿直接在前端代码暴露API密钥，建议通过后端代理转发请求
• 若看板有必填列，需确保在column_values中传入对应有效值

内容的提问来源于stack exchange，提问作者Larry K