Grafabase查询中变量声明为String!时报未定义错误的原因咨询

1. 直接报错原因
   你的GraphQL查询定义了$endcursor: String!（!表示变量为必填），但发起请求时未传入该变量（从错误日志的"variables":{}可知变量对象为空），GraphQL的类型校验会直接拦截请求，抛出Variable endcursor is not defined错误。

2. 改成非必填（String）能运行的原因
   去掉!后变量变为可选，请求不传该变量时，GraphQL会自动用null作为默认值。而Grafabase的projectSearch接口中，after: null等价于请求第一页数据，因此查询能正常执行。

3. 生产环境的潜在问题

   • 分页逻辑失效：若后续分页时代码未正确传递endcursor，会重复请求第一页数据，用户无法查看后续内容。
   • 隐性bug难排查：非必填变量允许null值随意传入，后期维护时逻辑疏漏易引发不可预期的查询结果。
   • 性能风险：部分GraphQL引擎对null参数的处理效率低于明确参数值，大量无效请求可能拖慢生产环境响应速度。

1. 保留非空约束，确保请求始终传入endcursor #

不要去掉$endcursor的!，而是在发起请求时强制传入该变量：

• 首次请求第一页时，传入endcursor: null（Grafabase会识别为请求初始页）
• 后续分页请求时，从返回结果的pageInfo.endCursor中获取值，传入下一次查询

示例请求变量：

// 首次请求
const variables = {
  category: "your-target-category",
  endcursor: null
};

// 分页请求（当pageInfo.hasNextPage为true时）
const nextVariables = {
  category: "your-target-category",
  endcursor: response.data.projectSearch.pageInfo.endCursor
};

2. 优化代码中的变量初始化逻辑 #

在调用查询的代码里，提前初始化endcursor变量为null，确保每次请求都包含该字段，避免因变量缺失触发校验错误：

// 初始化分页状态
let currentEndCursor = null;

// 发起查询的函数
async function fetchProjects(category) {
  const result = await client.query({
    query: projectsQuery,
    variables: {
      category,
      endcursor: currentEndCursor
    }
  });
  // 更新游标状态
  currentEndCursor = result.data.projectSearch.pageInfo.endCursor;
  return result;
}

3. 增加分页状态的边界判断 #

处理分页时判断pageInfo.hasNextPage的值：

• 如果为true，则用返回的endCursor作为下一次请求的变量
• 如果为false，则停止发起分页请求，避免无效调用

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