solve first usecase: fetch repo infos from GitHub GraphQL API

README.md

@@ -23,6 +23,7 @@
     - [Repositories](#repositories)
 - [Development](#development)
     - [Use Docker](#use-docker)
+- [GitHub GraphQL API](#github-graphql-api)
 - [Authors](#authors)
 - [License](#license)
 
@@ -72,7 +73,26 @@ The editing workflow is as follows:
 
 ### Repositories
 
-The repositories list is currently sourced from the [`/data/repositories.yml`](data/repositories.yml) file. The GitHub link is auto generated from the given repository name and will always be added by default.
+The repositories list is currently sourced from the [`/data/repositories.yml`](data/repositories.yml) file, defining the grouping, the display order, and which repos to include.
+
+Inlcuding a repo requires only the `name` key and value, and it needs to be exactly the same as the repo name on GitHub:
+
+```yaml
+- name: brizo
+```
+
+Additional information about a repo will then be fetched automatically via [GitHub's GraphQL API](https://developer.github.com/v4/) on build time, and re-fetched every 5 minutes on client side.
+
+You can attach multiple links to a repo like so:
+
+```yaml
+- name: keeper-contracts
+  links:
+      - name: Documentation
+        url: https://github.com/oceanprotocol/keeper-contracts/tree/develop/doc
+```
+
+The GitHub link is automatically added for every repository name and will always be displayed.
 
 -   [`/data/repositories.yml`](data/repositories.yml)
 
@@ -112,6 +132,20 @@ docker-compose up
 
 This will expose a hot-reloading server under [localhost:8000](http://localhost:8000).
 
+## GitHub GraphQL API
+
+The GitHub GraphQL API integration is done through [gatsby-source-graphql](https://www.gatsbyjs.org/packages/gatsby-source-graphql/) and requires authorization.
+
+An environment variable `GITHUB_TOKEN` needs to present, filled with a [personal access token](https://github.com/settings/tokens) with the scope `public_repo`.
+
+For local development, you can simply create one and use it in your local .env file:
+
+```bash
+cp .env.sample .env.development
+vi .env.development
+# GITHUB_TOKEN=ADD-YOUR-TOKEN-HERE
+```
+
 ## Authors
 
 -   Troy McConaghy ([@ttmc](https://github.com/ttmc)) - [Ocean Protocol](https://oceanprotocol.com)

data/repositories.yml

@@ -1,36 +1,22 @@
 - group: Core Components
   items:
     - name: keeper-contracts
-      description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity'
       links:
         - name: Documentation
           url: https://github.com/oceanprotocol/keeper-contracts/tree/develop/doc
 
     - name: aquarius
-      description: '🐋 Off-chain database store for data assets metadata.'
       links:
         - name: API reference
           url: https://github.com/oceanprotocol/aquarius/blob/develop/docs/for_api_users/API.md
 
     - name: brizo
-      description: 'Helping publishers to expose their services'
-
     - name: pleuston
-      description: '🦄 Web app for consumers to explore, download, and publish data assets.'
 
 - group: Libraries
   items:
     - name: squid-js
-      description: '🦑 JavaScript client library for Ocean Protocol'
-
     - name: squid-py
-      description: '🦑 Python client library for Ocean Protocol'
-
     - name: squid-java
-      description: '🦑 Java client library for Ocean Protocol'
-
     - name: secret-store-client-js
-      description: '🔑 JavaScript implementation of the parity secret store for use in ocean.'
-
     - name: secret-store-client-py
-      description: '🔑 Parity Secret Store Python Client'

gatsby-config.js

@@ -45,16 +45,13 @@ module.exports = {
             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
+                refetchInterval: 300 // 5 min.
             }
         },
         {

src/components/Repositories/Repository.jsx

@@ -1,29 +1,68 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'
 import styles from './Repository.module.scss'
 
-const Repository = ({ name, description, links }) => (
+const queryGithub = graphql`
-    <div className={styles.repository}>
+    query GitHubReposInfo {
-        <h1 className={styles.repositoryName}>{name}</h1>
+        github {
-        <p>{description}</p>
+            organization(login: "oceanprotocol") {
+                repositories(first: 100) {
+                    edges {
+                        node {
+                            name
+                            description
+                            url
+                        }
+                    }
+                }
+            }
+        }
+    }
+`
 
-        <ul className={styles.repositoryLinks}>
+const Repository = ({ name, links }) => (
-            <li>
+    <StaticQuery
-                <a href={`https://github.com/oceanprotocol/${name}`}>GitHub</a>
+        query={queryGithub}
-            </li>
+        render={data => {
-            {links &&
+            const repositoriesGitHub =
-                links.map(link => (
+                data.github.organization.repositories.edges
-                    <li key={link.url}>
+
-                        <a href={link.url}>{link.name}</a>
+            // just iterate over all repos until we have a name match,
-                    </li>
+            // then return that repo
-                ))}
+            const repoFilteredArray = repositoriesGitHub
-        </ul>
+                .map(({ node }) => {
-    </div>
+                    if (node.name === name) return node
+                })
+                .filter(el => el != null)
+
+            const repo = Object.assign(...repoFilteredArray)
+
+            return (
+                <div className={styles.repository}>
+                    <h1 className={styles.repositoryName}>{name}</h1>
+
+                    <p>{!repo ? '...' : repo.description}</p>
+
+                    <ul className={styles.repositoryLinks}>
+                        <li>
+                            <a href={repo.url}>GitHub</a>
+                        </li>
+                        {links &&
+                            links.map(link => (
+                                <li key={link.url}>
+                                    <a href={link.url}>{link.name}</a>
+                                </li>
+                            ))}
+                    </ul>
+                </div>
+            )
+        }}
+    />
 )
 
 Repository.propTypes = {
     name: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
     links: PropTypes.array
 }
 

src/components/Repositories/index.jsx

@@ -38,7 +38,6 @@ const query = graphql`
                     group
                     items {
                         name
-                        description
                         links {
                             name
                             url
@@ -47,31 +46,34 @@ const query = graphql`
                 }
             }
         }
-
-        github {
-            organization(login: "oceanprotocol") {
-                repositories(first: 100) {
-                    edges {
-                        node {
-                            id
-                            name
-                            description
-                            url
-                        }
-                    }
-                }
-            }
-        }
     }
 `
 
+// const queryGithub = graphql`
+//     query {
+//         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 =
+            // const repositoriesGitHub = data.github.organization.repositories.edges
-                data.github.organization.repositories.edges
 
             return (
                 <div className={styles.repositories}>