GraphQL+Apollo+Angular多条件动态Where查询实现方案咨询

核心思路 #

你的问题核心是避免将空值变量传入GraphQL的where条件，同时动态保留非空变量对应的过滤规则。以下是几种简单可落地的实现模式，优先推荐第一种：

模式一：客户端动态组装Where条件（最常用） #

将where条件封装成一个动态生成的变量，在调用查询前根据变量是否非空，手动拼接过滤规则数组。

步骤1：修改查询定义，将可选变量改为非必填 #

先把可能为空的变量（$eventTypeId、$from、$to）的必填标记!去掉，同时把where部分替换为变量$whereConditions：

export const GET_SCENE_EVENTS_BY_PAGINATION_FILTER = gql`
    query queryEvents($sceneId: Int!, $numberOfRows: Int!, $eventTypeId: Byte, $from: DateTime, $to: DateTime) {
        queryEvents(
            sceneId: $sceneId
            where: $whereConditions
            first: $numberOfRows
            order: [{ dateTime: DESC }]
        ) {
            ${SCENE_EVENT_RESPONSE_STRUCT}
        }
    }
`;

步骤2：在业务代码中动态生成过滤条件 #

在调用查询的地方，根据变量是否非空，组装and条件数组：

// 示例输入变量
const inputVars = {
  sceneId: 123,
  numberOfRows: 10,
  eventTypeId: null, // 空值，不加入过滤
  from: '2024-01-01T00:00:00Z', // 非空，保留条件
  to: null // 空值，不加入过滤
};

// 组装过滤规则数组
const filterClauses = [];
if (inputVars.from) {
  filterClauses.push({ dateTime: { gte: inputVars.from } });
}
if (inputVars.to) {
  filterClauses.push({ dateTime: { lte: inputVars.to } });
}
// 注意：Byte类型可能需要判断0是否为有效值，根据业务调整
if (inputVars.eventTypeId !== null && inputVars.eventTypeId !== undefined) {
  filterClauses.push({ eventTypeId: { eq: inputVars.eventTypeId } });
}

// 生成最终的where条件：有规则则用and包裹，否则传空对象（根据后端要求调整）
const whereConditions = filterClauses.length ? { and: filterClauses } : {};

// 调用GraphQL查询
client.query({
  query: GET_SCENE_EVENTS_BY_PAGINATION_FILTER,
  variables: {
    ...inputVars,
    whereConditions
  }
});

优点 #

• 逻辑直观，完全在客户端控制，不需要依赖后端特殊配置
• 避免了空值变量传入后端，符合你的需求
• 适配任何GraphQL服务端实现

模式二：利用GraphQL指令（后端支持时可选） #

如果你的GraphQL服务支持@include/@skip指令作用于where子句（部分服务如Hasura、Prisma支持），可以直接在查询中通过指令控制是否包含某个过滤条件。

查询定义 #

export const GET_SCENE_EVENTS_BY_PAGINATION_FILTER = gql`
    query queryEvents(
        $sceneId: Int!, 
        $numberOfRows: Int!, 
        $eventTypeId: Byte, 
        $from: DateTime, 
        $to: DateTime,
        # 新增布尔变量，标记是否包含对应条件
        $includeFrom: Boolean!,
        $includeTo: Boolean!,
        $includeEventType: Boolean!
    ) {
        queryEvents(
            sceneId: $sceneId
            where: {
                and: [
                    { dateTime: { gte: $from } } @include(if: $includeFrom),
                    { dateTime: { lte: $to } } @include(if: $includeTo),
                    { eventTypeId: { eq: $eventTypeId } } @include(if: $includeEventType)
                ]
            }
            first: $numberOfRows
            order: [{ dateTime: DESC }]
        ) {
            ${SCENE_EVENT_RESPONSE_STRUCT}
        }
    }
`;

调用时传入指令变量 #

client.query({
  query: GET_SCENE_EVENTS_BY_PAGINATION_FILTER,
  variables: {
    sceneId: 123,
    numberOfRows: 10,
    eventTypeId: null,
    from: '2024-01-01T00:00:00Z',
    to: null,
    // 根据变量是否非空生成布尔标记
    includeFrom: !!inputVars.from,
    includeTo: !!inputVars.to,
    includeEventType: inputVars.eventTypeId !== null && inputVars.eventTypeId !== undefined
  }
});

注意 #

• 仅适用于支持指令作用于where子句的后端服务
• 需要额外传入布尔变量，逻辑比模式一稍复杂

模式三：模板字符串动态生成查询（不推荐） #

可以通过JavaScript模板字符串直接生成包含有效条件的查询，但这种方式会破坏GraphQL的静态类型检查，仅在特殊场景下使用：

const buildQuery = (inputVars) => {
  let clauses = '';
  if (inputVars.from) clauses += `{ dateTime: { gte: $from } },`;
  if (inputVars.to) clauses += `{ dateTime: { lte: $to } },`;
  if (inputVars.eventTypeId !== null) clauses += `{ eventTypeId: { eq: $eventTypeId } },`;
  
  // 移除最后一个逗号
  clauses = clauses.replace(/,$/, '');
  
  return gql`
    query queryEvents($sceneId: Int!, $numberOfRows: Int!, $eventTypeId: Byte, $from: DateTime, $to: DateTime) {
        queryEvents(
            sceneId: $sceneId
            where: { and: [${clauses}] }
            first: $numberOfRows
            order: [{ dateTime: DESC }]
        ) {
            ${SCENE_EVENT_RESPONSE_STRUCT}
        }
    }
  `;
};

// 使用时生成查询并调用
const dynamicQuery = buildQuery(inputVars);
client.query({ query: dynamicQuery, variables: inputVars });

缺点 #

• 无法利用GraphQL的静态分析工具（如ESLint插件、代码提示）
• 容易出现语法错误，调试成本高

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