fix(projects): simplified useApolloClient hook

Previously, in order to use the Github API client, you had to:

1. Get the GitHub token from the appState
2. Call the `useApolloClient` hook and get the `initApolloClient` function
3. Call the `initApolloClient` function with the GitHub token as an
argument and get the client

But since `useApolloClient` is a hook, this commit simplifies it so
that the appState is accessed directly from within the hook, and the
actual API client is returned directly, so that the above steps get
simplified to:

1. Call the `useApolloClient` hook and get the client

Author: e18r

apps/projects/app/App.js

@@ -50,15 +50,13 @@ const App = () => {
   const [ githubLoading, setGithubLoading ] = useState(false)
   const [ panel, setPanel ] = useState(null)
   const [ panelProps, setPanelProps ] = useState(null)
-  const initApolloClient = useApolloClient()
+  const client = useApolloClient()
 
   const {
     github = { status : STATUS.INITIAL },
     isSyncing = true,
   } = appState
 
-  const client = initApolloClient(github.token)
-
   const handlePopupMessage = useCallback(message => {
     if (!popupRef) return
     if (message.data.from !== 'popup') return

apps/projects/app/components/Content/IssueDetail/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { useAragonApi } from '../../../api-react'
 import {
@@ -44,9 +44,7 @@ Wrap.propTypes = {
 }
 
 const IssueDetail = ({ issueId }) => {
-  const { appState: { github } } = useAragonApi()
-  const initApolloClient = useApolloClient()
-  const client = useMemo(() => initApolloClient(github.token), [])
+  const client = useApolloClient()
   const { layoutName } = useLayout()
   const shapeIssue = useShapedIssue()
   const { loading, error, data } = useQuery(GET_ISSUE, {

apps/projects/app/components/Content/Issues.js

@@ -10,7 +10,6 @@ import { compareAsc, compareDesc } from 'date-fns'
 import { useApolloClient } from '../../utils/apollo-client'
 import useShapedIssue from '../../hooks/useShapedIssue'
 import usePathSegments from '../../hooks/usePathSegments'
-import { STATUS } from '../../utils/github'
 import { getIssuesGQL } from '../../utils/gql-queries.js'
 import { Issue } from '../Card'
 import { EmptyWrapper, FilterBar, LoadingAnimation, Tabs } from '../Shared'
@@ -35,7 +34,7 @@ class Issues extends React.PureComponent {
     filters: PropTypes.object.isRequired,
     graphqlQuery: PropTypes.shape({
       data: PropTypes.object,
-      error: PropTypes.string,
+      error: PropTypes.object,
       loading: PropTypes.bool.isRequired,
       refetch: PropTypes.func,
     }).isRequired,
@@ -360,17 +359,15 @@ IssuesQuery.propTypes = {
 }
 
 const IssuesWrap = props => {
-  const initApolloClient = useApolloClient()
+  const client = useApolloClient()
   const { appState } = useAragonApi()
   const {
     repos,
     issues = [],
-    github = { status : STATUS.INITIAL },
   } = appState
   const shapeIssue = useShapedIssue()
   const { query: { repoId }, selectIssue } = usePathSegments()
   const { setupNewIssue } = usePanelManagement()
-  const [ client, setClient ] = useState(null)
   const [ downloadedRepos, setDownloadedRepos ] = useState({})
   const [ query, setQuery ] = useState(null)
   const [ filters, setFilters ] = useState({
@@ -417,11 +414,6 @@ const IssuesWrap = props => {
     setQuery(getIssuesGQL(reposQueryParams))
   }, [ downloadedRepos, filters, repos ])
 
-  useEffect(() => {
-    const apolloClient = initApolloClient(github.token)
-    setClient(apolloClient)
-  }, [github.token])
-
   return (
     <>
       <Header

apps/projects/app/hooks/useGithubAuth.js

@@ -5,15 +5,15 @@ import { CURRENT_USER } from '../utils/gql-queries'
 
 const useGithubAuth = () => {
   const { appState } = useAragonApi()
-  const initApolloClient = useApolloClient()
+  const client = useApolloClient()
   const token = appState.github && appState.github.token
 
   const [ githubCurrentUser, setGithubCurrentUser ] = useState({})
 
   useEffect(() => {
     if (!token) return
 
-    initApolloClient(token)
+    client
       .query({ query: CURRENT_USER })
       .then(res => setGithubCurrentUser(res.data.viewer))
   }, [token])

apps/projects/app/utils/apollo-client.js

@@ -4,31 +4,32 @@ import { GITHUB_TOKEN_REVOKED } from '../store/eventTypes'
 import { STATUS } from '../utils/github'
 
 export const useApolloClient = () => {
-  const { api } = useAragonApi()
-  const initApolloClient = token => {
-    if (token === null) return null
-    return new ApolloClient({
-      uri: 'https://api.github.com/graphql',
-      request: operation => {
-        if (token) {
-          operation.setContext({
-            headers: {
-              accept: 'application/vnd.github.starfire-preview+json', // needed to create issues
-              authorization: `bearer ${token}`,
-            },
-          })
-        }
-      },
-      onError: error => {
-        if (error.networkError && error.networkError.statusCode === 401) {
-          api.emitTrigger(GITHUB_TOKEN_REVOKED, {
-            status: STATUS.REVOKED,
-            scope: null,
-            token: null,
-          })
-        }
+  const {
+    api,
+    appState: {
+      github: { token } = { token: null }
+    }
+  } = useAragonApi()
+  if (token === null) return null
+  return new ApolloClient({
+    uri: 'https://api.github.com/graphql',
+    request: operation => {
+      operation.setContext({
+        headers: {
+          accept: 'application/vnd.github.starfire-preview+json', // needed to create issues
+          authorization: `bearer ${token}`,
+        },
+      })
+    },
+    onError: error => {
+      if (error.networkError && error.networkError.statusCode === 401) {
+        api.emitTrigger(GITHUB_TOKEN_REVOKED, {
+          status: STATUS.REVOKED,
+          scope: null,
+          token: null,
+        })
       }
-    })
-  }
-  return initApolloClient
+      else console.error(error)
+    }
+  })
 }