├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
└── index.html
└── src
├── App.css
├── App.js
├── index.css
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 |
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # community-graph-starter-kit
2 |
3 | A starter app you can build on to create an app for the Neo4j community graph hackathon. It initializes the Apollo GraphQL client, and loads a query into the app to display.
4 |
5 | - [src/index.js](src/index.js) demonstrates how to initialize the library to connect to the right endpoint.
6 | - [src/App.js](src/App.js) shows how to decorate a component with a GraphQL query to load data into that component.
7 |
8 | Read more in the [documentation](http://dev.apollodata.com/react/queries.html) for Apollo Client.
9 |
10 | Don't forget to use [GraphiQL](http://graphql.communitygraph.org/graphiql/?query=%7B%20%0A%20%20Repository(orderBy%3A%5Bupdated_desc%5D%2C%20first%3A20)%20%7B%0A%20%20%09title%0A%20%20%20%20url%0A%20%20%20%20created%0A%20%20%20%20favorites%0A%20%20%20%20updated%0A%20%20%20%20full_name%0A%20%20%20%20homepage%0A%20%20%20%20language%0A%20%20%20%20score%0A%20%20%20%20open_issues%0A%20%20%09owner%20%7B%0A%20%20%20%20%20%20name%0A%20%20%09%7D%0A%20%20%7D%0A%7D) to explore the available arguments and fields in the API!
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "community-graph-starter-kit",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^15.5.4",
7 | "react-apollo": "^1.2.0",
8 | "react-dom": "^15.5.4"
9 | },
10 | "devDependencies": {
11 | "react-scripts": "0.9.5"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test --env=jsdom",
17 | "eject": "react-scripts eject"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neo4j-graphql/community-graph-starter-kit/a9bfc73ec7b112fafa5a93cf662df16bb90408cc/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 | React App
17 |
18 |
19 |
20 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neo4j-graphql/community-graph-starter-kit/a9bfc73ec7b112fafa5a93cf662df16bb90408cc/src/App.css
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { graphql, gql } from 'react-apollo';
3 |
4 | import './App.css';
5 |
6 | // Data arrives in the `data` prop
7 | // Read more in http://dev.apollodata.com/react/queries.html
8 | class App extends Component {
9 | renderList() {
10 | if (this.props.data.loading) {
11 | return Loading...
;
12 | }
13 |
14 | return (
15 |
16 | {this.props.data.Repository.map(repo => (
17 | -
18 | {repo.full_name}
19 | :{' '}
20 | {repo.favorites}
21 | {' '}stars,{' '}
22 | {repo.open_issues}
23 | {' '}issues
24 |
25 | ))}
26 |
27 | );
28 | }
29 |
30 | render() {
31 | return (
32 |
33 |
Recently updated repositories:
34 | {this.renderList()}
35 |
36 | );
37 | }
38 | }
39 |
40 | // Declare a query tagged with "gql"
41 | // Write new queries here: http://graphql.communitygraph.org/graphiql/
42 | const query = gql`
43 | {
44 | Repository(orderBy: [updated_desc], first: 20) {
45 | url
46 | created
47 | favorites
48 | updated
49 | full_name
50 | homepage
51 | language
52 | score
53 | open_issues
54 | owner {
55 | name
56 | }
57 | }
58 | }
59 | `;
60 |
61 | // Attach the query to the component
62 | export default graphql(query)(App);
63 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import {
4 | ApolloClient,
5 | ApolloProvider,
6 | createNetworkInterface,
7 | } from 'react-apollo';
8 |
9 | import App from './App';
10 | import './index.css';
11 |
12 | // Initialize Apollo Client, read more at:
13 | // http://dev.apollodata.com/react/initialization.html
14 | const client = new ApolloClient({
15 | networkInterface: createNetworkInterface({
16 | uri: 'http://graphql.communitygraph.org/graphql/',
17 | }),
18 | });
19 |
20 | ReactDOM.render(
21 |
22 |
23 | ,
24 | document.getElementById('root'),
25 | );
26 |
--------------------------------------------------------------------------------