Redux RTK 查询 invalidatesTags 在突变后未被调用
2021-09-22
4214
我一直在尝试弄清楚为什么标签无效化不起作用,并添加了一些日志记录。
getMe
中的
providesTags
工作正常,但
login
中的
invalidatesTags
从未被调用。可能出了什么问题?
我有一个像这样的 redux RTK 查询 API:
const baseQuery = fetchBaseQuery({
baseUrl: baseUrl,
prepareHeaders: (headers, { getState }) => {
const token = getState().auth.token
if (token) {
headers.set('authorization', `Bearer ${token}`)
}
return headers
},
})
export const api = createApi({
baseQuery: baseQuery,
tagTypes: ['User'],
endpoints: build => ({
login: build.mutation({
query: code => ({
url: `auth/login/?code=${code}`,
method: 'POST',
}),
invalidatesTags: (result, error, arg) => {
console.log('auth/login', result, error, arg)
return ['User']
},
}),
getMe: build.query({
query: () => 'auth/me',
providesTags: result => {
console.log('auth/me', result)
return ['User']
},
}),
}),
})
export const { useLoginMutation, useGetMeQuery } = api
login
在组件安装时被调用,当页面从回调加载时,如下所示:
const CallbackComponent = () => {
const location = useLocation()
const [login, { isUninitialized, isLoading, isError, data, error }] = useLoginMutation()
useEffect(() => {
if (isUninitialized) login(getCode(location))
})
...
}
getMe
在这样的组件中使用:
const Header = () => {
const isAuthenticated = useIsAuthenticated()
const {
data: user,
isError,
error,
} = useGetMeQuery(null, {
skip: !isAuthenticated,
})
if (isError) return <span>{JSON.stringify(error)}</span>
return (
<nav className="header">
{user ? <CharacterList characters={user.characters} /> : null}
{!user || user.characters.length === 0 ? <Login /> : null}
</nav>
)
}
2个回答
结果发现问题不在这些地方。我没有将 api 中间件添加到我的商店。
export const store = configureStore({
reducer: rootReducer,
middleware: getDefaultMiddleware =>
getDefaultMiddleware().concat(api.middleware),
})
文档: https://redux-toolkit.js.org/tutorials/rtk-query#add-the-service-to-your-store
mjuopperi
2021-09-22
我遇到过一个非常类似的问题,当调用 getMe 请求时,如果没有有效的会话令牌,则会抛出 HTTP
401
响应代码。事实证明,在服务器端删除
401
可以解决此问题。
但是,这不是最佳解决方案,因此我发现,
providesTags: ['example']
仅在成功时提供标签。若要在失败时提供它或其他标签,请使用类似以下方法:
providesTags:(result, error, id)=> (
result
? ['example']
: (error?.status === 401 ? ['UNAUTHORIZED'] : ['UNKNOWN_ERROR'])
)
尽管您已经找到了解决问题的方法,但这可能会帮助遇到类似问题的其他人。
Tim Nikischin
2023-09-10