apollo client basics

CodeBrew28 · CodeBrew28 · commit 7dd247af110e · 2019-01-01T17:31:23.000-08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Week_04
+Intro to React
+Adding a list of elements to your todo list
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "react-intro",
+  "version": "1.0.0",
+  "description": "Step 1",
+  "main": "index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "apollo-boost": "^0.1.23",
+    "graphql": "^14.0.2",
+    "react": "^16.4.2",
+    "react-apollo": "^2.3.3",
+    "react-dom": "^16.4.2",
+    "react-scripts": "^1.1.5"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/components/MyName.js b/src/components/MyName.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import ApolloClient from "apollo-boost";
+
+import { Query } from "react-apollo";
+import gql from "graphql-tag";
+
+const MyName = () => (
+  <Query
+    query={gql`
+      {
+        me {
+          name
+        }
+      }
+    `}
+  >
+    {({ loading, error, data }) => {
+      if (loading) return <p>Loading...</p>;
+      if (error) return <p>Error :(</p>;
+        {console.log(data.me.name)}
+      return <p> {data.me.name}</p>
+    }}
+  </Query>
+);
+export default MyName
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,21 @@
+import { ApolloProvider } from "react-apollo";
+import ApolloClient from "apollo-boost";
+import React from "react";
+import { render } from "react-dom";
+
+import MyName from "./components/MyName.js";
+
+const client = new ApolloClient({
+  uri: "http://localhost:8000/graphql"
+});
+
+const App = () => (
+  <ApolloProvider client={client}>
+    <div>
+      <h2>My first Apollo app 🚀</h2>
+      <MyName />
+    </div>
+  </ApolloProvider>
+);
+
+render(<App />, document.getElementById("root"));
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Week_04`
	`2`	`+Intro to React`
	`3`	`+Adding a list of elements to your todo list`