开发者问题收集

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

2022-05-18
15062

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

我有 2 组端点、客户端和合同。在数据库中,合同是客户端的子文档。所有调用都运行良好(没有错误,所有结果都已实现),并且标签在客户端端点中无效,但在合同端点中没有。我尝试过使用一个简单的基本标签 ['Contract'],也尝试过下面的代码(以及一些 id 的变化),但结果都是一样的——必须手动重新加载页面才能重新获取。

我根据这里给出的例子使用了以下内容: https://redux-toolkit.js.org/rtk-query/usage/automated-refetching

同样,我确信这是一些我不理解的关于 RTK Query 的简单的东西,但我无法发现它。

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)
});

如能提供任何帮助,我们将不胜感激。 谢谢

1个回答

搞清楚了,我把 getContracts 的提供标签放在查询的同一个 {} 中,而不是后面。我想我忽略了一些简单的东西……

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,我只需要弄清楚为什么标签无法被识别。

Jowz
2022-05-19