title: How can I make this a callable utils function that contains a hook?
body: <p>I'm currently using Apollo Client's <code>useQuery</code> and <code>useMutation</code> hooks to perform the same function in several different components. Instead of repeating the logic, I would like to create a helper function that can keep the logic in a single place.</p>
  <p>The problem with this, is <code>useQuery</code> and <code>useMutation</code> being hooks mean they can't just live in a separate file as functions, but instead need to be valid React function components.</p>
  <p>I started trying to make something functional but starting to think this might not be able to be done.</p>
  <pre><code>  export function HandleFollow (props) {
        const [useFollowUser, { followedData, followError }] = useMutation(FOLLOW_USER);
        useFollowUser({ variables: { fromId: auth().currentUser.uid, toId: &quot;userIDxyz&quot;}, onCompleted: props.handleUserFollow(user, isFollowingAuthor)})
    }
  </code></pre>
  <p>Is it possible to use util/helper functions with React Hooks? Thanks in advance!</p>
  <p>When creating the below, I'm receiving <code>&quot;Invalid hook call. Hooks can only be called inside of the body of a function component.&quot;</code> and I can't figure out why.</p>
  <p>I think that may be due to calling this from inside a function, but I can't figure out how to avoid that.</p>
  <pre><code>export function useHandleFollow(props) {
    const { user, isFollowingUser } = props
    const [useFollowUser, { followedData, followError }] = useMutation(FOLLOW_USER);
    const [useUnfollowUser, { unfollowedData, unfollowedError }] = useMutation(UNFOLLOW_USER);
    const [followSuccess, setFollowSuccess] = useState(false)
    
    if(!isFollowingUser){
      useFollowUser({ variables: { fromId: auth().currentUser.uid, toId: user.id}, onCompleted: setFollowSuccess(true)})
    }else{
      useUnfollowUser({ variables: { fromId: auth().currentUser.uid, toId: user.id}, onCompleted: setFollowSuccess(true)})
    }
    return followSuccess
  }
  </code></pre>
  <p>And when I call this right away in my component (instead of calling from inside a function), it continues to infinitely re-render:</p>
  <p>Here's some more complete code from the component</p>
  <p>in Home.js:</p>
  <pre><code>const followed = useHandleFollow({ user: author, isFollowingAuthor })
  
  
  export default  posts = (props) =&gt;{
    let { post, excludeUser = false } = props
    let { author } = post
    let { date, things, isFollowingAuthor } = post
    let { profile_picture } = author
    let currentUser = auth().currentUser
    
    const [followed] = useHandleFollow({ user: author, isFollowingAuthor })
    
    return ()
  }
  </code></pre>
  <p>And this is in follow.js, which I'm importing as <code>import { useHandleFollow } from...</code></p>
  <pre><code>export function useHandleFollow(props) {
    const { user, isFollowingUser } = props
    const [followUser, { followedData, followError }] = useMutation(FOLLOW_USER);
    const [unfollowUser, { unfollowedData, unfollowedError }] = useMutation(UNFOLLOW_USER);
    const [followSuccess, setFollowSuccess] = useState(false)
    if(!isFollowingUser){
      followUser({ variables: { fromId: auth().currentUser.uid, toId: user.id}, onCompleted: () =&gt; setFollowSuccess(true)})
    }else{
      unfollowUser({ variables: { fromId: auth().currentUser.uid, toId: user.id}, onCompleted: () =&gt; setFollowSuccess(true)})
    }
    return [followSuccess]
  }
  </code></pre>