fair-rose

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.

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
}

8 Replies

fair-roseOP•3y ago

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 🙂

other-emerald•3y ago

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

fair-roseOP•3y ago

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)

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

rival-black•3y ago

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.

fair-roseOP•3y ago

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.

other-emerald•3y ago

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

fair-roseOP•3y ago

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 Turns out that in the backend we had a missing await on a firebase call 🫠 Thanks for the help yall

rival-black•3y ago

Glad it's sorted out!

Gaming

Programming

Invalidate query after mutation

Did you find this page helpful?