Invalidate query after mutation
Hi, I'm cracking my head to find why some of my invalidations triggers the same data as before the mutation. I'm glad with all the help some of you can give me. This is my component List:
NOTE: if i trigger another invalidateQueries after the one imma bout to show, it only run the second one correctly, no matter if it is the same query or other one.
and this is my useDeletePolicy hook:
NOTE: if i trigger another invalidateQueries after the one imma bout to show, it only run the second one correctly, no matter if it is the same query or other one.
const List = ({ uid }: { uid: string }) => {
const getPoliciesAllowed = async (uid: string) => {
const res = await fetch(
`http://localhost:3000/v1/users/${uid}/polices?systems=allowed`,
{
headers: {
'Cache-Control': 'no-cache',
Pragma: 'no-cache',
Expires: '0',
},
}
)
return res.json() as unknown as IPolicy[]
}
const { data: allowed, isFetching: isFetchingAllowed } = useQuery({
queryKey: ['policies', 'allowed', uid],
queryFn: () => getPoliciesAllowed(uid as string),
})
const { mutate } = useDeletePolicy(uid)
const handleSubmit = (name: string) => {
mutate(name)
}
if (isFetchingAllowed) {
return <h1>Carregando...</h1>
}
return (
<>
{allowed?.map((policy) => {
return (
<Flex key={policy.name}>
<Text>{policy.name}</Text>
<Spacer />
<ActionButton
icon={() => (
<X size={20} onClick={() => handleSubmit(policy.name)} />
)}
/>
</Flex>
)
})}
</>
)
}const List = ({ uid }: { uid: string }) => {
const getPoliciesAllowed = async (uid: string) => {
const res = await fetch(
`http://localhost:3000/v1/users/${uid}/polices?systems=allowed`,
{
headers: {
'Cache-Control': 'no-cache',
Pragma: 'no-cache',
Expires: '0',
},
}
)
return res.json() as unknown as IPolicy[]
}
const { data: allowed, isFetching: isFetchingAllowed } = useQuery({
queryKey: ['policies', 'allowed', uid],
queryFn: () => getPoliciesAllowed(uid as string),
})
const { mutate } = useDeletePolicy(uid)
const handleSubmit = (name: string) => {
mutate(name)
}
if (isFetchingAllowed) {
return <h1>Carregando...</h1>
}
return (
<>
{allowed?.map((policy) => {
return (
<Flex key={policy.name}>
<Text>{policy.name}</Text>
<Spacer />
<ActionButton
icon={() => (
<X size={20} onClick={() => handleSubmit(policy.name)} />
)}
/>
</Flex>
)
})}
</>
)
}and this is my useDeletePolicy hook:
export const useDeletePolicy = (uid: string) => {
const queryClient = useQueryClient()
const mutation = useMutation({
mutationFn: (name: string) => ExcludePolicy(uid as string, name as string),
onSuccess: () => {
queryClient.invalidateQueries(['policies', 'allowed', uid])
},
})
return mutation
}export const useDeletePolicy = (uid: string) => {
const queryClient = useQueryClient()
const mutation = useMutation({
mutationFn: (name: string) => ExcludePolicy(uid as string, name as string),
onSuccess: () => {
queryClient.invalidateQueries(['policies', 'allowed', uid])
},
})
return mutation
}
