Firestore写入操作后，如何正确失效RTK Query中的标签？

问题的核心在于Firebase客户端SDK的默认行为与RTK Query的自动重新获取逻辑不匹配：

• updateDoc的Promise确实会在服务器确认写入完成后才resolve，但Firestore的getDocs默认优先读取本地缓存而非直接请求服务器。
• 当RTK Query触发invalidatesTags自动重新获取时，fetchTodos可能拿到的是未同步的本地缓存旧数据，导致看起来自动重新获取无效。

方案一：强制fetchTodos从服务器拉取最新数据 #

修改fetchTodos的查询逻辑，给getDocs添加source: 'server'选项，跳过本地缓存，确保每次重新获取都直接从服务器拿到最新内容：

fetchTodos: builder.query({
      queryFn: async ({ userId, options }) => {
        const getAllTodosQuery = query(
          collection(getFirestore(), `users/${userId}/todos`),
          ...(options?.whereClauses || []),
          ...(options?.orderBy ? [options.orderBy] : []),
          ...(options?.limit ? [options.limit] : []),
        );

        // 强制跳过本地缓存，直接从服务器获取数据
        const { docs } = await getDocs(getAllTodosQuery, { source: 'server' });

        const items = docs.map((d) => d.data());
        return { data: { items } };
      },
      providesTags: [API_TAGS.TODOS],
}),

修改后，invalidatesTags触发的自动重新获取会直接拉取服务器最新数据，无需手动更新缓存，即可恢复RTK Query的自动重新获取功能。

方案二：使用Firestore实时订阅自动同步缓存 #

如果业务需要实时同步数据（包括其他设备或客户端的修改），可以利用RTK Query的onCacheEntryAdded钩子订阅Firestore的实时更新，数据变更时自动同步到RTK缓存：

fetchTodos: builder.query({
      queryFn: async ({ userId, options }) => {
        // 初始数据获取
        const getAllTodosQuery = query(
          collection(getFirestore(), `users/${userId}/todos`),
          ...(options?.whereClauses || []),
          ...(options?.orderBy ? [options.orderBy] : []),
          ...(options?.limit ? [options.limit] : []),
        );

        const { docs } = await getDocs(getAllTodosQuery);
        const items = docs.map((d) => d.data());
        return { data: { items } };
      },
      providesTags: [API_TAGS.TODOS],
      async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {
        const { userId, options } = arg;
        const getAllTodosQuery = query(
          collection(getFirestore(), `users/${userId}/todos`),
          ...(options?.whereClauses || []),
          ...(options?.orderBy ? [options.orderBy] : []),
          ...(options?.limit ? [options.limit] : []),
        );

        // 订阅Firestore实时更新，数据变化时自动更新缓存
        const unsubscribe = onSnapshot(getAllTodosQuery, (snapshot) => {
          const items = snapshot.docs.map(d => d.data());
          updateCachedData(() => ({ items }));
        });

        await cacheDataLoaded;
        // 缓存移除时取消订阅，避免内存泄漏
        await cacheEntryRemoved;
        unsubscribe();
      },
}),

这种方案下，不仅updateTodo的修改会自动同步，其他任何对该集合的修改都会实时更新到RTK缓存，完全无需依赖invalidatesTags。

• 若仅需解决当前手动更新的问题，方案一简单直接，改动量小；
• 若业务需要实时同步数据，方案二更适合，能提供更流畅的用户体验。

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