1 files changed, 36 insertions, 0 deletions
diff --git a/components/SingleItem.js b/components/SingleItem.js
new file mode 100644
index 0000000..297c33d
--- /dev/null
+++ b/components/SingleItem.js
@@ -0,0 +1,36 @@
+import { graphql, compose } from 'react-apollo';
+import { Motion, spring } from 'react-motion';
+import { SINGLE_ITEM_QUERY } from '../queries';
+import makeImage from '../lib/image';
+
+const SingleItem = props => {
+  if (!props.findItem.Item) return <p>Not ready</p>;
+  console.log(props.findItem.Item);
+
+  if (props.loading) return <p>Loading...</p>;
+  if (props.error) return <p>Error...</p>;
+
+  const item = props.findItem.Item;
+  return (
+    <div>
+      <img src={makeImage(item.image)} alt={item.title} />
+      <h2>Viewing {item.title}</h2>
+
+      <Motion defaultStyle={{ x: 0 }} style={{ x: spring(100) }}>
+        {value => <div>{value.x}</div>}
+      </Motion>
+    </div>
+  );
+};
+
+const ComponentWithMutations = compose(
+  graphql(SINGLE_ITEM_QUERY, {
+    name: 'findItem',
+    // This comes from Props
+    options: ({ id }) => ({
+      variables: { id },
+    }),
+  })
+)(SingleItem);
+
+export default ComponentWithMutations;