impliment Apollo Client

Author: slhoehn

app/src/Dashboard/Form.jsx

@@ -6,6 +6,7 @@ const Form = (props) => {
   return (
   <div className = 'form'>
     <h2>{ props.description }</h2>
+    <button id={ props.id }>heart</button>
   </div>);
 };
 

app/src/Dashboard/FormsContainer.jsx

@@ -1,42 +1,67 @@
 import React, { useContext, useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
+import {
+  ApolloClient, InMemoryCache, gql, ApolloProvider, useQuery,
+} from '@apollo/client';
 import Form from './Form.jsx';
 
 
 const FormsContainer = () => {
-  const [tests, updateTests] = useState([]);
-
-  useEffect(() => {
-    console.log('inside useEffect');
-
-    fetch('http://localhost:5000/graphql', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json',
-      },
-      body: JSON.stringify({ query: '{readAllTests { description }}' }),
-    }) 
-      .then(res => res.json())
-      .then((resp) => { 
-        // console.log('resp: ', resp);
-        const myTests = resp.data.readAllTests;
-        console.log('myTests: ', myTests);
-        updateTests(myTests);
-      })
-      .catch(err => console.log('error in readAllTests', err));
-  }, []);
-
-  const forms = tests.map((test, index) => <Form key={index} description={test.description} />);
+  // const [tests, updateTests] = useState([]);
+  /* GET using fetch */
+  // useEffect(() => {
+  //   console.log('inside useEffect');
+
+  //   fetch('http://localhost:5000/graphql', {
+  //     method: 'POST',
+  //     headers: {
+  //       'Content-Type': 'application/json',
+  //       Accept: 'application/json',
+  //     },
+  //     body: JSON.stringify({ query: '{readAllTests { description }}' }),
+  //   })
+  //     .then(res => res.json())
+  //     .then((resp) => {
+  //       // console.log('resp: ', resp);
+  //       const myTests = resp.data.readAllTests;
+  //       console.log('myTests: ', myTests);
+  //       updateTests(myTests);
+  //     })
+  //     .catch(err => console.log('error in readAllTests', err));
+  // }, []);
+
+
+  /* RULES OF HOOKS: DO NOT use hooks within hooks or conditionals */
+  // useEffect(() => {
+  //   const GET_TESTS = gql`query {readAllTests { description }}`;
+  //   const { loading, error, data } = useQuery(GET_TESTS);
+  //   if (loading) console.log('Loading...');
+  //   if (error) console.log(`Error :${error}`);
+  //   const myTests = data.readAllTests;
+  //   console.log('myTests: ', myTests);
+  //   updateTests(myTests);
+  // }, []);
+
+
+  const GET_TESTS = gql`query {readAllTests { description id }}`;
+
+  const { loading, error, data } = useQuery(GET_TESTS);
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error :{error}</p>;
+
+  const myTests = data.readAllTests;
+  console.log('myTests: ', myTests);
+
+  const forms = myTests.map((test, index) => <Form key={index} id={test.id} description={test.description} />);
 
   return (
-    <div>
-      <Link to="/">
-        <button type="button">Go Back</button>
-      </Link>
-      {forms}
-    </div>
+      <div>
+        <Link to="/">
+          <button type="button">Go Back</button>
+        </Link>
+        {forms}
+      </div>
   );
 };
 

app/src/index.js

@@ -8,13 +8,12 @@ import SignUp from './components/login/SignUp.tsx';
 import FBPassWord from './components/login/FBPassWord.tsx';
 import Tutorial from './tutorial/Tutorial.tsx';
 import TutorialPage from './tutorial/TutorialPage.tsx';
-
 /*
 *  Dashboard
 */
 import Dashboard from './Dashboard/FormsContainer.jsx';
 import styles from './Dashboard/styles.css';
-
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 
 import {
   HashRouter as Router,
@@ -36,7 +35,14 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
   />
 );
 
+
+const client = new ApolloClient({
+  uri: 'http://localhost:5000/graphql',
+  cache: new InMemoryCache()
+});
+
 ReactDOM.render(
+  <ApolloProvider client={client}>
   <Router>
     <Switch>
       <Route exact path="/login" component={SignIn} />
@@ -47,6 +53,7 @@ ReactDOM.render(
       <Route exact path="/tutorial" component={Tutorial} />
       <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
     </Switch>
-  </Router>,
+  </Router>
+  </ ApolloProvider>,
   document.getElementById('app')
 );

package.json

@@ -94,6 +94,7 @@
   },
   "homepage": "https://github.com/open-source-labs/ReacType#readme",
   "dependencies": {
+    "@apollo/client": "^3.3.11",
     "@babel/cli": "^7.10.4",
     "@babel/register": "^7.10.4",
     "@material-ui/core": "^4.11.0",

server/graphQL/resolvers/query.js

@@ -3,16 +3,16 @@ const { Tests } = require('../../models/reactypeModels');
 module.exports = {
   readTest: async (parent, args) => {
     const resp = await Tests.findOne({ _id: args.id });
-    if (resp) return { description: resp.name };
-    return { description: 'Error reading' };
+    if (resp) return { description: resp.name, id: resp._id };
+    return { description: 'Error reading', id: '0' };
   },
   readAllTests: async () => {
     const resp = await Tests.find({});
     // console.log('resp', resp);
     if (resp) {
-      return resp.map(elem => ({ description: elem.name }));
+      return resp.map(elem => ({ description: elem.name, id: elem._id }));
     }
     // TODO: Go back to this to see how to handle error later
-    return [{ description: 'Error reading all tests' }];
+    return [{ description: 'Error reading all tests', id: '0' }];
   },
 };

server/graphQL/typeDefs.js

@@ -21,6 +21,7 @@ const typeDefs = gql`
   }
   type Test {
     description: String
+    id: ID
   }
   type Query {
     readTest(id: String): Test

server/server.js

@@ -72,11 +72,6 @@ const server = new ApolloServer({ typeDefs, resolvers });
 server.applyMiddleware({ app });
 /** ****************************************************************** */
 
-// const path = require('path');
-// // Serve Static Assets
-// app.use(express.static(path.resolve(__dirname, './assets')));
-/* ******************************************************************* */
-
 
 
 app.post(