setQueriesData not updating the cached data.
I have a mutation that updates data of a user.
My mutation is successful, however the cached data is not updating at onSuccess. For example, If I change the users City the request is successful, but setQueriesData is not updating the cache.
This is how the mutation happens when the user edits their profile.
This is how the users are fetched when all users are listed
export const useUpdateUser = (userID: string | undefined, userData: UserData) => {
const navigate = useNavigate();
const queryClient = useQueryClient();
return useMutation<ResultUsers, Error>(
() => axios.put(`https://jsonplaceholder.typicode.com/users/${userID}`, userData)
.then(response => response.data),
{
onSuccess: (data) => {
console.log(data?.city);
queryClient.setQueriesData([users.fetchUsers, userID], data)
navigate(ROUTES.USERS);
}
}
);
};export const useUpdateUser = (userID: string | undefined, userData: UserData) => {
const navigate = useNavigate();
const queryClient = useQueryClient();
return useMutation<ResultUsers, Error>(
() => axios.put(`https://jsonplaceholder.typicode.com/users/${userID}`, userData)
.then(response => response.data),
{
onSuccess: (data) => {
console.log(data?.city);
queryClient.setQueriesData([users.fetchUsers, userID], data)
navigate(ROUTES.USERS);
}
}
);
};My mutation is successful, however the cached data is not updating at onSuccess. For example, If I change the users City the request is successful, but setQueriesData is not updating the cache.
This is how the mutation happens when the user edits their profile.
const {
data: fetchedUserData
...
} = useFetchUser(userID);
const userData = {
city,
...
};
const {
mutateAsync: updateUserMutation
...
} = useUpdateUser(userID, userData);
const saveDataOnClickHandler = () => {
updateUserMutation();
}; const {
data: fetchedUserData
...
} = useFetchUser(userID);
const userData = {
city,
...
};
const {
mutateAsync: updateUserMutation
...
} = useUpdateUser(userID, userData);
const saveDataOnClickHandler = () => {
updateUserMutation();
};This is how the users are fetched when all users are listed
const Users = (): JSX.Element => {
const {
data: fetchedUsersData
...
} = useFetchUsers();
return (
<>
<UsersContainer>
{fetchedUsersIsLoading && <Loading />}
{fetchedUsersIsError && <ErrorHandler errorMessage={fetchedUsersError.message} />}
{fetchedUsersData &&
<Table fetchedUsersData={fetchedUsersData} />
}
</>
);
};
export default Users;const Users = (): JSX.Element => {
const {
data: fetchedUsersData
...
} = useFetchUsers();
return (
<>
<UsersContainer>
{fetchedUsersIsLoading && <Loading />}
{fetchedUsersIsError && <ErrorHandler errorMessage={fetchedUsersError.message} />}
{fetchedUsersData &&
<Table fetchedUsersData={fetchedUsersData} />
}
</>
);
};
export default Users;
