Vue3 Quasar+GraphQL项目VS Code类型不匹配警告修复求助

这个警告是因为TypeScript无法正确推断useQuery返回的refetch函数的参数类型，即便你传入的是常量，TS依然认为参数应该是undefined。以下是几种可靠的修复方式：

方法1：显式指定useQuery的泛型参数 #

给useQuery传入泛型，明确查询的变量类型和返回数据类型，让TS能正确识别refetch的参数：

// 先定义查询的变量和返回类型
interface OneUserVariables {
  id: number;
}

interface OneUserResponse {
  oneUser: {
    id: number;
    firstName: string;
    lastName: string;
  };
}

const { refetch: oneUserFetch, loading: oneUserLoading } = useQuery<OneUserResponse, OneUserVariables>(gql`
query oneUser($id: Int!) {
    oneUser(userId: $id) {
      id
      firstName
      lastName
    }
  }
`);

async function onClickSubmit() {
  const fetchedUser = await oneUserFetch({ id: 344 }); // 警告消失
}

方法2：手动给oneUserFetch指定类型 #

如果不想定义完整的接口，也可以直接给refetch函数指定参数类型：

const { refetch: oneUserFetch, loading: oneUserLoading } = useQuery(gql`
query oneUser($id: Int!) {
    oneUser(userId: $id) {
      id
      firstName
      lastName
    }
  }
`);

// 手动指定函数类型
const typedOneUserFetch = oneUserFetch as (variables: { id: number }) => Promise<any>;

async function onClickSubmit() {
  const fetchedUser = await typedOneUserFetch({ id: 344 });
}

方法3：检查GraphQL代码生成工具（若使用） #

如果你用了@graphql-codegen/cli这类工具自动生成类型，确保配置正确，生成的类型文件已被正确导入，这样useQuery会自动获取正确的类型推断，无需手动定义。

补充说明 #

代码能正常运行是因为GraphQL客户端在运行时会忽略TS类型检查，但TS的类型推断错误导致了编辑器的语法着色异常。通过显式指定类型，既能修复警告，也能恢复VS Code的语法着色功能。

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