client side graphQL

api/src/db/db.json

@@ -3,5 +3,31 @@
     "id": "jBWMVGjm50l6LGwepDoty",
     "username": "frontendmaster"
   },
-  "pet": []
-}
+  "pet": [
+    {
+      "id": 1,
+      "type": "DOG",
+      "name": "Moose",
+      "createdAt": "123456"
+    },
+    {
+      "id": 2,
+      "type": "CAT",
+      "name": "D",
+      "createdAt": "345"
+    },
+    {
+      "id": 3,
+      "type": "DOG",
+      "name": "Karma",
+      "createdAt": "76543"
+    },
+    {
+      "id": "2jia06-vKhcT7rnQbVUhl",
+      "createdAt": 1627641848222,
+      "name": "batman",
+      "type": "DOG",
+      "user": "jBWMVGjm50l6LGwepDoty"
+    }
+  ]
+}

api/src/db/index.js

@@ -1,16 +1,16 @@
-const low = require('lowdb')
-const FileSync = require('lowdb/adapters/FileSync')
+const low = require("lowdb");
+const FileSync = require("lowdb/adapters/FileSync");
 
-const adapter = new FileSync('api/src/db/db.json')
-const db = low(adapter)
+const adapter = new FileSync("api/src/db/db.json");
+const db = low(adapter);
 
-const createPetModel = require('./pet')
-const createUserModel = require('./user')
+const createPetModel = require("./pet");
+const createUserModel = require("./user");
 
 module.exports = {
   models: {
     Pet: createPetModel(db),
     User: createUserModel(db),
   },
-  db
-}
+  db,
+};

client/src/client.js

@@ -1,8 +1,15 @@
-import { ApolloClient } from 'apollo-client'
-import { InMemoryCache } from 'apollo-cache-inmemory'
-import { HttpLink } from 'apollo-link-http'
-import gql from 'graphql-tag'
+import { ApolloClient } from "apollo-client";
+import { InMemoryCache } from "apollo-cache-inmemory";
+import { HttpLink } from "apollo-link-http";
+import gql from "graphql-tag";
 
 /**
  * Create a new apollo client and export as default
  */
+
+const link = new HttpLink({ uri: "http://localhost:4000/" });
+const cache = new InMemoryCache();
+
+const client = new ApolloClient({ link, cache });
+
+export default client;

client/src/index.js

@@ -1,18 +1,21 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { BrowserRouter } from 'react-router-dom'
-import { ApolloProvider } from '@apollo/react-hooks'
-import App from './components/App'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+import { ApolloProvider } from "@apollo/react-hooks";
+import client from "./client";
+import App from "./components/App";
+import "./index.css";
 
 const Root = () => (
   <BrowserRouter>
-    <App />
+    <ApolloProvider client={client}>
+      <App />
+    </ApolloProvider>
   </BrowserRouter>
-)
+);
 
-ReactDOM.render(<Root />, document.getElementById('app'))
+ReactDOM.render(<Root />, document.getElementById("app"));
 
 if (module.hot) {
-  module.hot.accept()
+  module.hot.accept();
 }

client/src/pages/Pets.js

@@ -1,21 +1,39 @@
-import React, {useState} from 'react'
-import gql from 'graphql-tag'
-import { useQuery, useMutation } from '@apollo/react-hooks'
-import PetsList from '../components/PetsList'
-import NewPetModal from '../components/NewPetModal'
-import Loader from '../components/Loader'
+import React, { useState } from "react";
+import gql from "graphql-tag";
+import { useQuery, useMutation } from "@apollo/react-hooks";
+import PetsList from "../components/PetsList";
+import NewPetModal from "../components/NewPetModal";
+import Loader from "../components/Loader";
 
+const ALL_PETS = gql`
+  query AllPets {
+    pets {
+      id
+      name
+      type
+      img
+    }
+  }
+`;
+
+export default function Pets() {
+  const [modal, setModal] = useState(false);
+  const { data, loading, error } = useQuery(ALL_PETS);
 
-export default function Pets () {
-  const [modal, setModal] = useState(false)
+  const onSubmit = (input) => {
+    setModal(false);
+  };
 
+  if (loading) {
+    return <Loader />;
+  }
 
-  const onSubmit = input => {
-    setModal(false)
+  if (error) {
+    return <p>error!</p>;
   }
-  
+
   if (modal) {
-    return <NewPetModal onSubmit={onSubmit} onCancel={() => setModal(false)} />
+    return <NewPetModal onSubmit={onSubmit} onCancel={() => setModal(false)} />;
   }
 
   return (
@@ -32,8 +50,8 @@ export default function Pets () {
         </div>
       </section>
       <section>
-        <PetsList />
+        <PetsList pets={data.pets} />
       </section>
     </div>
-  )
+  );
 }

package.json

@@ -22,7 +22,8 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-select": "^3.0.8",
-    "react-spinners": "^0.6.1"
+    "react-spinners": "^0.6.1",
+    "parcel": "1.12.3"
   },
   "scripts": {
     "server": "node api/src/server.js",
@@ -41,6 +42,7 @@
       "last 1 safari version"
     ]
   },
+
   "devDependencies": {
     "@playlyfe/gql": "^2.6.2",
     "babel-core": "^6.26.3",