如何更新RTK Query查询状态?复用分类查询数据的方法
问题
我有一个获取全部分类的RTK Query查询:
getAllCategoriesAdmin: builder.query({ query: () => 'categories/allAdmin', providesTags: ['CategoriesAdmin'] })
通过useGetAllCategoriesAdminQuery获取数据:
const { isLoading, isError, data = {} } = useGetAllCategoriesAdminQuery();
现在要实现搜索功能,新建了一个查询:
getAllCategoriesAdminSearch: builder.query({ query: () => 'categories/allAdminSearch', providesTags: ['CategoriesAdmin'], })
请问是否可以更新useGetAllCategoriesAdminQuery返回的data,无需通过useGetAllCategoriesAdminSearchQuery重新声明data变量?
回答
不可以直接更新useGetAllCategoriesAdminQuery返回的data,核心原因是:
RTK Query里每个查询Hook和对应的查询定义是一一绑定的,useGetAllCategoriesAdminQuery只会读取、维护getAllCategoriesAdmin这个查询的缓存数据,和getAllCategoriesAdminSearch是两个完全独立的缓存条目——哪怕它们的providesTags相同,也不会互相覆盖对方的缓存内容。
推荐两种更合理的处理方案:
- 合并为同一个查询,用参数控制搜索逻辑
把搜索条件整合到原查询中,根据是否传入搜索参数调整请求逻辑,这样只用一个Hook就能覆盖两种场景:
getAllCategoriesAdmin: builder.query({ query: (searchQuery) => { // 根据搜索参数选择对应接口,也可以统一用一个接口传查询参数 const url = searchQuery ? 'categories/allAdminSearch' : 'categories/allAdmin'; return { url }; }, providesTags: ['CategoriesAdmin'] })
使用时只需根据搜索状态传参:
const [searchText, setSearchText] = useState(''); const { isLoading, isError, data = {} } = useGetAllCategoriesAdminQuery(searchText);
- 动态切换Hook,复用data变量
如果必须保留两个独立查询,可以通过条件判断动态调用对应的Hook,实现data变量的复用:
const [hasSearch, setHasSearch] = useState(false); const { isLoading, isError, data = {} } = hasSearch ? useGetAllCategoriesAdminSearchQuery() : useGetAllCategoriesAdminQuery();
内容的提问来源于stack exchange,提问作者mne_web_dev
相关产品推荐
相关产品推荐

