Merge pull request #43 from naveteam/feat/add-apollo-client

feat(providers): add apollo client

Author: rbschumacher

package.json

@@ -6,13 +6,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.3.7",
     "@naveteam/dispatcher": "^1.1.0",
     "@naveteam/pandora-frontend": "^1.0.2",
     "@sentry/browser": "5.14",
     "@styled-system/prop-types": "^5.1.5",
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
+    "apollo-cache-inmemory": "^1.6.6",
     "axios": "^0.19.0",
+    "graphql": "^15.5.0",
+    "graphql-anywhere": "^4.2.7",
+    "graphql-tag": "^2.11.0",
     "react": "^16.9.0",
+    "react-apollo": "^3.1.5",
     "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",

src/App.js

@@ -2,11 +2,13 @@ import React, { useEffect, Suspense, lazy } from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { ReactQueryDevtools } from 'react-query-devtools'
 import { createGlobalStyle } from 'styled-components'
+import { ApolloProvider } from '@apollo/client'
 import Helmet from 'react-helmet'
 
 import Loader from 'components/Loader'
 
 import { useUser } from 'context/user-context'
+import { apolloClient } from 'providers'
 
 import Theme from 'theme'
 
@@ -41,15 +43,17 @@ const App = () => {
   }, [])
 
   return (
-    <Theme>
-      <Helmet titleTemplate='Nave.rs | %s' />
-      <GlobalStyle />
-      <Suspense fallback={<Loader />}>
-        {isLoading && <Loader />}
-        <Router>{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}</Router>
-      </Suspense>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </Theme>
+    <ApolloProvider client={apolloClient}>
+      <Theme>
+        <Helmet titleTemplate='Nave.rs | %s' />
+        <GlobalStyle />
+        <Suspense fallback={<Loader />}>
+          {isLoading && <Loader />}
+          <Router>{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}</Router>
+        </Suspense>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </Theme>
+    </ApolloProvider>
   )
 }
 

src/providers/apolloClient.js

@@ -0,0 +1,40 @@
+import { ApolloClient, InMemoryCache, HttpLink, ApolloLink } from '@apollo/client'
+import { onError } from '@apollo/client/link/error'
+
+import { getToken } from 'helpers'
+
+const httpLink = new HttpLink({ uri: process.env.REACT_APP_API_URL })
+
+const authMiddleware = new ApolloLink((operation, forward) => {
+  const token = getToken()
+
+  operation.setContext(({ headers = {} }) => ({
+    headers: {
+      ...headers,
+      ...(token && { authorization: `Bearer: ${token}` })
+    }
+  }))
+
+  return forward(operation)
+})
+
+const errorMiddleware = onError(({ graphQLErrors, networkError }) => {
+  if (graphQLErrors)
+    graphQLErrors.forEach(error => {
+      return Promise.reject(error)
+    })
+
+  if (
+    networkError.statusCode === 401 &&
+    !['/login', '/redefine-password', '/sign-up'].includes(window.location.pathname)
+  ) {
+    window.location.href = '/login'
+  }
+})
+
+const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: ApolloLink.from([authMiddleware, errorMiddleware, httpLink])
+})
+
+export default client

src/providers/index.js

@@ -0,0 +1,2 @@
+export { default as apolloClient } from './apolloClient'
+export { default as client } from './fetchClient'

src/routes/Home/Home.js

@@ -1,11 +1,15 @@
 import React, { Fragment } from 'react'
 import { Link } from 'react-router-dom'
+import { useQuery } from '@apollo/client'
 
 import Button from 'components/Button'
 
 import { useUser } from 'context/user-context'
+import { GET_USER } from 'services/auth'
 
 const Home = () => {
+  // example of request using apollo
+  const { loading, error, data } = useQuery(GET_USER)
   const { logout } = useUser()
 
   return (

src/services/auth.js

@@ -1,5 +1,30 @@
 import client from 'providers/fetchClient'
+import { gql } from '@apollo/client'
 
 export const getUser = () => client.get('/v1/me')
 
 export const login = data => client.post('/v1/users/login', data)
+
+//example of rest query using graphql
+export const userQuery = gql`
+  query getUser {
+    me @rest(type: User, path: "/v1/me") {
+      id
+      name
+      email
+      document
+    }
+  }
+`
+
+// example of a graphql query
+export const GET_USER = gql`
+  query GetUser {
+    user {
+      id
+      name
+      email
+      document
+    }
+  }
+`