英文:
on new user login, RTK Query not fetching the latest data, instead returning cached data
问题
以下是翻译好的部分:
export const presentationApi = createApi({
reducerPath: "vsl/api/v1",
baseQuery: fetchBaseQuery({
baseUrl: BASE_URL,
prepareHeaders: (headers) => {
const token = localStorage.getItem("token");
if (token) {
const { exp }: { exp: number } = decode(token);
//token has expired
if (exp * 1000 < new Date().getTime()) {
localStorage.clear();
} else {
headers.set("Authorization", `Bearer ${token}`);
}
}
return headers;
},
}),
// AUTH ENDPOINTS
signin: builder.mutation<any, Partial<any>>({
query: (body) => ({
url: `/auth/login`,
method: "POST",
body,
providesTags: ["Auth"],
}),
}),
signout: builder.mutation<any, undefined>({
query: () => ({
url: `/auth/logout`,
method: "POST",
invalidatesTags: ["Auth", "Presentations"],
}),
}),
// PRESENTATION ENDPOINTS
getAllPresentations: builder.query({
query: () => ({
url: `/presentation`,
method: "GET",
cache: "no-cache",
providesTags: ["Presentations"],
}),
}),
});
using "@reduxjs/toolkit": "^1.9.5",
const [signout, { data: response, isLoading, isError, isSuccess }] = useSignoutMutation();
const signingOutRef = React.useRef<boolean>(false);
const handleLogout = async () => {
localStorage.removeItem("token");
console.log("Before purge:", store.getState());
// await persistor.purge();
// await persistor.purge();
// await persistor.purge();
// persistor.flush();
// console.log("After purge:", store.getState());
// console.log('logout response',response);
signingOutRef.current = true;
signout(undefined);
};
useEffect(() => {
if (signingOutRef.current) {
if (isLoading) {
notifyLoading("Wait!", "Logging out...");
}
if (isSuccess) {
dismissNotifyAll();
// navigate("/auth/signin");
window.location.href = "/auth/signin";
makeRefFalse();
}
if (isError) {
dismissNotifyAll();
notifyWarning("Oops!", "Something went wrong. Please try again.");
makeRefFalse();
}
}
}, [isLoading, isError, isSuccess, navigate, signingOutRef.current]);
//had to use it taht way. otherwise it was not working
const makeRefFalse = () => signingOutRef.current ? (signingOutRef.current = false) : false;
had to deliberately reload the page with window.location.href. not even the persistor.purge working.
first i was not using the logout api, but then i had to make it so that rtk query can invalidate the Presentation tag. but turns out to don't have any impact and success.
If any of you guy wants to come at the remote session i can do that.
希望这有助于你的工作!
英文:
export const presentationApi = createApi({
reducerPath: "vsl/api/v1",
baseQuery: fetchBaseQuery({
baseUrl: BASE_URL,
prepareHeaders: (headers) => {
const token = localStorage.getItem("token");
if (token) {
const { exp }: { exp: number } = decode(token);
//token has expired
if (exp * 1000 < new Date().getTime()) {
localStorage.clear();
} else {
headers.set("Authorization", `Bearer ${token}`);
}
}
return headers;
},
}),
// AUTH ENDPOINTS
signin: builder.mutation<any, Partial<any>>({
query: (body) => ({
url: `/auth/login`,
method: "POST",
body,
providesTags: ["Auth"],
}),
}),
signout: builder.mutation<any, undefined>({
query: () => ({
url: `/auth/logout`,
method: "POST",
invalidatesTags: ["Auth", "Presentations"],
}),
}),
// PRESENTATION ENDPOINTS
getAllPresentations: builder.query({
query: () => ({
url: `/presentation`,
method: "GET",
cache: "no-cache",
providesTags: ["Presentations"],
}),
}),
});
using "@reduxjs/toolkit": "^1.9.5",
const [signout, { data: response, isLoading, isError, isSuccess }] = useSignoutMutation();
const signingOutRef = React.useRef<boolean>(false);
const handleLogout = async () => {
localStorage.removeItem("token");
console.log("Before purge:", store.getState());
// await persistor.purge();
// await persistor.purge();
// await persistor.purge();
// persistor.flush();
// console.log("After purge:", store.getState());
// console.log('logout response',response);
signingOutRef.current = true;
signout(undefined);
};
useEffect(() => {
if (signingOutRef.current) {
if (isLoading) {
notifyLoading("Wait!", "Logging out...");
}
if (isSuccess) {
dismissNotifyAll();
// navigate("/auth/signin");
window.location.href = "/auth/signin";
makeRefFalse();
}
if (isError) {
dismissNotifyAll();
notifyWarning("Oops!", "Something went wrong. Please try again.");
makeRefFalse();
}
}
}, [isLoading, isError, isSuccess, navigate, signingOutRef.current]);
//had to use it taht way. otherwise it was not working
const makeRefFalse = () => signingOutRef.current ? (signingOutRef.current = false) : false;
had to deliberately reload the page with window.location.href. not even the persistor.purge working.
first i was not using the logout api, but then i had to make it so that rtk query can invalidate the Presentation
tag. but turns out to don't have any impact and success.
If any of you guy wants to come at the remote session i can do that.
答案1
得分: 1
登录操作不会使您的代码中的标签失效。请将以下代码进行更改:
signin: builder.mutation<any, Partial<any>>({
query: (body) => ({
url: `/auth/login`,
method: "POST",
body,
providesTags: ["Auth"],
}),
})
改为
signin: builder.mutation<any, Partial<any>>({
query: (body) => ({
url: `/auth/login`,
method: "POST",
body,
invalidatesTags: ["Presentations"],
}),
}),
请注意,呼叫人们进行远程会话并不是适当的行为。
英文:
Signin does not invalidate the tag in your code. Change
signin: builder.mutation<any, Partial<any>>({
query: (body) => ({
url: `/auth/login`,
method: "POST",
body,
providesTags: ["Auth"],
}),
})
with
signin: builder.mutation<any, Partial<any>>({
query: (body) => ({
url: `/auth/login`,
method: "POST",
body,
invalidatesTags: ["Presentations"],
}),
}),
And please note that calling people to a remote session is not an appropriate behaviour.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论