使用@luke-morales/query-key-factory时queryKey属性不存在问题求助

错误信息 #

Property 'queryKey' does not exist on type 'DynamicFactoryOutput<["user", "signIn"], (credentials: SignInCredentials) => { queryKey: [string, SignInCredentials]; }, { queryKey: [string, SignInCredentials]; }>'

相关代码 #

创建Query Key的代码 #

const userKeys = createQueryKeys("user", {
  signIn: (credentials: SignInCredentials) => ({
    queryKey: ["signIn", credentials],
  }),
});

export const queryKeys = mergeQueryKeys(userKeys);

使用Mutation的代码 #

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { postSignIn } from "api/user";
import queryKeys from "./queryKeys";

export default function useSignInMutation() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: postSignIn,
    onSuccess: ({ data }) => {
      queryClient.invalidateQueries({
        queryKey: queryKeys.user.signIn.queryKey, // 报错：`queryKey` 不存在
      });

      const { accessToken, refreshToken } = data;

      localStorage.setItem("accessToken", accessToken);
      localStorage.setItem("refreshToken", refreshToken);

      navigate("/");
    },
  });
}

问题原因与解决方法 #

原因 #

你定义的signIn是一个动态Query Key工厂函数（需要接收credentials参数），因此queryKeys.user.signIn本身是函数，而非直接包含queryKey属性的对象，直接访问.queryKey必然报错。

另外，登录属于一次性Mutation操作，通常不会对应持久化的Query缓存，所以当前的缓存失效逻辑本身不合理——应该失效的是登录后需要更新的用户相关查询（比如用户信息查询），而非登录操作本身的Key。

正确做法 #

1. 若需使用动态Key：调用工厂函数并传入credentials参数才能获取queryKey，或用前缀Key批量失效分组下的查询：

// 方式1：传入凭证生成完整Key（需确保能拿到登录用的credentials）
queryClient.invalidateQueries({
  queryKey: queryKeys.user.signIn(credentials).queryKey,
});

// 方式2：用前缀Key失效该分组所有关联查询
queryClient.invalidateQueries({ queryKey: ["user", "signIn"] });

2. 更合理的缓存失效逻辑：登录成功后，失效用户信息类的查询Key（而非登录操作Key）：

// 假设存在用户信息查询的静态Key
queryClient.invalidateQueries({ queryKey: queryKeys.user.profile.queryKey });

3. 调整Query Key定义：如果登录操作不需要动态参数，可将signIn改为静态对象：

const userKeys = createQueryKeys("user", {
  signIn: { queryKey: ["signIn"] }, // 静态Key，无需函数
});

此时即可直接访问queryKeys.user.signIn.queryKey。

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