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