基于Zapier CLI的自定义输入字段加载、动态渲染及数据存储问询

我来帮你拆解这两个Zapier CLI的实际开发问题，都是做自定义集成时经常碰到的场景：

在Zapier CLI中，加载可自定义输入字段核心靠动态字段配置，主要有两种常用方式，对应不同的场景：

场景1：需要用户从动态加载的下拉选项中选择 #

用loadOptions函数实现，它会在用户触发下拉框时调用你的API，返回可选择的选项列表：

const fetchDataAction = {
  key: 'fetch_data',
  noun: 'Data',
  display: {
    label: 'Fetch Data from Custom API',
    description: 'Pulls data based on your API inputs'
  },
  inputFields: [
    {
      key: 'api_endpoint',
      label: 'API Endpoint',
      type: 'string',
      required: true,
      helpText: 'Enter your API base endpoint (e.g., https://api.yourservice.com)'
    },
    {
      key: 'resource_id',
      label: 'Target Resource',
      type: 'string',
      required: true,
      // 动态加载下拉选项
      loadOptions: async (z, bundle) => {
        const response = await z.request({
          url: `${bundle.inputData.api_endpoint}/resources`,
          method: 'GET'
        });
        // 转换为Zapier要求的选项格式
        return response.data.map(resource => ({
          key: resource.id,
          label: `${resource.name} (ID: ${resource.id})`
        }));
      }
    }
  ],
  perform: async (z, bundle) => {
    // 执行实际数据拉取逻辑
    const response = await z.request({
      url: `${bundle.inputData.api_endpoint}/resources/${bundle.inputData.resource_id}`,
      method: 'GET'
    });
    return response.data;
  }
};

场景2：根据用户输入动态生成新的输入字段 #

用dynamicFields函数，它会在用户完成某个输入后自动触发，返回新的输入字段配置，和原有字段合并展示：

inputFields: [
  {
    key: 'resource_type',
    label: 'Resource Type',
    type: 'string',
    required: true,
    choices: ['user', 'post', 'comment']
  },
  // 动态生成对应资源类型的专属字段
  async function dynamicFields(z, bundle) {
    if (!bundle.inputData.resource_type) return [];
    
    const response = await z.request({
      url: `https://api.yourservice.com/${bundle.inputData.resource_type}/fields`,
      method: 'GET'
    });
    
    return response.data.fields.map(field => ({
      key: field.api_key,
      label: field.display_name,
      type: field.data_type,
      required: field.is_required,
      helpText: field.description
    }));
  }
]

问题1：获取响应后在同一输入栈重新渲染字段是否可行？ #

完全可行，用上面提到的dynamicFields就能实现。当用户完成某个输入（比如输入API密钥和资源ID），Zapier会自动调用dynamicFields，你可以在这个函数里调用API获取响应，然后把响应数据转换成可编辑的输入字段（带默认值），这些字段会直接追加/更新到原有的输入栈中。

举个贴合你需求的示例：

inputFields: [
  {
    key: 'api_key',
    label: 'API Key',
    type: 'string',
    required: true,
    helpText: 'Enter your API authentication key'
  },
  {
    key: 'resource_id',
    label: 'Resource ID',
    type: 'string',
    required: true,
    helpText: 'Enter the ID of the resource you want to fetch'
  },
  async function dynamicFields(z, bundle) {
    // 确保用户已经输入了必要的参数
    if (!bundle.inputData.api_key || !bundle.inputData.resource_id) return [];
    
    // 调用API获取资源详情
    const response = await z.request({
      url: `https://api.yourservice.com/resources/${bundle.inputData.resource_id}`,
      method: 'GET',
      headers: { 'Authorization': `Bearer ${bundle.inputData.api_key}` }
    });
    const resourceData = response.data;
    
    // 将API响应转换为可编辑的输入字段，默认值设为响应数据
    return Object.entries(resourceData).map(([key, value]) => ({
      key: `prefilled_${key}`,
      label: key.replace('_', ' ').replace(/^\w/, c => c.toUpperCase()),
      type: typeof value === 'number' ? 'integer' : 'string',
      required: false,
      default: value,
      helpText: 'Auto-populated from API response - you can edit this if needed'
    }));
  }
]

用户输入完resource_id后，Zapier会自动拉取数据并在同一个输入区域展示带默认值的可编辑字段，用户可以直接修改这些值。

问题2：不用下拉输入字段，如何加载并存储数据？ #

有几种实用的方式，根据你的需求选择：

方式1：用beforePerform钩子预加载数据并临时存储

如果你不需要用户交互，只想在执行动作前自动加载数据供后续使用，可以用beforePerform把数据存在bundle.store（Zapier的临时存储）：

const createItemAction = {
  // ...其他配置
  beforePerform: [async (z, bundle) => {
    // 预加载全局配置数据
    const settingsResponse = await z.request({
      url: 'https://api.yourservice.com/global-settings',
      method: 'GET',
      headers: { 'Authorization': `Bearer ${bundle.inputData.api_key}` }
    });
    // 存储到bundle.store，供perform步骤使用
    bundle.store.globalSettings = settingsResponse.data;
    return bundle;
  }],
  perform: async (z, bundle) => {
    // 从临时存储中读取数据
    const defaultCategory = bundle.store.globalSettings.default_category;
    // 执行创建逻辑
    const createResponse = await z.request({
      url: 'https://api.yourservice.com/items',
      method: 'POST',
      headers: { 'Authorization': `Bearer ${bundle.inputData.api_key}` },
      body: {
        name: bundle.inputData.item_name,
        category: defaultCategory
      }
    });
    return createResponse.data;
  }
};

方式2：用compute函数自动填充输入字段值

如果你想在用户输入时自动加载某个字段的默认值（不需要下拉），可以用compute函数：

inputFields: [
  {
    key: 'api_key',
    label: 'API Key',
    type: 'string',
    required: true
  },
  {
    key: 'default_assignee',
    label: 'Default Assignee ID',
    type: 'string',
    required: false,
    // 自动加载当前用户的默认经办人ID
    compute: async (z, bundle) => {
      if (!bundle.inputData.api_key) return '';
      const userResponse = await z.request({
        url: 'https://api.yourservice.com/current-user',
        method: 'GET',
        headers: { 'Authorization': `Bearer ${bundle.inputData.api_key}` }
      });
      return userResponse.data.default_assignee_id;
    }
  }
]

方式3：在perform步骤中直接加载使用

如果数据不需要展示给用户，只是执行动作时需要用到，直接在perform函数里调用API获取即可：

perform: async (z, bundle) => {
  // 先加载需要的元数据
  const metadataResponse = await z.request({
    url: 'https://api.yourservice.com/metadata',
    method: 'GET',
    headers: { 'Authorization': `Bearer ${bundle.inputData.api_key}` }
  });
  const metadata = metadataResponse.data;
  
  // 使用元数据和用户输入执行动作
  const resultResponse = await z.request({
    url: 'https://api.yourservice.com/process',
    method: 'POST',
    headers: { 'Authorization': `Bearer ${bundle.inputData.api_key}` },
    body: {
      input: bundle.inputData.user_input,
      template_id: metadata.default_template_id
    }
  });
  return resultResponse.data;
}

内容的提问来源于stack exchange，提问作者kalsara Magamage