GraphQL/Hasura订阅参数为null时的特殊处理问询

针对你的场景，我有几个实用的方案来处理当virtual_chassis_id为null时的情况，既可以避免返回所有数据，又能在前端展示对应的提示内容：

方案1：前端跳过订阅+模板条件渲染（推荐） #

在Vue Apollo的订阅配置里添加skip选项，当id为null时不执行订阅请求，同时在模板里根据id的状态展示不同内容：

首先修改你的Apollo配置：

apollo: {
  $subscribe: {
    dcim_device: {
      query: require("../../graphql/subscribeToNewDevicesByVCid.gql"),
      // 使用可选链操作符避免null/undefined报错
      variables() {
        return { id: this.node.dcim_virtualchassis?.id };
      },
      // 当id不存在时跳过订阅
      skip() {
        return !this.node.dcim_virtualchassis?.id;
      },
      result({ data }) {
        this.devices = data.dcim_device;
        console.log(this.devices);
      },
    },
  },
},

然后在模板里添加条件渲染：

<template>
  <div class="device-container">
    <!-- 当没有选中有效虚拟机箱时展示提示 -->
    <div v-if="!node.dcim_virtualchassis?.id" class="empty-state">
      <p>请选择一个有效的虚拟机箱来查看关联设备</p>
    </div>
    <!-- 有有效id时展示设备列表 -->
    <div v-else>
      <div v-for="device in devices" :key="device.id" class="device-item">
        <h3>{{ device.name }}</h3>
        <p>Serial: {{ device.serial }}</p>
        <!-- 其他设备信息 -->
      </div>
    </div>
  </div>
</template>

这个方案的好处是：

• 避免了不必要的GraphQL请求（当id为null时不会发送订阅）
• 前端逻辑清晰，用户体验友好

方案2：修改GraphQL订阅，让id为null时返回空结果 #

如果你希望即使id为null也发送请求，但只返回空数组而不是所有数据，可以修改Hasura的查询条件，确保当$id为null时没有匹配的记录：

subscription MySubscription($id: Int) {
  dcim_device(
    where: {
      # 只有当$id不为null且virtual_chassis_id等于$id时才返回数据
      _and: [
        { virtual_chassis_id: { _eq: $id } },
        { virtual_chassis_id: { _is_null: false } }
      ]
    }
  ) {
    id
    name
    serial
    site_id
    status
    ip_address { address }
    dcim_platform { name }
    device_tags { tag_id extras_tag { id name color } }
    dcim_devicerole { color name }
    virtual_chassis_id
    dcim_virtualchassis { id }
    dcim_interfaces { enabled name id type }
  }
}

然后在前端的result回调里判断返回的设备数组是否为空，再展示对应内容：

result({ data }) {
  this.devices = data.dcim_device;
  if (this.devices.length === 0) {
    // 可以设置一个状态变量来控制提示显示
    this.showEmptyMessage = true;
  } else {
    this.showEmptyMessage = false;
  }
  console.log(this.devices);
},

方案3：在变量处理时手动控制查询逻辑 #

你也可以在variables函数里根据id是否存在，动态修改查询条件，但这种方式需要写两个不同的查询或者使用条件变量，相对复杂一些，比如：

variables() {
  const id = this.node.dcim_virtualchassis?.id;
  return {
    // 如果id为null，传递一个不可能匹配的id值（比如-1，假设你的设备id都是正数）
    id: id ?? -1,
  };
},

这样当id为null时，查询会找virtual_chassis_id = -1的设备，自然返回空数组，然后前端再处理空数组的情况。

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