Refactor Github API to use Apollo Link

Author: samajammin

gatsby-config.js

@@ -1,10 +1,37 @@
+const { ApolloLink } = require(`apollo-link`)
+const { createHttpLink } = require(`apollo-link-http`)
+const { onError } = require("apollo-link-error")
+const fetch = require("node-fetch")
+
 const translations = require("./src/utils/translations")
 require("dotenv").config()
 
 const supportedLanguages = translations.supportedLanguages
 const defaultLanguage = `en`
 const siteUrl = `https://ethereum.org`
 
+const loggerLink = new ApolloLink((operation, forward) => {
+  console.log(`GraphQL Request: ${operation.operationName}`)
+  operation.setContext({ start: new Date() })
+  return forward(operation).map((response) => {
+    const responseTime = new Date() - operation.getContext().start
+    console.log(`GraphQL Response took: ${responseTime}`)
+    return response
+  })
+})
+
+const errorLink = onError(({ graphQLErrors, networkError }) => {
+  if (graphQLErrors) {
+    graphQLErrors.map(({ message, locations, path }) => {
+      console.log(`GraphQL Error:`)
+      console.log({ message, locations, path })
+    })
+  }
+  if (networkError) {
+    console.log(`Network Error: ${networkError.message}`)
+  }
+})
+
 // Note: to run this application locally you need to:
 // 1. Create a .env file in the root directory (see .env.example)
 // 2. Create a Github personal access token with `read:user` scope
@@ -225,6 +252,19 @@ module.exports = {
         typeName: `GitHub`,
         fieldName: `github`,
         url: `https://api.github.com/graphql`,
+        createLink: (pluginOptions) => {
+          return ApolloLink.from([
+            loggerLink,
+            errorLink,
+            createHttpLink({
+              uri: pluginOptions.url,
+              fetch,
+              headers: {
+                Authorization: `Bearer ${GITHUB_TOKEN_READ_ONLY}`,
+              },
+            }),
+          ])
+        },
         headers: {
           Authorization: `Bearer ${GITHUB_TOKEN_READ_ONLY}`,
         },

package.json

@@ -11,13 +11,16 @@
     "@mdx-js/mdx": "^1.6.5",
     "@mdx-js/react": "^1.6.5",
     "algoliasearch": "^4.3.0",
+    "apollo-link": "^1.2.14",
+    "apollo-link-error": "^1.1.13",
+    "apollo-link-http": "^1.5.17",
     "axios": "^0.21.1",
     "babel-plugin-styled-components": "^1.10.7",
     "clipboard": "^2.0.6",
     "dotenv": "^8.2.0",
     "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^1.11.1",
-    "gatsby": "^2.23.1",
+    "gatsby": "^2.31.0",
     "gatsby-image": "^2.4.7",
     "gatsby-plugin-intl": "^0.3.3",
     "gatsby-plugin-lodash": "^3.3.11",
@@ -33,14 +36,15 @@
     "gatsby-remark-copy-linked-files": "^2.4.0",
     "gatsby-remark-images": "^3.3.12",
     "gatsby-source-filesystem": "^2.3.10",
-    "gatsby-source-graphql": "^2.7.3",
+    "gatsby-source-graphql": "^2.13.0",
     "gatsby-transformer-csv": "^2.3.10",
     "gatsby-transformer-gitinfo": "^1.1.0",
     "gatsby-transformer-remark": "^2.8.16",
     "gatsby-transformer-sharp": "^2.5.5",
     "lodash": "^4.17.20",
     "luxon": "^1.24.1",
     "netlify-lambda": "^1.6.3",
+    "node-fetch": "^2.6.1",
     "polished": "^3.6.5",
     "prism-react-renderer": "^1.1.1",
     "prismjs": "^1.21.0",