solve first usecase: fetch repo infos from GitHub GraphQL API
This commit is contained in:
parent
05de45573a
commit
7e0db7c3a1
GPG Key ID:
606EEEF3C479A91F
36
README.md
36
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)
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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 }) => (
|
||||
<div className={styles.repository}>
|
||||
<h1 className={styles.repositoryName}>{name}</h1>
|
||||
<p>{description}</p>
|
||||
const queryGithub = graphql`
|
||||
query GitHubReposInfo {
|
||||
github {
|
||||
organization(login: "oceanprotocol") {
|
||||
repositories(first: 100) {
|
||||
edges {
|
||||
node {
|
||||
name
|
||||
description
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
<ul className={styles.repositoryLinks}>
|
||||
<li>
|
||||
<a href={`https://github.com/oceanprotocol/${name}`}>GitHub</a>
|
||||
</li>
|
||||
{links &&
|
||||
links.map(link => (
|
||||
<li key={link.url}>
|
||||
<a href={link.url}>{link.name}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
const Repository = ({ name, links }) => (
|
||||
<StaticQuery
|
||||
query={queryGithub}
|
||||
render={data => {
|
||||
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 (
|
||||
<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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
data.github.organization.repositories.edges
|
||||
// const repositoriesGitHub = data.github.organization.repositories.edges
|
||||
|
||||
return (
|
||||
<div className={styles.repositories}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue