Apollo and graphql working!

src/App.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import { getQueryParamByName } from './utils.js';
-import './App.css';
+import ScoutOverview from './containers/ScoutOverview.js';
 
 class App extends Component {
 	render() {
+		const scoutID = getQueryParamByName("id", this.props.slug);
 		return (
 			<div className="App">
-				Hello World!
+				<ScoutOverview scoutID={scoutID} />
 			</div>
 		);
 	}

src/containers/ScoutOverview.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { gql, graphql } from 'react-apollo';
+
+function ScoutOverview({data, scoutID}) {
+	console.log(data);
+	return (
+		<div>
+			{data.getScout && data.getScout.displayName}
+		</div>
+	);
+}
+
+export default graphql(gql`
+	query GetScoutData($scoutID:ID!){
+		getScout(id: $scoutID){
+			displayName
+		}
+	}
+`,{options : ({scoutID}) => {
+	console.log("Building var! scoutId: ", scoutID);
+	return {variables: {scoutID}};
+}})(ScoutOverview);

src/index.js

@@ -15,9 +15,13 @@ const client = new ApolloClient({
 	})
 });
 
+const loc = window.location;
+
+console.log("location: ", loc);
+
 ReactDOM.render(
 	<ApolloProvider client={client}>
-		<App />
+		<App slug={loc.pathname} query={loc.search} />
 	</ApolloProvider>, 
 	document.getElementById('root')
 );

src/utils.js

@@ -0,0 +1,8 @@
+export function getQueryParamByName(name, url) {
+    name = name.replace(/[\[\]]/g, "\\$&");
+    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+}