From 7e0db7c3a155f93c43a9e845b903680716db428b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 10 Nov 2018 18:21:57 +0100 Subject: [PATCH] solve first usecase: fetch repo infos from GitHub GraphQL API --- README.md | 36 ++++++++++- data/repositories.yml | 14 ----- gatsby-config.js | 5 +- src/components/Repositories/Repository.jsx | 73 +++++++++++++++++----- src/components/Repositories/index.jsx | 38 +++++------ 5 files changed, 112 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index f5b6f9ae..60498f95 100644 --- a/README.md +++ b/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) diff --git a/data/repositories.yml b/data/repositories.yml index f7a82b27..1948a560 100644 --- a/data/repositories.yml +++ b/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' diff --git a/gatsby-config.js b/gatsby-config.js index a954ca7e..f6e11a76 100755 --- a/gatsby-config.js +++ b/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. } }, { diff --git a/src/components/Repositories/Repository.jsx b/src/components/Repositories/Repository.jsx index 4fb3385f..bca74dc5 100644 --- a/src/components/Repositories/Repository.jsx +++ b/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 }) => ( -
-

{name}

-

{description}

+const queryGithub = graphql` + query GitHubReposInfo { + github { + organization(login: "oceanprotocol") { + repositories(first: 100) { + edges { + node { + name + description + url + } + } + } + } + } + } +` - -
+const Repository = ({ name, links }) => ( + { + const repositoriesGitHub = + data.github.organization.repositories.edges + + // just iterate over all repos until we have a name match, + // then return that repo + const repoFilteredArray = repositoriesGitHub + .map(({ node }) => { + if (node.name === name) return node + }) + .filter(el => el != null) + + const repo = Object.assign(...repoFilteredArray) + + return ( +
+

{name}

+ +

{!repo ? '...' : repo.description}

+ + +
+ ) + }} + /> ) Repository.propTypes = { name: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, links: PropTypes.array } diff --git a/src/components/Repositories/index.jsx b/src/components/Repositories/index.jsx index 36c1997c..82a9cc50 100644 --- a/src/components/Repositories/index.jsx +++ b/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 = () => ( { const repositories = data.allRepositoriesYaml.edges - const repositoriesGitHub = - data.github.organization.repositories.edges + // const repositoriesGitHub = data.github.organization.repositories.edges return (