05_useQuery

client/package.json

@@ -7,6 +7,8 @@
     "apollo-boost": "^0.4.4",
     "apollo-boost": "^0.4.4",
     "apollo-cache-inmemory": "^1.6.3",
     "apollo-cache-inmemory": "^1.6.3",
     "apollo-link-http": "^1.5.16",
     "apollo-link-http": "^1.5.16",
+    "graphql": "^14.5.8",
+    "graphql-tag": "^2.10.1",
     "react": "^16.10.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-router-dom": "^5.1.2",
     "react-router-dom": "^5.1.2",

client/src/index.js

-import React from "react";
 import ReactDOM from "react-dom";
 import ReactDOM from "react-dom";
 import ApolloProvider from "./ApolloProvider";
 import ApolloProvider from "./ApolloProvider";
 import * as serviceWorker from "./serviceWorker";
 import * as serviceWorker from "./serviceWorker";

client/src/pages/Home.js

 import React from "react";
 import React from "react";
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/react-hooks";
+
+const FETCH_POSTS_QUERY = gql`
+  {
+    getPosts {
+      id
+      body
+      createdAt
+      username
+      likeCount
+      likes {
+        username
+      }
+      commentCount
+      comments {
+        id
+        username
+        createdAt
+        body
+      }
+    }
+  }
+`;
 
 
 function Home() {
 function Home() {
+  const { loading, error, data } = useQuery(FETCH_POSTS_QUERY);
+
+  console.log(data);
+
   return (
   return (
     <div>
     <div>
       <h1>Home page</h1>
       <h1>Home page</h1>

client/yarn.lock

@@ -4553,11 +4553,18 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
   resolved "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
   integrity sha1-bwlSYF0BQMHP2xOO0AV3W5LWewI=
   integrity sha1-bwlSYF0BQMHP2xOO0AV3W5LWewI=
 
 
-graphql-tag@^2.4.2:
+graphql-tag@^2.10.1, graphql-tag@^2.4.2:
   version "2.10.1"
   version "2.10.1"
   resolved "https://registry.npm.taobao.org/graphql-tag/download/graphql-tag-2.10.1.tgz#10aa41f1cd8fae5373eaf11f1f67260a3cad5e02"
   resolved "https://registry.npm.taobao.org/graphql-tag/download/graphql-tag-2.10.1.tgz#10aa41f1cd8fae5373eaf11f1f67260a3cad5e02"
   integrity sha1-EKpB8c2PrlNz6vEfH2cmCjytXgI=
   integrity sha1-EKpB8c2PrlNz6vEfH2cmCjytXgI=
 
 
+graphql@^14.5.8:
+  version "14.5.8"
+  resolved "https://registry.npm.taobao.org/graphql/download/graphql-14.5.8.tgz#504f3d3114cb9a0a3f359bbbcf38d9e5bf6a6b3c"
+  integrity sha1-UE89MRTLmgo/NZu7zzjZ5b9qazw=
+  dependencies:
+    iterall "^1.2.2"
+
 growly@^1.3.0:
 growly@^1.3.0:
   version "1.3.0"
   version "1.3.0"
   resolved "https://registry.npm.taobao.org/growly/download/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   resolved "https://registry.npm.taobao.org/growly/download/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -5436,6 +5443,11 @@ istanbul-reports@^2.2.6:
   dependencies:
   dependencies:
     handlebars "^4.1.2"
     handlebars "^4.1.2"
 
 
+iterall@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npm.taobao.org/iterall/download/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
+  integrity sha1-ktcN64Ao4MOf8xZP2/TYsIgTDNc=
+
 jest-changed-files@^24.9.0:
 jest-changed-files@^24.9.0:
   version "24.9.0"
   version "24.9.0"
   resolved "https://registry.npm.taobao.org/jest-changed-files/download/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
   resolved "https://registry.npm.taobao.org/jest-changed-files/download/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"

graphql/resolvers/index.js

@@ -3,6 +3,10 @@ const usersResolvers = require("./users");
 const commentsResolvers = require("./comments");
 const commentsResolvers = require("./comments");
 
 
 module.exports = {
 module.exports = {
+  Post: {
+    likeCount: parent => parent.likes.length,
+    commentCount: parent => parent.comments.length
+  },
   Query: {
   Query: {
     ...postsResolvers.Query
     ...postsResolvers.Query
   },
   },

graphql/typeDefs.js

@@ -8,6 +8,8 @@ module.exports = gql`
     username: String!
     username: String!
     comments: [Comment]!
     comments: [Comment]!
     likes: [Like]!
     likes: [Like]!
+    likeCount: Int!
+    commentCount: Int!
   }
   }
 
 
   type Comment {
   type Comment {