Grafbase GraphQL查询生产环境报错：category字段null类型不符合要求

问题根源 #

生产环境报错的核心原因有两个：

1. Grafbase对GraphQL过滤器的参数校验更严格，eq操作符不接受null值作为参数
2. 调用查询时，当category为undefined或null，仍将其传入变量并作为过滤条件，触发了类型校验错误

方法一：动态构建查询（推荐） #

通过JS动态生成查询内容，仅当category有有效值时才添加过滤条件，避免传递null给过滤器：

1. 修改查询生成逻辑 #

// 动态生成查询字符串
export const getProjectsQuery = (category?: string | null) => {
  // 仅当category存在时，添加过滤条件
  const filterSegment = category ? 'filter: {category: {eq: $category}}' : '';
  
  return `
    query getProjects($category: String, $endcursor: String) {
      projectSearch(
        first: 8, 
        after: $endcursor, 
        ${filterSegment}
      ) {
        pageInfo {
          hasNextPage
          hasPreviousPage
          startCursor
          endCursor
        }
        edges {
          node {
            title
            githubUrl
            description
            liveSiteUrl
            id
            image
            category
            createdBy {
              id
              email
              name
              avatarUrl
            }
          }
        }
      }
    }
  `;
};

2. 调整查询调用代码 #

export const fetchAllProjects = (
  category?: string | null,
  endcursor?: string | null
) => {
  client.setHeader("x-api-key", apiKey);
  
  // 仅传递有有效值的变量
  const queryVariables: Record<string, string> = {};
  if (category) queryVariables.category = category;
  if (endcursor) queryVariables.endcursor = endcursor;

  return makeGraphQLRequest(getProjectsQuery(category), queryVariables);
};

方法二：使用GraphQL指令跳过过滤条件 #

利用Grafbase支持的@include指令，根据变量值决定是否应用过滤条件：

1. 修改查询定义 #

export const projectsQuery = `
  query getProjects($category: String, $endcursor: String, $shouldFilterCategory: Boolean!) {
    projectSearch(
      first: 8, 
      after: $endcursor, 
      filter: {
        # 仅当shouldFilterCategory为true时，才应用category过滤
        category: {eq: $category} @include(if: $shouldFilterCategory)
      }
    ) {
      pageInfo {
        hasNextPage
        hasPreviousPage
        startCursor
        endCursor
      }
      edges {
        node {
          title
          githubUrl
          description
          liveSiteUrl
          id
          image
          category
          createdBy {
            id
            email
            name
            avatarUrl
          }
        }
      }
    }
  }
`;

2. 调整查询调用代码 #

export const fetchAllProjects = (
  category?: string | null,
  endcursor?: string | null
) => {
  client.setHeader("x-api-key", apiKey);

  return makeGraphQLRequest(projectsQuery, {
    category: category || null,
    endcursor: endcursor || null,
    // 根据category是否存在，决定是否启用过滤
    shouldFilterCategory: !!category,
  });
};

验证要点 #

• 测试category为undefined或null的场景，确认查询不再触发类型错误
• 检查生产环境返回数据，确认无过滤时返回所有项目，有值时返回对应分类的项目

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