Mar 15, 2024
0
Level 1
React Redux Toolkit Query RTK Refetch
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { getAccessToken } from "../../Utils/Helpers";
export const completeProfileApi = createApi({
refetchOnMountOrArgChange: true,
refetchOnFocus: true,
reducerPath: "completeProfile",
baseQuery: fetchBaseQuery({
baseUrl: "http://192.168.3.49:8000/api",
prepareHeaders: (headers) => {
headers.set("Authorization", getAccessToken());
headers.set("Content-Type", "application/json");
},
}),
endpoints: (builder) => ({
getUserProfile: builder.query({
query: () => ({
url: "/is-complete-profile",
}),
staleTime: Infinity,
cacheTime: 0,
}),
getUserWithSocialMedia: builder.query({
query: () => ({
url: "/get-user-detail",
}),
}),
getSocialMedia: builder.query({
query: () => ({
url: "/social_media_icons",
}),
}),
getProfileTimeLine: builder.query({
query: (uuid) => ({
url: `/user-profile-timeline/${uuid}`,
}),
}),
addSocialMediaLink: builder.mutation({
query: (payload) => ({
method: "POST",
url: "/add_social_media_link",
body: payload,
}),
}),
deleteSocialMediaLink: builder.mutation({
query: (id) => ({
method: "delete",
url: `social_media_link/delete/${id}`,
}),
}),
editSocialMediaLink: builder.mutation({
query: (id) => ({
method: "POST",
url: `/edit-social-link/${id}`,
}),
}),
profileLogout: builder.mutation({
query: () => ({
method: "POST",
url: "/logout",
}),
}),
}),
});
export const {
useGetUserProfileQuery,
useGetUserWithSocialMediaQuery,
useGetSocialMediaQuery,
useAddSocialMediaLinkMutation,
useDeleteSocialMediaLinkMutation,
useEditSocialMediaLinkMutation,
useGetProfileTimeLineQuery,
useProfileLogoutMutation,
} = completeProfileApi;
import React, { useEffect, useState } from "react";
import CompleteProfile from "../User/CompleteProfile";
import { SUCCESS } from "../../Utils/Constants";
import { ToastContainer, toast } from "react-toastify";
import { Link, useNavigate } from "react-router-dom";
import { useGetUserProfileQuery } from "../../app/services/CompleteProfileService";
import { Spin } from "antd";
const Home = () => {
const navigate = useNavigate();
const [isCompleteProfile, setIsCompleteProfile] = useState(true);
const { data, isLoading, refetch } = useGetUserProfileQuery();
// console.log(data?.data);
useEffect(() => {
if (data?.data) {
if (data?.status === SUCCESS) {
if (data?.data.is_complete_profile == 1) {
navigate("/complete-user-detail");
} else {
toast.warning("Please complete your profile");
}
}
}
}, [data?.data]);
if (isLoading) {
return (
<Spin tip="Loading" size="large">
<div className="content" />
</Spin>
);
}
return (
<>
<ToastContainer />
{isCompleteProfile && (
<CompleteProfile
ToastContainer={ToastContainer}
toast={toast}
setIsCompleteProfile={setIsCompleteProfile}
/>
)}
</>
);
};
export default Home;
In my Home Component always check user completes is profile or not but when i complete user profile and logout after that i am creating new user in my useGetUserProfileQuery hook have last user data while i need newly created user data so that it always redirect me user detail page not in home to check user profile is complete or not How i fix it?
Please or to participate in this conversation.