如何为Apollo Angular中GraphQL查询的返回data指定类型？

1. 定义匹配查询结果的TypeScript接口 #

首先根据你的GraphQL查询结构，创建一个对应返回数据的接口，明确每个字段的类型：

// 匹配ExampleQuery查询的返回结构
interface ExampleQueryResult {
  hello: string;
}

2. 调用query时通过泛型指定类型 #

在调用Apollo.query()方法时，传入泛型参数指定返回数据的类型，TypeScript就会自动推断data的类型，不再是unknown：

public ngOnInit(): void {
  this.apollo.query<ExampleQueryResult>({
    query: GET_HELLO
  }).subscribe(({ data, loading }) => {
    // 此时data被TypeScript识别为ExampleQueryResult类型
    console.log(data.hello, loading);
    // 给something赋值也不会有类型报错
    this.something = data.hello;
  });
}

扩展：带变量的查询类型处理 #

如果后续你的查询需要传入变量，还可以通过第二个泛型参数指定变量的类型，进一步增强类型安全：

// 带变量的查询示例
const GET_GREETING = gql`
  query GreetingQuery($name: String!) {
    greeting(name: $name)
  }
`;

// 变量类型接口
interface GreetingQueryVariables {
  name: string;
}

// 返回结果类型接口
interface GreetingQueryResult {
  greeting: string;
}

// 调用时指定两个泛型：返回结果类型、变量类型
this.apollo.query<GreetingQueryResult, GreetingQueryVariables>({
  query: GET_GREETING,
  variables: { name: "Peter" }
}).subscribe(({ data }) => {
  console.log(data.greeting); // 类型安全，有完整提示
});

这样处理后，不仅能消除unknown类型的问题，还能获得TypeScript的类型校验和智能提示，避免潜在的类型错误。

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