По какой причине запрос, который инициирован инвалидацией тега отправляется со старым access токеном? Rtk query
У меня есть форма обновления данных пользователя (никнейма и аватара) и когда я делаю запрос на сервер для обновления переданных данных, у меня инвалидируется тег 'User' и делается новый запрос на получения профиля юзера (На сервер отправляется access token, который взят из localstorage и привязывается в header), но почему-то этот новый запрос для получения данных о пользователе делается со старым access токеном.
Frontend: next js v15.1.2 (App Router)
export const userService = globalApi.injectEndpoints({
overrideExisting: true,
endpoints: (builder) => ({
updateUser: builder.mutation<AuthRequest, FormData>({
query: (body) => ({
url: 'user/updateUser',
method: 'PATCH',
body
}),
invalidatesTags: ['User']
})
})
})
export const { useUpdateUserMutation } = userService
import { globalApi } from '@/api/globalApi'
import { IUser } from '@/types/user.types'
export const authService = globalApi.injectEndpoints({
overrideExisting: true,
endpoints: (builder) => ({
getUserProfile: builder.query<IUser, void>({
query: () => 'auth/profile',
providesTags: ['User']
}),
})
})
export const { useGetUserProfileQuery } = authService
globalApi
import { AuthRequest } from '@/types/auth.types'
import { BaseQueryFn, createApi, FetchArgs, fetchBaseQuery, FetchBaseQueryError, FetchBaseQueryMeta, QueryReturnValue } from '@reduxjs/toolkit/query/react'
const baseQuery = fetchBaseQuery({
baseUrl: 'http://localhost:4000/api',
credentials: 'include',
prepareHeaders(headers) {
const token = localStorage.getItem('accessToken')
if(token) {
headers.set('authorization', `Bearer ${token}`)
}
return headers
},
})
const baseQueryWithReauth: BaseQueryFn<
string | FetchArgs,
unknown,
FetchBaseQueryError
> = async (args, api, extraOptions) => {
let result = await baseQuery(args, api, extraOptions)
if (result.error && result.error.status === 401) {
const refreshResult = await baseQuery('auth/refresh', api, extraOptions) as QueryReturnValue<AuthRequest, FetchBaseQueryError, FetchBaseQueryMeta>
if (refreshResult.data) {
localStorage.setItem('accessToken', refreshResult.data.access_token)
result = await baseQuery(args, api, extraOptions)
}
}
return result
}
export const globalApi = createApi({
reducerPath: 'globalApi',
baseQuery: baseQueryWithReauth,
endpoints: () => ({}),
tagTypes: ['User']
})
formSubmit
const onSubmit: SubmitHandler<IUpdateForm> = (submitData) => {
console.log(submitData.profileLogo);
const formData = new FormData();
formData.append("username", submitData.username);
if (submitData.profileLogo && submitData.profileLogo.length !== 0) {
const previewURL = URL.createObjectURL(submitData.profileLogo[0]);
setAvatarPreview(previewURL);
formData.append("profileLogo", submitData.profileLogo[0]);
}
updateUser(formData)
.unwrap()
.then((res) => {
localStorage.setItem('accessToken', res.access_token)
})
.catch((err) => {
console.log(err)
})
};