TanStack Query中关于查询键与Axios实例的注意事项

在TanStack Query的使用过程中，开发者有时会遇到一些关于查询键(Query Key)的特殊情况。最近有用户反馈，在查询键数组中包含Axios实例时会出现意外行为，这实际上揭示了前端开发中一个值得注意的设计模式问题。

问题现象

当开发者尝试将Axios实例直接放入查询键数组时，例如：

const { data } = useQuery({
  queryKey: ['users', axiosInstance],
  queryFn: async ({ queryKey }) => {
    const [, axios] = queryKey;
    // 这里axios会变成一个Promise
  }
});

会出现Axios实例被意外转换的问题。这是因为TanStack Query内部会对查询键中的对象进行特殊处理，如果对象具有get方法，它会被当作可获取属性(getter)的对象来处理。

根本原因

这个问题源于两个方面的设计决策：

1. TanStack Query的查询键需要是可序列化的，以便于缓存和调试
2. 框架内部对包含get方法的对象有特殊处理逻辑

Axios实例作为一个复杂的服务对象，不仅包含HTTP方法，还包含各种配置和拦截器，它本质上是一个不可序列化的对象，不应该出现在查询键中。

正确实践

对于需要在查询函数中使用Axios实例的场景，有以下几种推荐做法：

1. 直接导入使用

如果Axios实例是通过模块导入的，最简单的方式是直接在查询函数中使用：

import axiosInstance from './axios-config';

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: () => axiosInstance.get('/users')
});

2. 使用meta字段

TanStack Query提供了meta字段来传递任意元数据：

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: ({ meta }) => meta.axios.get('/users'),
  meta: { axios: axiosInstance }
});

3. 使用依赖注入

对于更复杂的场景，可以考虑使用依赖注入模式：

const createUserQuery = (axios) => ({
  queryKey: ['users'],
  queryFn: () => axios.get('/users')
});

// 使用时
const { data } = useQuery(createUserQuery(axiosInstance));

设计原则

这个案例揭示了几个重要的前端设计原则：

1. 序列化原则：缓存相关的数据应该是可序列化的，便于存储和传输
2. 关注点分离：服务实例应该与查询逻辑分离
3. 显式优于隐式：依赖关系应该明确声明，而不是通过查询键隐式传递

总结

在TanStack Query中使用查询键时，开发者应该避免放入不可序列化的对象，特别是服务实例。正确的做法是通过模块导入、meta字段或依赖注入等方式来使用这些服务实例。这不仅解决了技术问题，也使代码更加清晰和可维护。