title: How to create utils with apollo-hooks for react-native
body: <p>I'm making an authentication flow with two tokens(accessToken, refreshToken) on react-native/apollo-hooks/graphql. And created apollo-hook for updateTokens. And this hook i need to use in different components, because every time when user would like to do any actions like make a post or a comment i need to call updateTokens apollo hook. Therefore i need to take all logic of updateTokens to a separate utils, because i don't want repeat yourself and put everywhere the same code. But when i make separate util file with apollo hook it is not working. Can somebody explain me how can i make it please!</p>
  
  <pre><code>import React from 'react'
  import { View, Button, Text } from 'react-native'
  import { useMutation } from 'react-apollo-hooks'
  import gql from 'graphql-tag'
  import * as Keychain from 'react-native-keychain'
  
  const UPDATE_TOKENS = gql`
    mutation UpdateTokens($accessToken: String!, $refreshToken: String!) {
      updateTokens(data: { accessToken: $accessToken, refreshToken: $refreshToken }) {
        user {
          name
          phone
        }
        accessToken
        refreshToken
      }
    }
  `
  
  const HomeScreen = ({ navigation }) =&gt; {
    const update_tokens = useMutation(UPDATE_TOKENS)
  
    const updateTokens = (accessToken, refreshToken) =&gt; {
      console.log('accessToken', accessToken)
      console.log('refreshToken', refreshToken)
      update_tokens({
        variables: { accessToken, refreshToken },
        update: async (cache, { data }) =&gt; {
          const accessToken = data.updateTokens.accessToken
          const refreshToken = data.updateTokens.refreshToken
          await Keychain.setGenericPassword(accessToken, refreshToken)
        }
      }).then(() =&gt; console.log('We have new credentials'))
    }
  
    const getCredentials = async () =&gt; {
      const tokens = await Keychain.getGenericPassword()
      console.log('tokens', tokens)
      const keyChainAccessToken = tokens.username
      const keyChainRefreshToken = tokens.password
      console.log('keyChainAccessToken', keyChainAccessToken)
      console.log('keyChainRefreshToken', keyChainRefreshToken)
      updateTokens(keyChainAccessToken, keyChainRefreshToken)
    }
  
    return (
      &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
        &lt;Text&gt;Home Screen&lt;/Text&gt;
        &lt;Button title="updateTokens" onPress={getCredentials} /&gt;
        &lt;Button title="getCredentials" onPress={checkCredentials} /&gt;
        &lt;Button title="SignOut" onPress={userSignOut} /&gt;
      &lt;/View&gt;
    )
  }
  export { HomeScreen }
  </code></pre>
  
  <p>Can i put it to the separate file like this and use it after in different places:</p>
  
  <pre><code>import { useMutation } from 'react-apollo-hooks'
  import gql from 'graphql-tag'
  import * as Keychain from 'react-native-keychain'
  import jwtDecode from 'jwt-decode'
  
  const UPDATE_TOKENS = gql`
    mutation UpdateTokens($refreshToken: String!, $refreshTokenId: String!) {
      updateTokens(refreshToken: $refreshToken, refreshTokenId: $refreshTokenId) {
        user {
          name
          phone
        }
        accessToken
        refreshToken
      }
    }
  `
  
  const updateCredentials = () =&gt; {
    const update_tokens = useMutation(UPDATE_TOKENS)
    const updateTokens = (refreshToken, refreshTokenId) =&gt; {
      console.log('refreshToken', refreshToken)
      console.log('refreshTokenId', refreshTokenId)
      update_tokens({
        variables: { refreshToken, refreshTokenId },
        update: async (cache, { data }) =&gt; {
          const newAccessToken = data.updateTokens.accessToken
          const newRefreshToken = data.updateTokens.refreshToken
          const user = data.updateTokens.user
          await Keychain.setGenericPassword(newAccessToken, newRefreshToken)
        }
      }).then(() =&gt; console.log('We have new credentials'))
    }
  
    const getCredentials = async () =&gt; {
      try {
        const tokens = await Keychain.getGenericPassword()
        console.log('tokens', tokens)
        const keychainAccessToken = tokens.username
        const keychainRefreshToken = tokens.password
        const currentTime = Date.now() / 1000
        const decodeAccessToken = jwtDecode(keychainAccessToken)
        console.log('decodeAccessToken', decodeAccessToken)
        const keychainRefreshTokenId = decodeAccessToken.refreshTokenId
        console.log('keychainRefreshTokenId', keychainRefreshTokenId)
  
        if (decodeAccessToken.exp &gt; currentTime) {
          console.log('Credentials is still valid')
        } else if (decodeAccessToken.exp &lt; currentTime) {
          console.log('Go to Update!')
          updateTokens(keychainRefreshToken, keychainRefreshTokenId)
        }
      } catch (err) {
        throw new Error('Invalid credentials')
      }
    }
  }
  export { updateCredentials }
  
  </code></pre>