Add optimistic mutations on settings page

This commit is contained in:
Zoe Roux 2024-01-31 15:23:00 +01:00
parent 7c56ec8285
commit 885b784f92
2 changed files with 12 additions and 5 deletions

View File

@ -99,11 +99,8 @@ export const AccountProvider = ({
// update user's data from kyoo un startup, it could have changed.
const selected = useMemo(() => accounts.find((x) => x.selected), [accounts]);
const controller = useMemo(() => {
const ret = new AbortController();
setTimeout(() => ret.abort(), 5_000);
return ret;
}, [selected]);
const controller = new AbortController();
setTimeout(() => controller.abort(), 5_000);
const user = useFetch({
path: ["auth", "me"],
parser: UserP,

View File

@ -122,6 +122,16 @@ export const useSetting = <Setting extends keyof User["settings"]>(setting: Sett
method: "PATCH",
body: { settings: { ...account!.settings, ...update } },
}),
onMutate: async (newSettings) => {
const next = { ...account!, settings: { ...account!.settings, ...newSettings } };
await queryClient.cancelQueries({ queryKey: ["auth", "me"] });
const previous = queryClient.getQueryData(["auth", "me"]);
queryClient.setQueryData(["auth", "me"], next);
return { previous, next };
},
onError: (_, __, context) => {
queryClient.setQueryData(["auth", "me"], context!.previous);
},
onSettled: async () => await queryClient.invalidateQueries({ queryKey: ["auth", "me"] }),
});