From dd46c6d7b3ba650a9283fab176f3b727348a179d Mon Sep 17 00:00:00 2001
From: Alvin Lim <alvink77@gmail.com>
Date: Wed, 27 Mar 2019 10:02:46 +0700
Subject: [PATCH] docs(example): add example for apollo graphql [skip ci]

re #152
---
 example/apollo-graphql/_wrap.jsx             | 15 +++++++
 example/apollo-graphql/package.json          | 22 +++++++++
 example/apollo-graphql/routes.json           |  6 +++
 example/apollo-graphql/src/RootComponent.jsx | 47 ++++++++++++++++++++
 example/apollo-graphql/src/client.js         | 11 +++++
 5 files changed, 101 insertions(+)
 create mode 100644 example/apollo-graphql/_wrap.jsx
 create mode 100644 example/apollo-graphql/package.json
 create mode 100644 example/apollo-graphql/routes.json
 create mode 100644 example/apollo-graphql/src/RootComponent.jsx
 create mode 100644 example/apollo-graphql/src/client.js

diff --git a/example/apollo-graphql/_wrap.jsx b/example/apollo-graphql/_wrap.jsx
new file mode 100644
index 00000000..8831dfc4
--- /dev/null
+++ b/example/apollo-graphql/_wrap.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Wrap from '@airy/maleo/wrap';
+import { ApolloProvider } from 'react-apollo';
+
+import client from './src/client';
+
+export default class CustomWrap extends Wrap{
+  render() {
+    return (
+      <ApolloProvider client={client}>
+        {super.render()}
+      </ApolloProvider>
+    )
+  }
+}
\ No newline at end of file
diff --git a/example/apollo-graphql/package.json b/example/apollo-graphql/package.json
new file mode 100644
index 00000000..e020e64a
--- /dev/null
+++ b/example/apollo-graphql/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "apollo-graphql-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "maleo dev",
+    "build": "export NODE_ENV=production && maleo build",
+    "start": "export NODE_ENV=production && node .maleo/server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@airy/maleo": "^0.0.14",
+    "apollo-boost": "^0.3.1",
+    "graphql": "^14.1.1",
+    "graphql-tag": "^2.10.1",
+    "react": "^16.8.5",
+    "react-apollo": "^2.5.3"
+  }
+}
diff --git a/example/apollo-graphql/routes.json b/example/apollo-graphql/routes.json
new file mode 100644
index 00000000..0e5ca739
--- /dev/null
+++ b/example/apollo-graphql/routes.json
@@ -0,0 +1,6 @@
+[
+  {
+    "path": "/",
+    "page": "./src/RootComponent"
+  }
+]
\ No newline at end of file
diff --git a/example/apollo-graphql/src/RootComponent.jsx b/example/apollo-graphql/src/RootComponent.jsx
new file mode 100644
index 00000000..d57a34f9
--- /dev/null
+++ b/example/apollo-graphql/src/RootComponent.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Query } from 'react-apollo'
+import gql from 'graphql-tag'
+
+const query = gql`
+  {
+    todos{
+      description
+      status
+      user {
+        id
+        name
+      }
+    }
+  }
+`
+
+export default class extends React.Component {
+  render() {
+    return (
+      <Query query={query}>
+        {({ loading, error, data }) => {
+          if (loading) return 'Loading...';
+          if (error) return `Error! ${error.message}`;
+
+          return (
+            <ul>
+              {data.todos.map((d) => (
+                <li key={d.id}>
+                  <p>
+                    {d.description}
+                  </p>
+                  <p>
+                    {d.status}
+                  </p>
+                  <p>
+                    {d.user.name}
+                  </p>
+                </li>
+              ))}
+            </ul>
+          )
+        }}
+      </Query>
+    )
+  }
+}
\ No newline at end of file
diff --git a/example/apollo-graphql/src/client.js b/example/apollo-graphql/src/client.js
new file mode 100644
index 00000000..f01cee12
--- /dev/null
+++ b/example/apollo-graphql/src/client.js
@@ -0,0 +1,11 @@
+import ApolloClient from 'apollo-boost';
+
+export const client = new ApolloClient({
+  // By default, this client will send queries to the
+  //  `/graphql` endpoint on the same host
+  // Pass the configuration option { uri: YOUR_GRAPHQL_API_URL } to the `HttpLink` to connect
+  // to a different host
+  uri: 'https://mini-ws-todo.herokuapp.com/graphql'
+});
+
+export default client
\ No newline at end of file