TypeScript使用Apollo useQuery赋值常量时报Vetur(2571)未知类型错误如何解决

• 第一步：先定义GraphQL查询返回结果和单个资源的TS类型，根据你实际的业务字段调整即可：

// 单个资源的类型定义
interface Resource {
  id: string;
  // 补充你业务中资源的其他字段，比如名称、链接、创建时间等
  name: string;
  url: string;
  createAt: string;
}

// GET_RESOURCES 查询返回的整体结构
interface GetResourcesRes {
  resources: Resource[];
}

// 查询入参的类型定义
interface GetResourcesParams {
  limit: number;
}

• 第二步：给useQuery传入泛型参数，绑定返回值和入参的类型：

const {
  result: fetchedResources,
  loading: fetchResourcesLoading,
  refetch: fetchResources,
  onError: apiError
// 按顺序传入返回值类型、入参类型
} = useQuery<GetResourcesRes, GetResourcesParams>(GET_RESOURCES, { limit: numberOfResults.value })

• 第三步：模板中增加非空判断，避免加载阶段返回空值导致的运行时错误：

<!-- 先判断加载完成且返回数据存在再渲染列表 -->
<template v-if="!fetchResourcesLoading && fetchedResources?.resources">
  <router-link
    v-for="resource in fetchedResources.resources"
    :key="resource.id"
    class="resource q-mb-md items-center text-black"
    tag="div"
  >
...
  </router-link>
</template>

如果项目中GraphQL查询较多，也可以接入自动类型生成工具，根据服务端Schema直接生成所有查询对应的TS类型，不需要手动编写。

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