01-Writing your first React GraphQL Client

Author: rwieruch

package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-scripts": "2.0.5"

package.json

@@ -1,25 +1,60 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import axios from 'axios';
+
+const TITLE = 'React GraphQL GitHub Client';
+
+const axiosGitHubGraphQL = axios.create({
+  baseURL: 'https://api.github.com/graphql',
+  headers: {
+    Authorization: `bearer ${
+      process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN
+    }`,
+  },
+});
 
 class App extends Component {
+  state = {
+    path: 'the-road-to-learn-react/the-road-to-learn-react',
+  };
+
+  componentDidMount() {
+    // fetch data
+  }
+
+  onChange = event => {
+    this.setState({ path: event.target.value });
+  };
+
+  onSubmit = event => {
+    // fetch data
+
+    event.preventDefault();
+  };
+
   render() {
+    const { path } = this.state;
+
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+      <div>
+        <h1>{TITLE}</h1>
+
+        <form onSubmit={this.onSubmit}>
+          <label htmlFor="url">
+            Show open issues for https://github.com/
+          </label>
+          <input
+            id="url"
+            type="text"
+            value={path}
+            onChange={this.onChange}
+            style={{ width: '300px' }}
+          />
+          <button type="submit">Search</button>
+        </form>
+
+        <hr />
+
+        {/* Here comes the result! */}
       </div>
     );
   }