RTK 查询标签未失效/重新获取

Question

我确信我缺少一些简单和基本的东西，但我已经查看了我能找到的所有线程和文档，但没有弄清楚我在这里没有得到什么。我刚刚开始在 React 应用程序上实现 RTK 查询，并且已经一一解决了端点问题。

我有 2 组端点、客户端和合约。在数据库中，合同是客户的子文档。所有调用都工作正常（没有错误，所有结果都已完成），并且标签在客户端端点中无效，但在合同端点中无效。我尝试过使用 ['Contract'] 的简单基本标签，并尝试了下面代码中的内容（以及 id 的一些变体），但所有结果都是相同的 - 必须手动重新加载页面才能重新获取。

我的使用基于此处给出的示例：https ://redux-toolkit.js.org/rtk-query/usage/automated-refetching

再说一次，我确信这是一些简单的事情，我不理解 RTK 查询，但我无法发现它。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:5000'}),
    tagTypes: ['Client', 'Contract', 'User', 'Visit'],
    endpoints: builder => ({
        getClients:  builder.query({
            query: () => '/clientapi/clients',
        providesTags: ['Client']
        }),
        getClient: builder.query({
            query: clientId => `/clientapi/clients/${clientId}`,
            providesTags: ['Client']
        }),
        addNewClient: builder.mutation({
            query: ({ values }) => ({
                url: '/clientapi/clients',
                method: 'POST',
                body: values
            }),
            invalidatesTags: ['Client']
        }),
        editClient: builder.mutation({
            query: (arg) => {
                const {clientId, values} = arg;
                console.log("clientId: ", clientId, values);
                return {
                url: `/clientapi/clients/${clientId}`,
                method: 'PATCH',
                body: values
                }
            },
            invalidatesTags: ['Client']
        }),
        deleteClient: builder.mutation({
            query: (clientId) => ({
                url: `/clientapi/clients/${clientId}`,
                method: 'DELETE',
                responseHandler: (response) => response.text()
            }),
            invalidatesTags: ['Client']
        }),

        //Contract endpoints
        getContracts:  builder.query({
            
            query: (clientId) => {
            return {
             url:   `/clientapi/clients/${clientId}/contracts`,
            providesTags: //['Contract']
            
            // (result = [], error, arg) => [
            //     'Contract',
            //     ...result.map(({ id }) => ({ type: 'Contract', id}))
            // ]
            
            (result) =>
                result ? [
                    ...result.map(({ id }) => ({ type: 'Contract', id})),
                    { type: 'Contract', id: 'LIST'},
                    ] : [{ type: 'Contract', id: 'LIST'}]
                    
                }
        }
        }),
        getContract: builder.query({
            query: (arg) => {
                const {clientId, contractId} = arg;
                return {
                url: `/clientapi/clients/${clientId}/contracts/${contractId}`,
                method: 'GET'
                }
            },
            providesTags: (result, error, id) => [{ type: 'Contract', id }]
        }),
        addNewContract: builder.mutation({
            query: (arg) => {
                const {clientId, data} = arg;
                return {
                url: `/clientapi/clients/${clientId}/contracts`,
                method: 'POST',
                body: data
                }
            },
            invalidatesTags: [{ type: 'Contract', id: 'LIST' }]
        }),
        editContract: builder.mutation({
            query: (arg) => {
                const {clientId, contractId, data} = arg;
                console.log("clientId: ", clientId, "contractId: ", contractId)
                return {
                url: `/clientapi/clients/${clientId}/contracts/${contractId}`,
                method: 'POST',
                body: data
                }
            },
            invalidatesTags: (result, error, id) => [{ type: 'Contract', id: id}]
        }),
        deleteContract: builder.mutation({
            query: (arg) => {
                const {clientId, contractId} = arg;
                return {
                url: `/clientapi/clients/${clientId}/contracts/${contractId}`,
                method: 'DELETE',
                responseHandler: (response) => response.text()
                }
            },
            invalidatesTags: [{ type: 'Contract', id: 'LIST' }]
        }),

根据对其他问题的回答，他们指出需要在商店中设置中间件，我在完成教程时就这样做了，但也许我错过了一些东西？

import { configureStore } from '@reduxjs/toolkit/query/react';
import { apiSlice } from './apiSlice';

export default configureStore({
    reducer: {
        [apiSlice.reducerPath]: apiSlice.reducer
    },
    middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware)
});

任何帮助将不胜感激。谢谢

Answer 1

弄清楚了，我已将 getContracts ProvidesTags 放在查询的同一 {} 中，而不是后面。我想我忽略了一些简单的事情......

getContracts:  builder.query({
            
            query: (clientId) => {
            return {
             url:   `/clientapi/clients/${clientId}/contracts`,
            providesTags: //['Contract']
            
            // (result = [], error, arg) => [
            //     'Contract',
            //     ...result.map(({ id }) => ({ type: 'Contract', id}))
            // ]
            
            (result) =>
                result ? [
                    ...result.map(({ id }) => ({ type: 'Contract', id})),
                    { type: 'Contract', id: 'LIST'},
                    ] : [{ type: 'Contract', id: 'LIST'}]
                    
                }
        }
        }),

变成：

getContracts:  builder.query({
            
            query: (clientId) => {
            return {
             url:   `/clientapi/clients/${clientId}/contracts`,
            }
        },
         providesTags: //['Contract']
            
            // (result = [], error, arg) => [
            //     'Contract',
            //     ...result.map(({ id }) => ({ type: 'Contract', id}))
            // ]
            
            (result) =>
                result ? [
                    ...result.map(({ id }) => ({ type: 'Contract', id})),
                    { type: 'Contract', id: 'LIST'},
                    ] : [{ type: 'Contract', id: 'LIST'}]
                    
        }),

谢谢@phry，只需要弄清楚为什么标签没有被识别。