Next.js中使用片段时Apollo GraphQL Client数据undefined问题

我有一个使用Apollo GraphQL Client 3.7.17的Next.js项目，以下非片段写法的代码可正常运行：

const { loading, data, error } = useQuery(gql`
  query GetTeamCurrentWeek($teamId: ID!) {
    team(id: $teamId, idType: DATABASE_ID) {
      teamMeta {
        currentweek
      }
    }
  }
`,
  {
    variables: {
      teamId: 715
    }
  }
);

但改为使用片段的写法后，data返回undefined：

fragment teamCurrentWeek on RootQuery {
  team(id: $teamId, idType: DATABASE_ID) {
    teamMeta {
      currentweek
    }
  }
}
query GetTeamCurrentWeek($teamId: ID!) {
  ...teamCurrentWeek
}

已确认：将该片段查询放入GraphiQL IDE可正常返回数据，与非片段版本结果一致，说明语法和底层数据结构均正确。

问题出在片段对变量的引用方式——虽然服务端（WPGraphQL）允许片段直接引用查询层面的变量，但Apollo Client的客户端解析逻辑要求片段显式声明它所依赖的变量，否则无法正确绑定变量值，导致查询没有返回数据。

修正方案：给片段声明所需变量 #

在片段定义中添加变量声明，确保变量作用域覆盖到片段内部的字段参数：

const { loading, data, error } = useQuery(gql`
  fragment teamCurrentWeek on RootQuery($teamId: ID!) {
    team(id: $teamId, idType: DATABASE_ID) {
      teamMeta {
        currentweek
      }
    }
  }
  query GetTeamCurrentWeek($teamId: ID!) {
    ...teamCurrentWeek
  }
`,
  {
    variables: {
      teamId: 715
    }
  }
);

这样修改后，Apollo Client就能正确识别片段依赖的变量，并将查询传入的teamId值传递到片段的team字段参数中，查询即可正常返回数据。

另外可排查两个潜在问题：

• 确保片段和查询定义在同一个gql模板字符串中，否则Apollo Client无法关联片段与查询
• 确认Next.js项目中的Apollo Client配置未开启严格变量校验规则，避免未声明的变量被拦截

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