Migrate Everest to use graph-client library

.gitignore

@@ -87,4 +87,7 @@ subgraph/subgraph.yaml
 ui/.textile/auth.yml
 
 # vscode
-.vscode/
+.vscode/
+
+# The Graph Client
+.graphclient

package.json

@@ -21,6 +21,8 @@
     "deploy:subgraph-mainnet": "lerna exec --scope everest-subgraph -- yarn deploy-mainnet",
     "deploy:subgraph-testing": "lerna exec --scope everest-subgraph -- yarn deploy-testing",
     "build:ui": "lerna exec --scope everest-ui -- yarn build",
+    "prestart:ui": "lerna exec --scope everest-ui -- yarn build:client",
+    "prebuild:ui": "lerna exec --scope everest-ui -- yarn build:client",
     "start:ui": "lerna exec --scope everest-ui -- yarn start",
     "build-ropsten": "yarn build:contracts && yarn build:subgraph-ropsten && yarn build:mutations",
     "build-mainnet": "yarn build:contracts && yarn build:subgraph-mainnet && yarn build:mutations",

ui/.babelrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      'babel-preset-gatsby',
+      {
+        targets: {
+          node: process.versions.node.split('.')[0],
+          browsers: ['>0.25%', 'not dead'],
+        },
+      },
+    ],
+  ],
+}

ui/.graphclientrc.yml

@@ -0,0 +1,11 @@
+# This loads the Subgraph schema, from the actual Subgrahp
+sources:
+  - name: everest
+    handler:
+      graphql:
+        endpoint: ${GATSBY_GRAPHQL_HTTP_URI}
+
+# Loads all queries and generates a TypedDocumentNode
+documents:
+  - "./src/graphql/**/*.graphql"
+

ui/gatsby-node.js

@@ -1,4 +1,4 @@
-const fetch = require('isomorphic-fetch')
+const { fetch } = require('cross-undici-fetch')
 
 const activeEnv =
   process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development'
@@ -12,27 +12,29 @@ require('dotenv').config({
 exports.createPages = async ({ page, actions }) => {
   const { createPage } = actions
 
-  const query = `{ 
-    categories {
-      id
-      name
-      imageUrl
-      description
-      subcategories {
+  const query = /* GraphQL */ `
+    {
+      categories {
         id
+        name
+        imageUrl
+        description
+        subcategories {
+          id
+          projects {
+            id
+          }
+        }
+        parentCategory {
+          id
+          name
+        }
         projects {
           id
         }
       }
-      parentCategory {
-        id
-        name
-      }
-      projects {
-        id
-      }
     }
-  }`
+  `
 
   const result = await fetch(process.env.GATSBY_GRAPHQL_HTTP_URI, {
     method: 'POST',
@@ -102,6 +104,22 @@ exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
   }
 
   actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        'cross-undici-fetch': require.resolve(
+          'cross-undici-fetch/dist/global-ponyfill.js',
+        ),
+      },
+    },
     node: { fs: 'empty', net: 'empty', child_process: 'empty' },
+    module: {
+      rules: [
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
+      ],
+    },
   })
 }

ui/package.json

@@ -5,6 +5,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "scripts": {
+    "build:client": "DOTENV_CONFIG_PATH=./.env.development graphclient build --require dotenv/config",
     "build": "rm -rf public/ && rm -rf .cache && gatsby build --prefix-paths",
     "build:staging": "rm -rf public/ && rm -rf .cache && GATSBY_ACTIVE_ENV=staging gatsby build --prefix-paths && node post-build.js",
     "develop": "gatsby develop -p 4000",
@@ -30,7 +31,6 @@
     "@web3-react/network-connector": "^6.0.4",
     "@web3-react/walletconnect-connector": "^6.0.2",
     "@web3-react/walletlink-connector": "^6.0.2",
-    "apollo-boost": "^0.4.4",
     "base-x": "^3.0.7",
     "dotenv": "^8.2.0",
     "ethers": "^4.0.40",
@@ -64,8 +64,11 @@
     "web3-react": "^5.0.5"
   },
   "devDependencies": {
+    "babel-preset-gatsby": "2.9.1",
+    "@graphprotocol/client-cli": "0.0.2",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.8",
-    "prettier": "^1.19.1"
+    "prettier": "^1.19.1",
+    "dotenv": "16.0.0"
   },
   "repository": {
     "type": "git",

ui/src/components/Search/index.js

@@ -9,12 +9,12 @@ import Card from '../Card'
 import SearchIcon from '../../images/search.svg'
 import Close from '../../images/close.svg'
 
-import { PROJECT_SEARCH } from '../../utils/apollo/queries'
+import { projectSearchDocument } from '../../../.graphclient'
 
 const Search = ({ isSearchOpen, setIsSearchOpen, value, setValue }) => {
   let searchData = null
 
-  const [searchProjects, { data }] = useLazyQuery(PROJECT_SEARCH)
+  const [searchProjects, { data }] = useLazyQuery(projectSearchDocument)
 
   if (data && data.projectSearch) {
     searchData = data.projectSearch
@@ -176,24 +176,24 @@ const Search = ({ isSearchOpen, setIsSearchOpen, value, setValue }) => {
       )}
     </Box>
   ) : (
-      <SearchIcon
-        sx={{
-          fill: 'secondary',
-          height: '25px',
-          width: '25px',
-          cursor: 'pointer',
-          mr: [0, 3, 3],
-          transition: 'all 0.3s ease',
-          '&:hover': {
-            fill: 'linkHover',
-          },
-        }}
-        onClick={e => {
-          e.stopPropagation()
-          setIsSearchOpen(true)
-        }}
-      />
-    )
+    <SearchIcon
+      sx={{
+        fill: 'secondary',
+        height: '25px',
+        width: '25px',
+        cursor: 'pointer',
+        mr: [0, 3, 3],
+        transition: 'all 0.3s ease',
+        '&:hover': {
+          fill: 'linkHover',
+        },
+      }}
+      onClick={e => {
+        e.stopPropagation()
+        setIsSearchOpen(true)
+      }}
+    />
+  )
 }
 
 Search.propTypes = {

ui/src/components/UploadImage/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { jsx } from 'theme-ui'
 import { Grid } from '@theme-ui/components'
 import { useMutation } from '@apollo/react-hooks'
-import { gql } from 'apollo-boost'
+import { gql } from 'graphql-tag'
 
 import Close from '../../images/close.svg'
 import Loading from '../Loading'

ui/src/graphql/all-categoties.query.graphql

@@ -0,0 +1,55 @@
+query allCategories(
+    $orderBy: Category_orderBy
+    $orderDirection: OrderDirection
+  ) {
+    categories(
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: { parentCategory: null }
+    ) {
+      id
+      name
+      description
+      imageUrl
+      projectCount
+      parentCategory {
+        id
+        name
+      }
+      subcategories {
+        id
+        name
+        imageUrl
+        parentCategory {
+          id
+          name
+        }
+        subcategories {
+          id
+          name
+          imageUrl
+          parentCategory {
+            id
+            name
+            parentCategory {
+              id
+              name
+            }
+          }
+          subcategories {
+            id
+            name
+            imageUrl
+            parentCategory {
+              id
+              name
+              parentCategory {
+                id
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }

ui/src/graphql/categories.query.graphql

@@ -0,0 +1,30 @@
+query categories(
+    $parentCategory: String
+    $orderBy: Category_orderBy
+    $orderDirection: OrderDirection
+  ) {
+    categories(
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: { parentCategory: $parentCategory }
+    ) {
+      id
+      name
+      description
+      imageUrl
+      projectCount
+      subcategories {
+        id
+        projects {
+          id
+        }
+      }
+      parentCategory {
+        id
+        name
+      }
+      projects {
+        id
+      }
+    }
+  }

ui/src/graphql/category.query.graphql

@@ -0,0 +1,66 @@
+query category(
+    $id: ID!
+    $orderBy: Category_orderBy
+    $orderDirection: OrderDirection
+  ) {
+    category(id: $id) {
+      id
+      name
+      description
+      imageUrl
+      projectCount
+      subcategories(orderBy: $orderBy, orderDirection: $orderDirection) {
+        id
+        name
+        description
+        imageUrl
+        projectCount
+        projects {
+          id
+          name
+          description
+          avatar
+          createdAt
+          currentChallenge {
+            id
+          }
+          categories {
+            id
+            name
+          }
+        }
+      }
+      parentCategory {
+        id
+        name
+        parentCategory {
+          id
+          name
+        }
+      }
+      projects {
+        id
+        name
+        image
+        description
+        avatar
+        createdAt
+        isRepresentative
+        currentChallenge {
+          id
+        }
+        categories {
+          id
+          name
+          description
+          parentCategory {
+            id
+            name
+          }
+          subcategories {
+            id
+          }
+        }
+      }
+    }
+  }

ui/src/graphql/challenge.query.graphql

@@ -0,0 +1,7 @@
+  query challenge($id: ID!) {
+    id
+    description
+    votes {
+      id
+    }
+  }