RTK查询| 使另一个 API 服务的 API 服务的缓存失效

Question

我创建了多个 RTK 查询 API 服务，并分成多个文件。对于这个问题我有两个服务：“合同”和“房产”。当合约更新时，合约服务应该能够使属性缓存失效，但即使在向合约服务提供“属性”标签之后，缓存也不会失效。

这是我的设置：

特性：

export const propertyApi = createApi({
    reducerPath: 'propertyApi',
    baseQuery: fetchBaseQuery({ baseUrl: `${API_BASE_URL}/properties` }),
    tagTypes: ['Properties'],
    endpoints: builder => ({
        // many endpoints
    })
})

export const {
    // many hooks
} = propertyApi

合同：

export const contractApi = createApi({
    reducerPath: 'contractApi',
    baseQuery: fetchBaseQuery({ baseUrl: `${API_BASE_URL}/contracts` }),
    tagTypes: ['Contracts', 'Properties'],
    endpoints: builder => ({
        // ...
        modifyContract: builder.mutation<Contract, { contract: Partial<ContractDto>, contractId: Contract['id'], propertyId: Property['id'] }>({
            query: ({ contract, contractId }) => {
                return {
                    url: `/${contractId}`,
                    method: 'PATCH',
                    credentials: "include",
                    body: contract
                }
            },
            // to my understanding, this should invalidate the property cache for the property with 'propertyId', but it doesn't seem to work
            invalidatesTags: (_res, _err, { propertyId }) => ['Properties', 'Contracts', { type: 'Properties', id: propertyId }]
        })
    })
})

export const {
    // ...
    useModifyContractMutation
} = contractApi

店铺设置：

export const STORE_RESET_ACTION_TYPE = 'RESET_STORE'

const combinedReducer = combineReducers({
    [photoApi.reducerPath]: photoApi.reducer,
    [authApi.reducerPath]: authApi.reducer,
    [propertyApi.reducerPath]: propertyApi.reducer,
    [cronApi.reducerPath]: cronApi.reducer,
    [contractApi.reducerPath]: contractApi.reducer,
    auth: authReducer
})

const rootReducer: Reducer = (state: RootState, action: AnyAction) => {
    if (action.type === STORE_RESET_ACTION_TYPE) {
        state = {} as RootState
    }
    return combinedReducer(state, action)
}

export const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => {
        return getDefaultMiddleware().concat([
            photoApi.middleware,
            authApi.middleware,
            propertyApi.middleware,
            cronApi.middleware,
            contractApi.middleware,
            errorHandlerMiddleware
        ])
    }
})

setupListeners(store.dispatch)

export type AppDispatch = typeof store.dispatch
export type RootState = ReturnType<typeof store.getState>
export type AppThunk<ReturnType = void> = ThunkAction<
    ReturnType,
    RootState,
    unknown,
    Action<string>
>

export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

Answer 1

如果这些 api 服务具有相互依赖的数据（这有点暗示它们应该使彼此无效），那么它们不应该是多个 api 服务- 它们实际上只是一个 api 的多个端点。我们在文档中的多个位置进行了这样的说明。

引用快速入门教程为例：

通常，您的应用程序需要与之通信的每个基本 URL 应该只有一个 API 切片。例如，如果您的网站从 /api/posts 和 /api/users 获取数据，您将拥有一个以 /api/ 作为基本 URL 的 API 切片，以及帖子和用户的单独端点定义。这使您可以通过定义跨端点的标签关系来有效地利用自动重新获取。

相反，如果您想将一个 api 拆分为多个文件，您可以使用文档中描述的代码拆分机制来实现。

这也意味着您不必在调用中添加大量 api 切片和中间件configureStore，只需添加一个即可。

Answer 2

invalidateTags为此，有一个特定的方法。

import propertyApi from ...;

...

  query: ...
  async onQueryStarted(_, { dispatch, queryFulfilled }) {
    await queryFulfilled;
    dispatch(propertyApi.util.invalidateTags(["Properties"]));
  },

另外，我们希望在查询成功执行后调用它，因此作为一个选项，我们可以使用带有参数onQueryStarted的生命周期 api 回调queryFulfilled

queryFulfilled 返回一个承诺，该承诺将解析为数据或引发异常