prototype fetching repos from GitHub's GraphQL API

.env.sample

@@ -0,0 +1 @@
+GITHUB_TOKEN=

.gitignore

@@ -5,3 +5,5 @@ yarn-error.log
 .cache
 /public
 .DS_Store
+.env.development
+.env.production

gatsby-config.js

@@ -1,5 +1,9 @@
 const config = require('./config.js')
 
+require('dotenv').config({
+    path: `.env.${process.env.NODE_ENV}`
+})
+
 module.exports = {
     siteMetadata: {
         // spread all of our config values here
@@ -36,6 +40,23 @@ module.exports = {
                 path: `${__dirname}/node_modules/@oceanprotocol/art`
             }
         },
+        {
+            resolve: 'gatsby-source-graphql',
+            options: {
+                typeName: 'GitHub',
+                fieldName: 'github',
+                // Url to query from
+                url: 'https://api.github.com/graphql',
+                // HTTP headers
+                headers: {
+                    // Learn about environment variables: https://gatsby.app/env-vars
+                    Authorization: `bearer ${process.env.GITHUB_TOKEN}`
+                },
+                // Additional options to pass to node-fetch
+                fetchOptions: {},
+                refetchInterval: 60
+            }
+        },
         {
             resolve: 'gatsby-transformer-remark',
             options: {

package.json

@@ -25,6 +25,7 @@
     "gatsby-remark-responsive-iframe": "^2.0.6",
     "gatsby-remark-smartypants": "^2.0.6",
     "gatsby-source-filesystem": "^2.0.8",
+    "gatsby-source-graphql": "^2.0.6",
     "gatsby-transformer-remark": "^2.1.12",
     "gatsby-transformer-sharp": "^2.1.8",
     "gatsby-transformer-yaml": "^2.1.5",
@@ -49,6 +50,7 @@
     "test": "npm run lint"
   },
   "devDependencies": {
+    "dotenv": "^6.1.0",
     "eslint": "^5.9.0",
     "eslint-config-oceanprotocol": "^1.3.0",
     "eslint-config-prettier": "^3.1.0",

src/components/Repositories/RepositoryList.jsx

@@ -15,6 +15,7 @@ const RepositoryList = ({ repositories }) => (
                             key={item.name}
                             name={item.name}
                             description={item.description}
+                            url={item.url}
                             links={item.links}
                         />
                     ))}

src/components/Repositories/index.jsx

@@ -29,30 +29,49 @@ const QuickRun = () => (
     </div>
 )
 
-const Repositories = () => (
+const query = graphql`
-    <StaticQuery
+    query {
-        query={graphql`
+        allRepositoriesYaml {
-            query {
+            edges {
-                allRepositoriesYaml {
+                node {
-                    edges {
+                    id
-                        node {
+                    group
-                            id
+                    items {
-                            group
+                        name
-                            items {
+                        description
-                                name
+                        links {
-                                description
+                            name
-                                links {
+                            url
-                                    name
-                                    url
-                                }
-                            }
                         }
                     }
                 }
             }
-        `}
+        }
+
+        github {
+            organization(login: "oceanprotocol") {
+                repositories(first: 100) {
+                    edges {
+                        node {
+                            id
+                            name
+                            description
+                            url
+                        }
+                    }
+                }
+            }
+        }
+    }
+`
+
+const Repositories = () => (
+    <StaticQuery
+        query={query}
         render={data => {
             const repositories = data.allRepositoriesYaml.edges
+            const repositoriesGitHub =
+                data.github.organization.repositories.edges
 
             return (
                 <div className={styles.repositories}>