title: Running login mutation in utility function instead of component
body: <p>This question is probably a sign of my misunderstanding of the philosophy of Apollo/React/GraphQL, but I'm a bit stuck here.</p>
  <p>I am writing the authentication logic for my single page app. I have a backend with a GraphQL API that authenticates users by returning a JWT access/refresh token pair. So, to login, I need to send a mutation to the GraphQL endpoint from my app.</p>
  <p>My frontend uses Apollo Client. Now I understand I can run a mutation with <code>useMutation</code>, I understand how this works. But I also know that React Hooks need to be specified at the top of a component. I could have this <code>useMutation</code> call in a login component, but this feels like bad encapsulation.</p>
  <p>The problem is that I want to have a separate <code>login</code> utility function that takes a username and password, sends the login mutation request to the backend, and returns the response.</p>
  <p>From my understanding, I cannot use <code>useMutation</code> here, as I'm not in a React component. I can of course write a <code>fetch</code> call myself:</p>
  <pre><code>export const login = (username, password) =&gt; {
      return fetch(&quot;/api&quot;, {
          method: &quot;POST&quot;,
          ...
  }
  </code></pre>
  <p>but this feels unclean when I'm working within the Apollo Client ecosystem. Am I missing something, should I just roll ahead with these manual fetch calls, or am I misunderstanding the whole philosophy here?</p>