colocate queries and components

42 files changed, 510 insertions, 525 deletions

diff --git a/frontend/__tests__/AddToCart.test.js b/frontend/__tests__/AddToCart.test.js
index 888ad68..fe15f3f 100644
--- a/frontend/__tests__/AddToCart.test.js
+++ b/frontend/__tests__/AddToCart.test.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import AddToCart from '../components/AddToCart';
 import { ApolloConsumer } from 'react-apollo';
 import { MockedProvider } from 'react-apollo/test-utils';
 import wait from 'waait';
+import AddToCart, { ADD_TO_CART_MUTATION } from '../components/AddToCart';
 import { fakeCartItem, fakeUser } from '../lib/testUtils';
-import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from '../components/User';
 
 const mocks = [
   {
@@ -34,12 +34,15 @@ const mocks = [
 ];
 
 describe('<AddtoCart/>', () => {
-  it('renders and matches snapshot', () => {
+  it('renders and matches snapshot', async () => {
     const wrapper = mount(
-      <MockedProvider>
+      <MockedProvider mocks={mocks}>
         <AddToCart id="abc123" />
       </MockedProvider>
     );
+    await wait();
+    wrapper.update();
+
     expect(toJSON(wrapper.find('button'))).toMatchSnapshot();
   });
 
@@ -58,6 +61,8 @@ describe('<AddtoCart/>', () => {
       </MockedProvider>
     );
     await wait();
+    wrapper.update();
+
     const { me } = apolloClient.readQuery({ query: CURRENT_USER_QUERY });
     expect(me.cart).toHaveLength(0);
 
@@ -72,12 +77,14 @@ describe('<AddtoCart/>', () => {
     expect(me2.cart[0].quantity).toBe(1);
   });
 
-  it('changes to adding when clicked', () => {
+  it('changes to adding when clicked', async () => {
     const wrapper = mount(
       <MockedProvider mocks={mocks}>
         <AddToCart id="abc123" />
       </MockedProvider>
     );
+    await wait();
+    wrapper.update();
     expect(wrapper.text()).toContain('🛒 Add To Cart');
     wrapper.find('button').simulate('click');
     expect(wrapper.text()).toContain('🛒 Adding To Cart');
diff --git a/frontend/__tests__/Cart.test.js b/frontend/__tests__/Cart.test.js
index f32c7f9..255183e 100644
--- a/frontend/__tests__/Cart.test.js
+++ b/frontend/__tests__/Cart.test.js
@@ -6,7 +6,8 @@ import wait from 'waait';
 import Cart from '../components/Cart';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { fakeCartItem, fakeUser } from '../lib/testUtils';
-import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from '../components/User';
+import { LOCAL_STATE_QUERY } from '../components/Cart';
 
 const mocks = [
   {
diff --git a/frontend/__tests__/CreateItem.test.js b/frontend/__tests__/CreateItem.test.js
index a2fcb90..56c3f10 100644
--- a/frontend/__tests__/CreateItem.test.js
+++ b/frontend/__tests__/CreateItem.test.js
@@ -3,10 +3,9 @@ import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
 import Router from 'next/router';
 import { MockedProvider } from 'react-apollo/test-utils';
-import CreateItem from '../components/CreateItem';
+import CreateItem, { CREATE_ITEM_MUTATION } from '../components/CreateItem';
 import wait from 'waait';
 import { fakeItem } from '../lib/testUtils';
-import { CREATE_ITEM_MUTATION } from '../queries/queries.graphql';
 
 const dogImage = 'https://dog.com/dog.jpg';
 
diff --git a/frontend/__tests__/EditUser.test.js b/frontend/__tests__/EditUser.test.js
index c1aea1c..a98cbb5 100644
--- a/frontend/__tests__/EditUser.test.js
+++ b/frontend/__tests__/EditUser.test.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import EditUser from '../components/EditUser';
-import wait from 'waait';
 import { MockedProvider } from 'react-apollo/test-utils';
+import wait from 'waait';
+import EditUser, { UPDATE_USER_MUTATION } from '../components/EditUser';
 import { fakeUser } from '../lib/testUtils';
-import { CURRENT_USER_QUERY, UPDATE_USER_MUTATION } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from '../components/User';
 
 const mocks = [
   {
diff --git a/frontend/__tests__/Nav.test.js b/frontend/__tests__/Nav.test.js
index 16f20e3..5c61c56 100644
--- a/frontend/__tests__/Nav.test.js
+++ b/frontend/__tests__/Nav.test.js
@@ -6,7 +6,7 @@ import Router from 'next/router';
 import Nav from '../components/Nav';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { fakeUser } from '../lib/testUtils';
-import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from '../components/User';
 
 // Mock the router
 Router.router = { push() {} };
diff --git a/frontend/__tests__/Order.test.js b/frontend/__tests__/Order.test.js
index 5cb21c8..f3a4f06 100644
--- a/frontend/__tests__/Order.test.js
+++ b/frontend/__tests__/Order.test.js
@@ -2,10 +2,9 @@ import React from 'react';
 import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
 import wait from 'waait';
-import Order from '../components/Order';
 import { MockedProvider } from 'react-apollo/test-utils';
+import Order, { SINGLE_ORDER_QUERY } from '../components/Order';
 import { fakeOrder } from '../lib/testUtils';
-import { SINGLE_ORDER_QUERY } from '../queries/queries.graphql';
 
 const mocks = [
   {
diff --git a/frontend/__tests__/Pagination.test.js b/frontend/__tests__/Pagination.test.js
index 1202d9a..29a57f9 100644
--- a/frontend/__tests__/Pagination.test.js
+++ b/frontend/__tests__/Pagination.test.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import Pagination from '../components/Pagination';
+import Pagination, { PAGINATION_QUERY } from '../components/Pagination';
 import { MockedProvider } from 'react-apollo/test-utils';
 import wait from 'waait';
 import { fakeItem } from '../lib/testUtils';
-import { ALL_ITEMS_QUERY } from '../queries/queries.graphql';
 
 import Router from 'next/router';
 
@@ -15,7 +14,7 @@ Router.router = { push() {}, prefetch() {} };
 function makeMocksFor(length) {
   return [
     {
-      request: { query: ALL_ITEMS_QUERY, variables: { skip: 0, first: 4 } },
+      request: { query: PAGINATION_QUERY, variables: { skip: 0, first: 4 } },
       result: {
         data: {
           itemsConnection: {
@@ -25,7 +24,6 @@ function makeMocksFor(length) {
               __typename: 'count',
             },
           },
-          items: Array.from({ length }, (_, i) => fakeItem({ id: `item${i}` })),
         },
       },
     },
diff --git a/frontend/__tests__/PleaseSignIn.test.js b/frontend/__tests__/PleaseSignIn.test.js
index 68581b7..f516ea3 100644
--- a/frontend/__tests__/PleaseSignIn.test.js
+++ b/frontend/__tests__/PleaseSignIn.test.js
@@ -4,7 +4,7 @@ import wait from 'waait';
 import PleaseSignIn from '../components/PleaseSignIn';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { fakeUser } from '../lib/testUtils';
-import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from '../components/User';
 
 const notSignedInMocks = [
   {
diff --git a/frontend/__tests__/RemoveFromCart.test.js b/frontend/__tests__/RemoveFromCart.test.js
index 581e815..34229a5 100644
--- a/frontend/__tests__/RemoveFromCart.test.js
+++ b/frontend/__tests__/RemoveFromCart.test.js
@@ -4,9 +4,9 @@ import toJSON from 'enzyme-to-json';
 import { ApolloConsumer } from 'react-apollo';
 import { MockedProvider } from 'react-apollo/test-utils';
 import wait from 'waait';
-import RemoveFromCart from '../components/RemoveFromCart';
+import RemoveFromCart, { REMOVE_FROM_CART_MUTATION } from '../components/RemoveFromCart';
 import { fakeCartItem, fakeUser } from '../lib/testUtils';
-import { CURRENT_USER_QUERY, REMOVE_FROM_CART_MUTATION } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from '../components/User';
 
 const mocks = [
   {
diff --git a/frontend/__tests__/ResetRequest.test.js b/frontend/__tests__/ResetRequest.test.js
index 7e9a7c2..22a9508 100644
--- a/frontend/__tests__/ResetRequest.test.js
+++ b/frontend/__tests__/ResetRequest.test.js
@@ -1,11 +1,8 @@
-import React from 'react';
 import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import ResetRequest from '../components/ResetRequest';
 import { MockedProvider } from 'react-apollo/test-utils';
 import wait from 'waait';
-import { fakeItem } from '../lib/testUtils';
-import { REQUEST_RESET_MUTATION, RESET_MUTATION } from '../queries/queries.graphql';
+import ResetRequest, { REQUEST_RESET_MUTATION } from '../components/ResetRequest';
 
 const mocks = [
   {
@@ -46,50 +43,12 @@ describe('<ResetRequest/>', () => {
     });
 
     // submit the form
-    wrapper.find('form').simulate('submit');
+    const form = wrapper.find('form');
+    console.log(form);
+    form.simulate('submit');
 
     await wait();
     wrapper.update();
     expect(wrapper.find('p').text()).toContain('Success! Check Your Email!');
   });
-
-  xit('displays an error', async () => {
-    const errorMocks = [
-      {
-        request: {
-          query: REQUEST_RESET_MUTATION,
-          variables: {
-            email: 'wesbos@gmail.com',
-          },
-        },
-        error: {
-          message: 'Shit',
-        },
-      },
-    ];
-    const wrapper = mount(
-      <MockedProvider mocks={errorMocks}>
-        <ResetRequest />
-      </MockedProvider>
-    );
-
-    wrapper.find('input').simulate('change', {
-      target: { value: 'wesbos@gmail.com' },
-    });
-
-    try {
-      wrapper.find('form').simulate('submit');
-      await wait();
-    } catch (e) {
-      console.log('CAUGHT');
-      console.log(e);
-    }
-    // expect(async () => {
-    // }).toThrow();
-
-    // wrapper.find('form').simulate('submit');
-    wrapper.update();
-    console.log(wrapper.debug());
-    // expect(wrapper.find('p').text()).toContain('Success! Check Your Email!');
-  });
 });
diff --git a/frontend/__tests__/Signup.test.js b/frontend/__tests__/Signup.test.js
index 018f9b9..2a668a6 100644
--- a/frontend/__tests__/Signup.test.js
+++ b/frontend/__tests__/Signup.test.js
@@ -2,10 +2,11 @@ import React from 'react';
 import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
 import wait from 'waait';
-import Signup from '../components/Signup';
+import { ApolloConsumer } from 'react-apollo';
 import { MockedProvider } from 'react-apollo/test-utils';
-import { LocalStorageMock, fakeItem, fakeUser, fakeCartItem } from '../lib/testUtils';
-import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import Signup, { SIGNUP_MUTATION } from '../components/Signup';
+import { fakeUser } from '../lib/testUtils';
+import { CURRENT_USER_QUERY } from '../components/User';
 
 function type(wrapper, name, value) {
   wrapper.find(`input[name="${name}"]`).simulate('change', {
@@ -29,14 +30,10 @@ const mocks = [
     result: {
       data: {
         signup: {
-          __typename: 'AuthPayload',
-          token: 'tok123',
-          user: {
-            __typename: 'User',
-            id: 'abc123',
-            email: me.email,
-            name: me.name,
-          },
+          __typename: 'User',
+          id: 'abc123',
+          email: me.email,
+          name: me.name,
         },
       },
     },
@@ -56,11 +53,6 @@ const mocks = [
 ];
 
 describe('<Signup/>', () => {
-  beforeAll(() => {
-    // mock localStorage
-    global.localStorage = new LocalStorageMock();
-  });
-
   it('renders and matches snapshot', () => {
     const wrapper = mount(
       <MockedProvider>
@@ -71,9 +63,15 @@ describe('<Signup/>', () => {
   });
 
   it('calls mutation with correct data', async () => {
+    let apolloClient;
     const wrapper = mount(
       <MockedProvider mocks={mocks}>
-        <Signup />
+        <ApolloConsumer>
+          {client => {
+            apolloClient = client;
+            return <Signup />;
+          }}
+        </ApolloConsumer>
       </MockedProvider>
     );
 
@@ -87,7 +85,7 @@ describe('<Signup/>', () => {
     wrapper.update();
     wrapper.find('form').simulate('submit');
 
-    await wait(5);
-    expect(localStorage.getItem('token')).toBe('tok123');
+    const user = await apolloClient.query({ query: CURRENT_USER_QUERY });
+    expect(user.data.me).toMatchObject(me);
   });
 });
diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js
index e99facf..aeb8554 100644
--- a/frontend/__tests__/SingleItem.test.js
+++ b/frontend/__tests__/SingleItem.test.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { mount } from 'enzyme';
 import wait from 'waait';
 import toJSON from 'enzyme-to-json';
-import SingleItem from '../components/SingleItem';
-import { SINGLE_ITEM_QUERY } from '../queries/queries.graphql';
+import SingleItem, { SINGLE_ITEM_QUERY } from '../components/SingleItem';
 import { MockedProvider } from 'react-apollo/test-utils';
-import { fakeItem } from '../lib/testUtils';
+import { fakeItem, fakeUser } from '../lib/testUtils';
+import { CURRENT_USER_QUERY } from '../components/User';
 
 const data = {
   items: [fakeItem()],
@@ -16,9 +16,12 @@ describe('<SingleItem/>', () => {
     const mocks = [
       {
         request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } },
-        delay: 50,
         result: { data },
       },
+      {
+        request: { query: CURRENT_USER_QUERY },
+        result: { data: { me: fakeUser() } },
+      },
     ];
     const wrapper = mount(
       <MockedProvider mocks={mocks}>
@@ -32,9 +35,9 @@ describe('<SingleItem/>', () => {
     await wait(55);
     wrapper.update();
     // Grab the piece we want
-    const Item = wrapper.find('[data-test="SingleItem"]');
-    // snapshot it!
-    expect(toJSON(Item)).toMatchSnapshot();
+    expect(toJSON(wrapper.find('h2'))).toMatchSnapshot();
+    expect(toJSON(wrapper.find('img'))).toMatchSnapshot();
+    expect(toJSON(wrapper.find('p'))).toMatchSnapshot();
   });
 
   it('Errors with a not found Item', async () => {
diff --git a/frontend/__tests__/TakeMyMoney.test.js b/frontend/__tests__/TakeMyMoney.test.js
index f2d0ca7..1c41410 100644
--- a/frontend/__tests__/TakeMyMoney.test.js
+++ b/frontend/__tests__/TakeMyMoney.test.js
@@ -1,13 +1,12 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
 import NProgress from 'nprogress';
-import TakeMyMoney from '../components/TakeMyMoney';
 import Router from 'next/router';
 import wait from 'waait';
 import { MockedProvider } from 'react-apollo/test-utils';
-import { fakeItem, fakeUser, fakeCartItem } from '../lib/testUtils';
-import { CREATE_ITEM_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import TakeMyMoney from '../components/TakeMyMoney';
+import { fakeUser, fakeCartItem } from '../lib/testUtils';
+import { CURRENT_USER_QUERY } from '../components/User';
 
 Router.router = { push() {} };
 
@@ -40,9 +39,7 @@ describe('<TakeMyMoney />', () => {
   });
 
   it('creates an order onToken', async () => {
-    const createOrderSpy = jest
-      .fn()
-      .mockResolvedValue({ data: { CREATE_ORDER_MUTATION: { id: 'xyz789' } } });
+    const createOrderSpy = jest.fn().mockResolvedValue({ data: { createOrder: { id: 'xyz789' } } });
 
     const wrapper = mount(
       <MockedProvider mocks={mocks}>
@@ -66,9 +63,7 @@ describe('<TakeMyMoney />', () => {
     wrapper.update();
     NProgress.start = jest.fn();
 
-    const createOrderSpy = jest
-      .fn()
-      .mockResolvedValue({ data: { CREATE_ORDER_MUTATION: { id: 'xyz789' } } });
+    const createOrderSpy = jest.fn().mockResolvedValue({ data: { createOrder: { id: 'xyz789' } } });
     const component = wrapper.find('TakeMyMoney');
     component.instance().onToken({ id: 'abc123' }, createOrderSpy);
     wrapper.find('button').simulate('click');
@@ -87,9 +82,7 @@ describe('<TakeMyMoney />', () => {
 
     // Spy on Router Push
     Router.router.push = jest.fn();
-    const createOrderSpy = jest
-      .fn()
-      .mockResolvedValue({ data: { CREATE_ORDER_MUTATION: { id: 'xyz789' } } });
+    const createOrderSpy = jest.fn().mockResolvedValue({ data: { createOrder: { id: 'xyz789' } } });
 
     const component = wrapper.find('TakeMyMoney');
     component.instance().onToken({ id: 'abc123' }, createOrderSpy);
diff --git a/frontend/__tests__/__snapshots__/Signup.test.js.snap b/frontend/__tests__/__snapshots__/Signup.test.js.snap
index 536c1d8..b3c057e 100644
--- a/frontend/__tests__/__snapshots__/Signup.test.js.snap
+++ b/frontend/__tests__/__snapshots__/Signup.test.js.snap
@@ -3,6 +3,7 @@
 exports[`<Signup/> renders and matches snapshot 1`] = `
 <form
   className="sc-bdVaJa LHejR"
+  method="post"
   onSubmit={[Function]}
 >
   <fieldset
@@ -24,7 +25,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = `
         onChange={[Function]}
         placeholder="email"
         type="text"
-        value="wesbos@gmail.com"
+        value=""
       />
     </label>
     <label
@@ -36,7 +37,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = `
         onChange={[Function]}
         placeholder="name"
         type="text"
-        value="Wes Bos"
+        value=""
       />
     </label>
     <label
@@ -50,7 +51,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = `
         onChange={[Function]}
         placeholder="password"
         type="password"
-        value="wes"
+        value=""
       />
     </label>
     <button
diff --git a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
index 0969d73..28e9174 100644
--- a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
+++ b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
@@ -12,84 +12,21 @@ exports[`<SingleItem/> Errors with a not found Item 1`] = `
 `;
 
 exports[`<SingleItem/> Renders with Proper Data 1`] = `
-Array [
-  <styled.div
-    data-test="SingleItem"
-  >
-    <div
-      className="sc-bwzfXH dFvSZo"
-      data-test="SingleItem"
-    >
-      <img
-        alt="dogs are best"
-        src="dog.jpg"
-      />
-      <div
-        className="details"
-      >
-        <h2>
-          Viewing 
-          dogs are best
-        </h2>
-        <p>
-          dogs
-        </p>
-        <Link
-          href={
-            Object {
-              "pathname": "/update",
-              "query": Object {
-                "id": "123",
-              },
-            }
-          }
-        >
-          <a
-            href="/update?id=123"
-            onClick={[Function]}
-          >
-            Edit ✏️
-          </a>
-        </Link>
-      </div>
-    </div>
-  </styled.div>,
-  <div
-    className="sc-bwzfXH dFvSZo"
-    data-test="SingleItem"
-  >
-    <img
-      alt="dogs are best"
-      src="dog.jpg"
-    />
-    <div
-      className="details"
-    >
-      <h2>
-        Viewing 
-        dogs are best
-      </h2>
-      <p>
-        dogs
-      </p>
-      <Link
-        href={
-          Object {
-            "pathname": "/update",
-            "query": Object {
-              "id": "123",
-            },
-          }
-        }
-      >
-        <a
-          href="/update?id=123"
-          onClick={[Function]}
-        >
-          Edit ✏️
-        </a>
-      </Link>
-    </div>
-  </div>,
-]
+<h2>
+  Viewing 
+  dogs are best
+</h2>
+`;
+
+exports[`<SingleItem/> Renders with Proper Data 2`] = `
+<img
+  alt="dogs are best"
+  src="dog.jpg"
+/>
+`;
+
+exports[`<SingleItem/> Renders with Proper Data 3`] = `
+<p>
+  dogs
+</p>
 `;
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index 7cb0856..03242a4 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -1,10 +1,24 @@
 import { Component } from 'react';
 import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import {
-  ADD_TO_CART_MUTATION,
-  CURRENT_USER_QUERY,
-} from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import User, { CURRENT_USER_QUERY } from './User';
+
+const ADD_TO_CART_MUTATION = gql`
+  mutation addToCart($id: ID!) {
+    addToCart(id: $id) {
+      id
+      quantity
+      item {
+        id
+        price
+        description
+        image
+        title
+      }
+    }
+  }
+`;
 
 class AddToCart extends Component {
   static propTypes = {
@@ -15,9 +29,7 @@ class AddToCart extends Component {
     const newCartItem = payload.data.addToCart;
     const data = cache.readQuery({ query: CURRENT_USER_QUERY });
 
-    const existingIndex = data.me.cart.findIndex(
-      cartItem => cartItem.id === newCartItem.id,
-    );
+    const existingIndex = data.me.cart.findIndex(cartItem => cartItem.id === newCartItem.id);
     if (existingIndex >= 0) {
       // already in cache, just replace it
       data.me.cart = [
@@ -34,19 +46,23 @@ class AddToCart extends Component {
   render() {
     const { id } = this.props;
     return (
-      <Mutation
-        mutation={ADD_TO_CART_MUTATION}
-        variables={{ id }}
-        update={this.update}
-      >
-        {(addToCart, { loading }) => (
-          <button disabled={loading} onClick={addToCart}>
-            🛒 Add{loading && 'ing'} To Cart
-          </button>
-        )}
-      </Mutation>
+      <User>
+        {({ data: { me }, loading }) => {
+          if (!me || loading) return null;
+          return (
+            <Mutation mutation={ADD_TO_CART_MUTATION} variables={{ id }} update={this.update}>
+              {(addToCart, { loading }) => (
+                <button disabled={loading} onClick={addToCart}>
+                  🛒 Add{loading && 'ing'} To Cart
+                </button>
+              )}
+            </Mutation>
+          );
+        }}
+      </User>
     );
   }
 }
 
 export default AddToCart;
+export { ADD_TO_CART_MUTATION };
diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index a815b78..7e8a9c5 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -1,14 +1,11 @@
 import React from 'react';
 import { Mutation, Query } from 'react-apollo';
 import { adopt } from 'react-adopt';
+import gql from 'graphql-tag';
 import TakeMyMoney from './TakeMyMoney';
 import formatMoney from '../lib/formatMoney';
 import CartItem from './CartItem';
-import {
-  CURRENT_USER_QUERY,
-  LOCAL_STATE_QUERY,
-  TOGGLE_CART_MUTATION,
-} from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from './User';
 import calcTotalPrice from '../lib/calcTotalPrice';
 import Error from './ErrorMessage';
 import CartStyles from './styles/CartStyles';
@@ -16,46 +13,51 @@ import Supreme from './styles/Supreme';
 import CloseButton from './styles/CloseButton';
 import SickButton from './styles/SickButton';
 
+const LOCAL_STATE_QUERY = gql`
+  query {
+    cartOpen @client
+  }
+`;
+
+const TOGGLE_CART_MUTATION = gql`
+  mutation {
+    toggleCart @client
+  }
+`;
+
 const Composed = adopt({
   toggleCart: ({ render }) => (
     <Mutation mutation={TOGGLE_CART_MUTATION}>
       {(mutate, result) => render({ mutate, result })}
     </Mutation>
   ),
-  localState: <Query query={LOCAL_STATE_QUERY} />,
-  currentUser: <Query query={CURRENT_USER_QUERY} data-test="cart" />,
+  localState: ({ render }) => <Query query={LOCAL_STATE_QUERY} children={render} />,
+  currentUser: ({ render }) => (
+    <Query children={render} query={CURRENT_USER_QUERY} data-test="cart" />
+  ),
 });
 
 const Cart = () => (
   <Composed>
     {({ toggleCart, localState, currentUser }) => {
-      const {
-        data: { me },
-        error,
-        loading,
-      } = currentUser;
+      const { data: { me }, error, loading } = currentUser;
       if (loading) return <p>Loading...</p>;
       if (error) return <Error error={error} />;
       if (!me) return null;
       return (
         <CartStyles open={localState.data.cartOpen}>
           <header>
-            <CloseButton title="close" onClick={toggleCart}>
+            <CloseButton title="close" onClick={toggleCart.mutate}>
               &times;
             </CloseButton>
 
             <Supreme>{me.name}'s Cart.</Supreme>
             <p>
-              You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in
-              your cart.
+              You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in your cart.
             </p>
           </header>
 
-          <ul>
-            {me.cart.map(cartItem => (
-              <CartItem key={cartItem.id} cartItem={cartItem} />
-            ))}
-          </ul>
+          <ul>{me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}</ul>
           <footer>
             <p>{formatMoney(calcTotalPrice(me.cart))}</p>
             <TakeMyMoney>
@@ -69,3 +71,4 @@ const Cart = () => (
 );
 
 export default Cart;
+export { LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION };
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 06e2da3..fc3dcb2 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -1,11 +1,31 @@
 import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
 import Router from 'next/router';
-import { CREATE_ITEM_MUTATION } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
 import formatMoney from '../lib/formatMoney';
 
+const CREATE_ITEM_MUTATION = gql`
+  mutation CREATE_ITEM_MUTATION(
+    $description: String!
+    $title: String!
+    $price: Int!
+    $image: String
+    $largeImage: String
+  ) {
+    createItem(
+      description: $description
+      title: $title
+      price: $price
+      image: $image
+      largeImage: $largeImage
+    ) {
+      id
+    }
+  }
+`;
+
 class CreateItem extends Component {
   state = {
     title: '',
@@ -116,3 +136,4 @@ class CreateItem extends Component {
 }
 
 export default CreateItem;
+export { CREATE_ITEM_MUTATION };
diff --git a/frontend/components/DeleteItem.js b/frontend/components/DeleteItem.js
index 53fc04d..9b09378 100644
--- a/frontend/components/DeleteItem.js
+++ b/frontend/components/DeleteItem.js
@@ -1,10 +1,18 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import {
-  REMOVE_ITEM_MUTATION,
-  ALL_ITEMS_QUERY,
-} from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import { ALL_ITEMS_QUERY } from './Items';
+
+const DELETE_ITEM_MUTATION = gql`
+  mutation deleteItem($id: ID!) {
+    deleteItem(id: $id) {
+      id
+      title
+      description
+    }
+  }
+`;
 
 class DeleteItem extends React.Component {
   static propTypes = {
@@ -23,7 +31,7 @@ class DeleteItem extends React.Component {
   render() {
     return (
       <Mutation
-        mutation={REMOVE_ITEM_MUTATION}
+        mutation={DELETE_ITEM_MUTATION}
         variables={{ id: this.props.id }}
         update={this.update}
       >
@@ -44,3 +52,4 @@ class DeleteItem extends React.Component {
 }
 
 export default DeleteItem;
+export { DELETE_ITEM_MUTATION };
diff --git a/frontend/components/EditUser.js b/frontend/components/EditUser.js
index ce56e11..1bb8e5b 100644
--- a/frontend/components/EditUser.js
+++ b/frontend/components/EditUser.js
@@ -1,8 +1,18 @@
 import React from 'react';
 import { Query, Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
 import Form from './styles/Form';
-import { CURRENT_USER_QUERY, UPDATE_USER_MUTATION } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from './User';
 import Error from './ErrorMessage';
+import User from './User';
+
+const UPDATE_USER_MUTATION = gql`
+  mutation updateUser($name: String!) {
+    updateUser(name: $name) {
+      name
+    }
+  }
+`;
 
 class EditUser extends React.Component {
   state = {
@@ -28,7 +38,7 @@ class EditUser extends React.Component {
 
   render() {
     return (
-      <Query query={CURRENT_USER_QUERY}>
+      <User>
         {({ data: { me }, loading }) => {
           if (loading) return <p>Loading...</p>;
           return (
@@ -62,9 +72,10 @@ class EditUser extends React.Component {
             </Mutation>
           );
         }}
-      </Query>
+      </User>
     );
   }
 }
 
 export default EditUser;
+export { UPDATE_USER_MUTATION };
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index 618cc84..394f16d 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -2,11 +2,25 @@ import React from 'react';
 import { Query } from 'react-apollo';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
 import Pagination from './Pagination';
 import Item from './Item';
 import LoadingItem from './LoadingItem';
 import { perPage } from '../config';
-import { ALL_ITEMS_QUERY } from '../queries/queries.graphql';
+
+const ALL_ITEMS_QUERY = gql`
+  query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = 4) {
+    items(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+      __typename
+      id
+      title
+      price
+      description
+      image
+      largeImage
+    }
+  }
+`;
 
 const Items = styled.div`
   display: grid;
@@ -57,3 +71,4 @@ class ItemList extends React.Component {
 }
 
 export default ItemList;
+export { ALL_ITEMS_QUERY };
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index 4bbce2d..826335f 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -1,21 +1,17 @@
 import React, { Fragment } from 'react';
 import Link from 'next/link';
 import { Query, ApolloConsumer } from 'react-apollo';
-import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import User from './User';
 import CartCount from './CartCount';
 import Signout from './Signout';
-import Dump from './Dump';
 import NavStyles from './styles/NavStyles';
 
 class Nav extends React.Component {
   render() {
     // below we set the fetchPolicy to network only so it forces re-fetch on the server
     return (
-      <Query
-        query={CURRENT_USER_QUERY}
-        fetchPolicy={process.browser ? 'cache-first' : 'network-only'}
-      >
-        {({ data: { me }, loading, error }) => (
+      <User>
+        {({ data: { me }, error }) => (
           <NavStyles data-test="nav">
             <Link href="/items">
               <a>Shop</a>
@@ -54,7 +50,7 @@ class Nav extends React.Component {
             )}
           </NavStyles>
         )}
-      </Query>
+      </User>
     );
   }
 }
diff --git a/frontend/components/Order.js b/frontend/components/Order.js
index a224c1b..6411abe 100644
--- a/frontend/components/Order.js
+++ b/frontend/components/Order.js
@@ -3,11 +3,30 @@ import { Query } from 'react-apollo';
 import { format } from 'date-fns';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
-import { SINGLE_ORDER_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import formatMoney from '../lib/formatMoney';
 import Error from './ErrorMessage';
 import OrderStyles from './styles/OrderStyles';
 
+const SINGLE_ORDER_QUERY = gql`
+  query SINGLE_ORDER_QUERY($id: ID!) {
+    order(id: $id) {
+      id
+      charge
+      total
+      createdAt
+      items {
+        id
+        title
+        price
+        description
+        image
+        quantity
+      }
+    }
+  }
+`;
+
 class Order extends Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -73,3 +92,4 @@ class Order extends Component {
 }
 
 export default Order;
+export { SINGLE_ORDER_QUERY };
diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js
index eef69ca..5886ad7 100644
--- a/frontend/components/OrderList.js
+++ b/frontend/components/OrderList.js
@@ -3,10 +3,29 @@ import { Query } from 'react-apollo';
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import styled from 'styled-components';
-import { USER_ORDERS_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import formatMoney from '../lib/formatMoney';
 import OrderItemStyles from './styles/OrderItemStyles';
 
+const USER_ORDERS_QUERY = gql`
+  query orders {
+    orders(orderBy: createdAt_DESC) {
+      id
+      total
+      createdAt
+      updatedAt
+      items {
+        id
+        title
+        price
+        description
+        quantity
+        image
+      }
+    }
+  }
+`;
+
 const OrderUl = styled.ul`
   display: grid;
   grid-gap: 4rem;
@@ -71,3 +90,4 @@ class OrderList extends React.Component {
 }
 
 export default OrderList;
+export { USER_ORDERS_QUERY };
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index 380026d..8b25e06 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -3,8 +3,18 @@ import { Query } from 'react-apollo';
 import styled from 'styled-components';
 import Link from 'next/link';
 import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
 import { perPage } from '../config';
-import { ALL_ITEMS_QUERY } from '../queries/queries.graphql';
+
+const PAGINATION_QUERY = gql`
+  query itemsConnection($skip: Int = 0, $first: Int = 4) {
+    itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
 
 const PaginationStyles = styled.div`
   text-align: center;
@@ -31,7 +41,7 @@ const PaginationStyles = styled.div`
 `;
 
 const Pagination = props => (
-  <Query query={ALL_ITEMS_QUERY}>
+  <Query query={PAGINATION_QUERY}>
     {({ data, loading, error }) => {
       if (loading || error) return null;
       const { aggregate } = data.itemsConnection;
@@ -78,3 +88,4 @@ Pagination.propTypes = {
 };
 
 export default Pagination;
+export { PAGINATION_QUERY };
diff --git a/frontend/components/Permissions.js b/frontend/components/Permissions.js
index 1807366..52a6acf 100644
--- a/frontend/components/Permissions.js
+++ b/frontend/components/Permissions.js
@@ -1,11 +1,33 @@
 import React from 'react';
 import { Query, Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import Error from './ErrorMessage';
 import SickButton from './styles/SickButton';
 import Table from './styles/Table';
 
+const ALL_USERS_QUERY = gql`
+  query {
+    users {
+      id
+      name
+      email
+      permissions
+    }
+  }
+`;
+
+const UPDATE_PERMISSIONS_MUTATION = gql`
+  mutation updatePermissions($permissions: [Permission], $userId: ID!) {
+    updatePermissions(permissions: $permissions, userId: $userId) {
+      id
+      permissions
+      name
+      email
+    }
+  }
+`;
+
 const possiblePermissions = [
   'ADMIN',
   'USER',
@@ -108,3 +130,4 @@ const Permissions = () => (
 );
 
 export default Permissions;
+export { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION };
diff --git a/frontend/components/PleaseSignIn.js b/frontend/components/PleaseSignIn.js
index 7e5e726..5646749 100644
--- a/frontend/components/PleaseSignIn.js
+++ b/frontend/components/PleaseSignIn.js
@@ -1,6 +1,6 @@
 import { Query } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from './User';
 import Signin from './Signin';
 
 const PleaseSignIn = props => (
diff --git a/frontend/components/RemoveFromCart.js b/frontend/components/RemoveFromCart.js
index 7ec2313..cf5b6fd 100644
--- a/frontend/components/RemoveFromCart.js
+++ b/frontend/components/RemoveFromCart.js
@@ -2,10 +2,16 @@ import { Component } from 'react';
 import { Mutation } from 'react-apollo';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import {
-  REMOVE_FROM_CART_MUTATION,
-  CURRENT_USER_QUERY,
-} from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
+
+const REMOVE_FROM_CART_MUTATION = gql`
+  mutation removeFromCart($id: ID!) {
+    removeFromCart(id: $id) {
+      id
+    }
+  }
+`;
 
 const BigButton = styled.button`
   font-size: 3rem;
@@ -38,11 +44,7 @@ class RemoveFromCart extends Component {
         update={this.update}
       >
         {(removeFromCart, { loading }) => (
-          <BigButton
-            disabled={loading}
-            title="Remove From Cart"
-            onClick={removeFromCart}
-          >
+          <BigButton disabled={loading} title="Remove From Cart" onClick={removeFromCart}>
             ×
           </BigButton>
         )}
@@ -52,3 +54,4 @@ class RemoveFromCart extends Component {
 }
 
 export default RemoveFromCart;
+export { REMOVE_FROM_CART_MUTATION };
diff --git a/frontend/components/Reset.js b/frontend/components/Reset.js
index c4d791c..bb2ece0 100644
--- a/frontend/components/Reset.js
+++ b/frontend/components/Reset.js
@@ -1,9 +1,20 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
-import { RESET_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from './User';
+
+const RESET_MUTATION = gql`
+  mutation RESET_MUTATION($resetToken: String!, $password: String!, $confirmPassword: String!) {
+    resetPassword(resetToken: $resetToken, password: $password, confirmPassword: $confirmPassword) {
+      id
+      email
+      name
+    }
+  }
+`;
 
 class Reset extends React.Component {
   static propTypes = {
@@ -71,3 +82,4 @@ class Reset extends React.Component {
 }
 
 export default Reset;
+export { RESET_MUTATION };
diff --git a/frontend/components/ResetRequest.js b/frontend/components/ResetRequest.js
index 1762aa3..6aedcc1 100644
--- a/frontend/components/ResetRequest.js
+++ b/frontend/components/ResetRequest.js
@@ -1,9 +1,17 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
-import { REQUEST_RESET_MUTATION } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
 
+const REQUEST_RESET_MUTATION = gql`
+  mutation requestReset($email: String!) {
+    requestReset(email: $email) {
+      id
+    }
+  }
+`;
+
 class ResetRequest extends React.Component {
   state = {
     email: '',
@@ -44,3 +52,4 @@ class ResetRequest extends React.Component {
 }
 
 export default ResetRequest;
+export { REQUEST_RESET_MUTATION };
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index 9f43d36..a972db2 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -2,10 +2,19 @@ import React from 'react';
 import Downshift from 'downshift';
 import Router from 'next/router';
 import { ApolloConsumer } from 'react-apollo';
+import gql from 'graphql-tag';
 import styled, { keyframes } from 'styled-components';
 import debounce from 'lodash.debounce';
-import { SEARCH_ITEMS_QUERY } from '../queries/queries.graphql';
 
+const SEARCH_ITEMS_QUERY = gql`
+  query SEARCH_ITEMS_QUERY($searchTerm: String!) {
+    items(where: { OR: [{ title_contains: $searchTerm }, { description_contains: $searchTerm }] }) {
+      id
+      image
+      title
+    }
+  }
+`;
 function routeToItem(item) {
   Router.push({
     pathname: '/item',
@@ -131,3 +140,4 @@ class AutoComplete extends React.Component {
 }
 
 export default AutoComplete;
+export { SEARCH_ITEMS_QUERY };
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 23a5835..53cdb76 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -1,14 +1,26 @@
 import React, { Component } from 'react';
-import { Mutation, ApolloConsumer } from 'react-apollo';
-import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
 
+const SIGNIN_MUTATION = gql`
+  mutation SIGNIN_MUTATION($email: String!, $password: String!) {
+    signin(email: $email, password: $password) {
+      id
+      email
+      name
+    }
+  }
+`;
+
 class Signin extends Component {
   state = {
-    email: `wesbos@gmail.com`,
-    password: 'abc123',
+    email: '',
+    password: '',
   };
+
   saveToState = e => {
     const { name, value } = e.target;
     this.setState({ [name]: value });
@@ -64,3 +76,4 @@ class Signin extends Component {
 }
 
 export default Signin;
+export { SIGNIN_MUTATION };
diff --git a/frontend/components/Signout.js b/frontend/components/Signout.js
index fbd7fd9..ae87631 100644
--- a/frontend/components/Signout.js
+++ b/frontend/components/Signout.js
@@ -1,6 +1,15 @@
 import React, { Component } from 'react';
-import { Query, Mutation } from 'react-apollo';
-import { CURRENT_USER_QUERY, SIGN_OUT_MUTATION } from '../queries/queries.graphql';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
+
+const SIGN_OUT_MUTATION = gql`
+  mutation SIGN_OUT_MUTATION {
+    signout {
+      message
+    }
+  }
+`;
 
 class Signout extends Component {
   render() {
@@ -13,3 +22,4 @@ class Signout extends Component {
 }
 
 export default Signout;
+export { SIGN_OUT_MUTATION };
diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index 624bc10..9164e67 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -1,14 +1,25 @@
 import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
-import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
 
+const SIGNUP_MUTATION = gql`
+  mutation SIGNUP_MUTATION($email: String!, $name: String!, $password: String!) {
+    signup(email: $email, name: $name, password: $password) {
+      id
+      email
+      name
+    }
+  }
+`;
+
 class Signup extends Component {
   state = {
-    email: `wesbos@gmail.com`,
-    name: 'Wes Bos',
-    password: 'wes',
+    email: '',
+    name: '',
+    password: '',
   };
 
   saveToState = e => {
@@ -79,3 +90,4 @@ class Signup extends Component {
 }
 
 export default Signup;
+export { SIGNUP_MUTATION };
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index f71e0fe..d543ad1 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -2,10 +2,22 @@ import { Query } from 'react-apollo';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Link from 'next/link';
-import { SINGLE_ITEM_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import Error from './ErrorMessage';
 import AddToCart from './AddToCart';
 
+const SINGLE_ITEM_QUERY = gql`
+  query SINGLE_ITEM_QUERY($id: ID!) {
+    items(where: { id: $id }) {
+      id
+      title
+      description
+      largeImage
+      image
+    }
+  }
+`;
+
 const SingleItemStyles = styled.div`
   max-width: 1200px;
   margin: 2rem auto;
@@ -58,3 +70,4 @@ SingleItem.propTypes = {
 };
 
 export default SingleItem;
+export { SINGLE_ITEM_QUERY };
diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js
index 5823d00..b9e42ea 100644
--- a/frontend/components/TakeMyMoney.js
+++ b/frontend/components/TakeMyMoney.js
@@ -4,9 +4,24 @@ import { Mutation, Query } from 'react-apollo';
 import Router from 'next/router';
 import NProgress from 'nprogress';
 import PropTypes from 'prop-types';
-import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import calcTotalPrice from '../lib/calcTotalPrice';
 import Error from './ErrorMessage';
+import User, { CURRENT_USER_QUERY } from './User';
+
+const CREATE_ORDER_MUTATION = gql`
+  mutation createOrder($token: String!) {
+    createOrder(token: $token) {
+      id
+      charge
+      total
+      items {
+        id
+        title
+      }
+    }
+  }
+`;
 
 function totalItems(cart) {
   return cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0);
@@ -30,7 +45,7 @@ class TakeMyMoney extends Component {
   };
   render() {
     return (
-      <Query query={CURRENT_USER_QUERY}>
+      <User>
         {({ data: { me }, error }) => {
           if (!me || !me.cart.length) return null;
           if (error) return <Error error={error} />;
@@ -56,7 +71,7 @@ class TakeMyMoney extends Component {
             </Mutation>
           );
         }}
-      </Query>
+      </User>
     );
   }
 }
diff --git a/frontend/components/UpdateItem.js b/frontend/components/UpdateItem.js
index ecaac75..08ba254 100644
--- a/frontend/components/UpdateItem.js
+++ b/frontend/components/UpdateItem.js
@@ -1,10 +1,19 @@
 import React, { Component } from 'react';
 import { Query, Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { SINGLE_ITEM_QUERY, UPDATE_ITEM_MUTATION } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import { SINGLE_ITEM_QUERY } from './SingleItem';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
 
+const UPDATE_ITEM_MUTATION = gql`
+  mutation updateItem($id: ID!, $title: String, $description: String, $price: Int) {
+    updateItem(id: $id, description: $description, title: $title, price: $price) {
+      id
+    }
+  }
+`;
+
 class UpdateItem extends Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -18,7 +27,6 @@ class UpdateItem extends Component {
     if (type === 'number') {
       value = parseInt(value);
     }
-    console.log('Saving to state');
     const item = { ...this.state.item };
     item[name] = value;
     this.setState({ item });
@@ -94,3 +102,4 @@ class UpdateItem extends Component {
 }
 
 export default UpdateItem;
+export { UPDATE_ITEM_MUTATION };
diff --git a/frontend/components/User.js b/frontend/components/User.js
new file mode 100644
index 0000000..19c568d
--- /dev/null
+++ b/frontend/components/User.js
@@ -0,0 +1,45 @@
+import { Query } from 'react-apollo';
+import gql from 'graphql-tag';
+import PropTypes from 'prop-types';
+
+const CURRENT_USER_QUERY = gql`
+  query {
+    me {
+      id
+      email
+      name
+      permissions
+      orders {
+        id
+        charge
+        total
+      }
+      cart {
+        id
+        quantity
+        item {
+          __typename
+          id
+          title
+          price
+          description
+          image
+          largeImage
+        }
+      }
+    }
+  }
+`;
+
+const User = props => (
+  <Query {...props} query={CURRENT_USER_QUERY}>
+    {result => props.children(result)}
+  </Query>
+);
+
+User.propTypes = {
+  children: PropTypes.func.isRequired,
+};
+
+export default User;
+export { CURRENT_USER_QUERY };
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1d4448d..d055fb6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1795,13 +1795,13 @@
       }
     },
     "babel-jest": {
-      "version": "22.4.4",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-22.4.4.tgz",
-      "integrity": "sha512-A9NB6/lZhYyypR9ATryOSDcqBaqNdzq4U+CN+/wcMsLcmKkPxQEoTKLajGfd3IkxNyVBT8NewUK2nWyGbSzHEQ==",
+      "version": "23.0.0",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-23.0.0.tgz",
+      "integrity": "sha1-Djg6KqazU14ZfbKSlXCiGCvQhOg=",
       "dev": true,
       "requires": {
-        "babel-plugin-istanbul": "^4.1.5",
-        "babel-preset-jest": "^22.4.4"
+        "babel-plugin-istanbul": "^4.1.6",
+        "babel-preset-jest": "^23.0.0"
       }
     },
     "babel-loader": {
@@ -1836,9 +1836,9 @@
       }
     },
     "babel-plugin-jest-hoist": {
-      "version": "22.4.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.4.tgz",
-      "integrity": "sha512-DUvGfYaAIlkdnygVIEl0O4Av69NtuQWcrjMOv6DODPuhuGLDnbsARz3AwiiI/EkIMMlxQDUcrZ9yoyJvTNjcVQ==",
+      "version": "23.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.0.0.tgz",
+      "integrity": "sha1-5h5oeZ90M5Gh5jBu4nBHeqz5Rsg=",
       "dev": true
     },
     "babel-plugin-module-resolver": {
@@ -1886,12 +1886,12 @@
       "integrity": "sha1-Mxz8BQmagII4MR14MZwnRg1IEYk="
     },
     "babel-preset-jest": {
-      "version": "22.4.4",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-22.4.4.tgz",
-      "integrity": "sha512-+dxMtOFwnSYWfum0NaEc0O03oSdwBsjx4tMSChRDPGwu/4wSY6Q6ANW3wkjKpJzzguaovRs/DODcT4hbSN8yiA==",
+      "version": "23.0.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-23.0.0.tgz",
+      "integrity": "sha1-Sd4DA/G2h13K1hY+qn64Mw1Ugk0=",
       "dev": true,
       "requires": {
-        "babel-plugin-jest-hoist": "^22.4.4",
+        "babel-plugin-jest-hoist": "^23.0.0",
         "babel-plugin-syntax-object-rest-spread": "^6.13.0"
       }
     },
@@ -5672,6 +5672,32 @@
             "source-map": "^0.5.7"
           }
         },
+        "babel-jest": {
+          "version": "22.4.4",
+          "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-22.4.4.tgz",
+          "integrity": "sha512-A9NB6/lZhYyypR9ATryOSDcqBaqNdzq4U+CN+/wcMsLcmKkPxQEoTKLajGfd3IkxNyVBT8NewUK2nWyGbSzHEQ==",
+          "dev": true,
+          "requires": {
+            "babel-plugin-istanbul": "^4.1.5",
+            "babel-preset-jest": "^22.4.4"
+          }
+        },
+        "babel-plugin-jest-hoist": {
+          "version": "22.4.4",
+          "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.4.tgz",
+          "integrity": "sha512-DUvGfYaAIlkdnygVIEl0O4Av69NtuQWcrjMOv6DODPuhuGLDnbsARz3AwiiI/EkIMMlxQDUcrZ9yoyJvTNjcVQ==",
+          "dev": true
+        },
+        "babel-preset-jest": {
+          "version": "22.4.4",
+          "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-22.4.4.tgz",
+          "integrity": "sha512-+dxMtOFwnSYWfum0NaEc0O03oSdwBsjx4tMSChRDPGwu/4wSY6Q6ANW3wkjKpJzzguaovRs/DODcT4hbSN8yiA==",
+          "dev": true,
+          "requires": {
+            "babel-plugin-jest-hoist": "^22.4.4",
+            "babel-plugin-syntax-object-rest-spread": "^6.13.0"
+          }
+        },
         "babylon": {
           "version": "6.18.0",
           "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 34a246d..bd01c42 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "apollo-boost": "^0.1.6",
     "apollo-client": "^2.3.1",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-plugin-styled-components": "^1.5.1",
     "date-fns": "^2.0.0-alpha.7",
     "downshift": "^1.31.14",
@@ -35,6 +36,7 @@
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
+    "babel-jest": "^23.0.0",
     "babel-plugin-module-resolver": "^3.1.1",
     "casual": "^1.5.19",
     "enzyme": "^3.3.0",
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 65cc378..4e9af74 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -1,7 +1,6 @@
 import App, { Container } from 'next/app';
 import { ApolloProvider } from 'react-apollo';
 import withData from '../lib/withData';
-import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
 import Page from '../components/Page';
 
 // Next.js wraps each Page in an <App></App> component. This is handy for when you want to persist anything from page to page, or just access a component that is 1 level higher than each page.
diff --git a/frontend/queries/queries.graphql b/frontend/queries/queries.graphql
deleted file mode 100644
index ababde3..0000000
--- a/frontend/queries/queries.graphql
+++ /dev/null
@@ -1,233 +0,0 @@
-fragment itemDetails on Item {
-  __typename
-  id
-  title
-  price
-  description
-  image
-  largeImage
-}
-
-mutation CREATE_ITEM_MUTATION($description: String!, $title: String!, $price: Int!, $image: String, $largeImage: String) {
-  createItem(description: $description, title: $title, price: $price, image: $image, largeImage: $largeImage) {
-    ...itemDetails
-  }
-}
-
-mutation SIGNUP_MUTATION($email: String!, $name: String!, $password: String!) {
-  signup(email: $email, name: $name, password: $password) {
-    id
-    email
-    name
-  }
-}
-
-mutation SIGNIN_MUTATION($email: String!, $password: String!) {
-  signin(email: $email, password: $password) {
-    id
-    email
-    name
-  }
-}
-
-mutation SIGN_OUT_MUTATION {
-  signout {
-    message
-  }
-}
-
-mutation REQUEST_RESET_MUTATION($email: String!) {
-  requestReset(email: $email) {
-    id
-  }
-}
-
-mutation RESET_MUTATION($resetToken: String!, $password: String!, $confirmPassword: String!) {
-  resetPassword(resetToken: $resetToken, password: $password, confirmPassword: $confirmPassword) {
-    id
-    email
-    name
-  }
-}
-
-mutation CREATE_ORDER_MUTATION($token: String!) {
-  createOrder(token: $token) {
-    id
-    charge
-    total
-    items {
-      id
-      title
-    }
-  }
-}
-
-query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = 4) {
-  itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) {
-    aggregate {
-      count
-    }
-  }
-  items(orderBy: createdAt_DESC, first: $first, skip: $skip) {
-    ...itemDetails
-  }
-}
-
-query SINGLE_ITEM_QUERY($id: ID!) {
-  items(where: { id: $id }) {
-    user {
-      id
-      email
-      name
-    }
-    ...itemDetails
-  }
-}
-
-query SINGLE_ORDER_QUERY($id: ID!) {
-  order(id: $id) {
-    id
-    charge
-    total
-    createdAt
-    user {
-      id
-    }
-    items {
-      id
-      title
-      price
-      description
-      image
-      quantity
-    }
-  }
-}
-
-query SEARCH_ITEMS_QUERY($searchTerm: String!) {
-  items(
-    where: {
-      OR: [
-        { title_contains: $searchTerm }
-        { description_contains: $searchTerm }
-      ]
-    }
-  ) {
-    ...itemDetails
-  }
-}
-
-mutation REMOVE_ITEM_MUTATION($id: ID!) {
-  deleteItem(id: $id) {
-    id
-    title
-    description
-  }
-}
-
-mutation UPDATE_ITEM_MUTATION(
-  $id: ID!
-  $title: String
-  $description: String
-  $price: Int
-) {
-  updateItem(
-    id: $id
-    description: $description
-    title: $title
-    price: $price
-  ) {
-    ...itemDetails
-  }
-}
-
-mutation UPDATE_USER_MUTATION($name: String!) {
-  updateUser(name: $name) {
-    name
-  }
-}
-
-query CURRENT_USER_QUERY {
-  me {
-    id
-    email
-    name
-    permissions
-    orders {
-      id
-      charge
-      total
-    }
-    cart {
-      id
-      quantity
-      item {
-        ...itemDetails
-      }
-    }
-  }
-}
-
-query USER_ORDERS_QUERY {
-  orders(orderBy: createdAt_DESC) {
-    id
-    total
-    createdAt
-    updatedAt
-    items {
-      id
-      title
-      price
-      description
-      quantity
-      image
-    }
-  }
-}
-
-mutation ADD_TO_CART_MUTATION($id: ID!) {
-  addToCart(id: $id) {
-    id
-    quantity
-    item {
-      id
-      price
-      description
-      image
-      title
-    }
-  }
-}
-
-mutation REMOVE_FROM_CART_MUTATION($id: ID!) {
-  removeFromCart(id: $id) {
-    id
-  }
-}
-
-query ALL_USERS_QUERY {
-  users {
-    id
-    name
-    email
-    permissions
-  }
-}
-
-mutation UPDATE_PERMISSIONS_MUTATION($permissions: [Permission], $userId: ID!) {
-  updatePermissions(permissions: $permissions, userId: $userId) {
-    id
-    permissions
-    name
-    email
-  }
-}
-
-query LOCAL_STATE_QUERY {
-  cartOpen @client
-}
-
-mutation TOGGLE_CART_MUTATION {
-  toggleCart @client
-}
-