invalidateQueries does not work as expected
I have three different use cases of invalidateQueries, add user, ban/unban user and delete user, when I perform one of those actions it does not trigger a re-render, until I use removeQueries + refetchQueries for it to work
const createUserForm = useAppForm({
defaultValues: {
email: '',
password: '',
name: '',
role: 'user' as 'admin' | 'user',
},
validators: {
onChange: CreateUserSchema,
},
onSubmit: async ({ value }) => {
try {
await authClient.admin.createUser({
email: value.email,
password: value.password,
name: value.name,
role: value.role,
});
createUserForm.reset();
queryClient.removeQueries({
queryKey: ['users'],
});
queryClient.refetchQueries({
queryKey: ['users'],
});
// queryClient.invalidateQueries({
// queryKey: ['users'],
// });
} catch () {}
},
});const createUserForm = useAppForm({
defaultValues: {
email: '',
password: '',
name: '',
role: 'user' as 'admin' | 'user',
},
validators: {
onChange: CreateUserSchema,
},
onSubmit: async ({ value }) => {
try {
await authClient.admin.createUser({
email: value.email,
password: value.password,
name: value.name,
role: value.role,
});
createUserForm.reset();
queryClient.removeQueries({
queryKey: ['users'],
});
queryClient.refetchQueries({
queryKey: ['users'],
});
// queryClient.invalidateQueries({
// queryKey: ['users'],
// });
} catch () {}
},
});const fetchListUsers = async (): Promise<UserWithRole[]> => {
const data = await authClient.admin.listUsers(
{
query: {
limit: 50,
sortBy: 'createdAt',
sortDirection: 'desc',
},
},
{
throw: true,
}
);
return data?.users || [];
};
const useListUsersQuery = () =>
useQuery({
queryKey: ['users'],
queryFn: () => fetchListUsers(),
});const fetchListUsers = async (): Promise<UserWithRole[]> => {
const data = await authClient.admin.listUsers(
{
query: {
limit: 50,
sortBy: 'createdAt',
sortDirection: 'desc',
},
},
{
throw: true,
}
);
return data?.users || [];
};
const useListUsersQuery = () =>
useQuery({
queryKey: ['users'],
queryFn: () => fetchListUsers(),
});
