Invalidate query after mutation

[lime briar]

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.

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:

```ts
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
}```

It almost looks like the onSuccess is not finishing the request and is triggering the invalidateQueries, returning the same data as before entering the mutation. I've tried async/ await the request, Promise.all the invalidations, and other stuff. Appreciate the patience with my english and knowledge 🙂

[pure shell]

It seems like the backend says that it's finished with the deletion when in fact, it isn't. This is almost always a backend problem

[lime briar]

You have any idea on how I can debug/workaround this? It seems like its really a api thing, because with timeout works:

   setTimeout(async () => {
        await queryClient.invalidateQueries([
          UNIQUE_KEY.POLICIES_AVAILABLE,
          uid,
        ])
        await queryClient.invalidateQueries([UNIQUE_KEY.POLICIES_ALLOWED, uid])
      }, 1000)

[unreal axle]

You should see a request in the dev tools when you call the first invalidateQueries? Does that return new data? If not that's likely because of a delay for the backend to reflect the changes.

[lime briar]

No it doesn't, I recieve the old data. Does the backend gotta have a specific configuration to return data correctly? It seems confusing to me.

[pure shell]

That depends entirely on what backend it is / in which language / framework it's implemented.. it's not a react-query issue

[lime briar]

I'm working on this app migrating api calls in useEffects to react-query, it used to work pretty well in the past... dont seems right to me.

And it's a simple nestjs backend

In other mutation to create a user it has invalidatted correctly. Its strange that this happens with this specific endpoint

[lime briar]

Turns out that in the backend we had a missing await on a firebase call 🫠

Thanks for the help yall