wip

package.json

@@ -4,6 +4,9 @@
   "private": true,
   "dependencies": {
     "apollo-boost": "^0.1.27",
+    "graphql": "^14.1.1",
+    "graphql-tag": "^2.10.1",
+    "graphql.macro": "^1.3.3",
     "react": "^16.7.0",
     "react-apollo": "^2.4.0",
     "react-dom": "^16.7.0",
@@ -13,7 +16,8 @@
   },
   "devDependencies": {
     "@types/react": "^16.7.20",
-    "@types/react-dom": "^16.0.11"
+    "@types/react-dom": "^16.0.11",
+    "ts-transform-graphql-tag": "^0.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/app.tsx

@@ -1,14 +1,33 @@
 import React from 'react';
+import ApolloClient from 'apollo-boost';
+import { ApolloProvider } from 'react-apollo';
+import CreateReservation from './createReservation';
+
+const apolloClient = new ApolloClient({
+  uri: "http://localhost:4000"
+});
+
+// ⚽️  Goal
+// --------
+
+// We want to create a webapp to reserve products (food).
+// Some ingredients we need: a store, products and reservations.
+// First of all we want a list of stores. After we have chosen
+// a store, we get a list of products (query) of that store.
+// We pick some products, pick a quantity, and we make a reservation (mutation)
+
+// 🏪  Exercise 1
+// --------------
+
+// 1) First we need to create a query to get all the stores.
+// 
 
 class App extends React.PureComponent {
   render() {
     return (
-      <div>
-        <h1>Hello everyone! This will become our foodies reservation webapp!</h1>
-        <br />
-        <br />
-        <img src="https://sayingimages.com/wp-content/uploads/im-on-a-seafood-diet-food-memes.jpg" />
-      </div>
+      <ApolloProvider client={apolloClient}>
+        <CreateReservation />
+      </ApolloProvider>
     );
   }
 }

src/createReservation.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { compose } from 'react-apollo';
+import { getStoresQuery } from './queries';
+
+interface CreateReservationProps {
+  storesData: object;
+}
+
+class CreateReservation extends React.PureComponent<CreateReservationProps> {
+  render() {
+    const { storesData } = this.props;
+    console.warn('stores data', storesData);
+    return (
+      <form>
+        <select>
+          <option value="volvo">Volvo</option>
+        </select>
+      </form>
+    );
+  }
+}
+
+export default compose(getStoresQuery)(CreateReservation);

src/queries.ts

@@ -0,0 +1,15 @@
+import { gql } from 'graphql.macro';
+import { graphql } from 'react-apollo';
+
+export const GET_STORES = gql`
+  query getStores {
+    stores() {
+      id
+      name
+    }
+  }
+`;
+
+export const getStoresQuery = graphql(GET_STORES, {
+  name: 'storesData',
+});