Calling a mutation within React.useEffect causes infinite loop

I’m attempting to perform a mutation when a specific route is hit in my application. When using useEffect and passing through a mutation method as a dependancy, it enters an infinite loop.

const [myMutation] = useMutation(MY_MUTATION);
const Component = () => {
  React.useEffect(() => {
        myMutation();
    }, [myMutation]);
}

This may be by design and my code an anti-pattern, if so I’d love to know an alternative way to trigger a mutation when a component is mounted for the first time.

A similar issue was fixed in graphql-hooks recently, if that helps at all.

[yaralahruthik]

Yes, your suggestions do fix the problem but give the lint warning. But the proper way of doing this is to destructure the mutate from the mutation and provide that to the dependency array of use effect! const {mutate} = useMutation(someFunction)

useEffect(() => { mutate() }, [mutate])

[Oracard]

Omg thank you @yaralahruthik! This solved my identical issue perfectly without requiring weird workarounds 😃