Graphql using apolo

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 .DS_Store
-.env
+.env
+client/yarn.lock
+server/yarn.lock

client/src/containers/track-card.js

@@ -3,16 +3,54 @@ import styled from '@emotion/styled';
 import { colors, mq } from '../styles';
 import { humanReadableTimeFromSeconds } from '../utils/helpers';
 import { Link } from 'react-router-dom';
+import { gql, useMutation } from '@apollo/client';
+
+
 
 /**
  * Track Card component renders basic info in a card format
  * for each track populating the tracks grid homepage.
  */
+const INCREMENT_TRACK_VIEWS = gql`
+  mutation IncrementTrackViews($incrementTrackViewsId: ID!) {
+    incrementTrackViews(id: $incrementTrackViewsId) {
+      code
+      success
+      message
+      track {
+        id
+        numberOfViews
+      }
+    }
+  }
+`
 const TrackCard = ({ track }) => {
   const { title, thumbnail, author, length, modulesCount, id } = track;
+  // const [incrementTrackViews ]= useMutation(INCREMENT_TRACK_VIEWS, {
+  //   variables:{ incrementTrackViewsId: id},
+  //   onCompleted: (data)=>{
+  //     console.log(data);
+  //   }
+  // })
+  const [incrementTrackViews, { data, loading, error }] = useMutation(INCREMENT_TRACK_VIEWS, {
+    variables: { incrementTrackViewsId: id },
+    onCompleted: (data) => {
+      console.log(data);
+    },
+    onError: (error) => {
+      console.error("Error incrementing track views:", error);
+    }
+  });
+
+  if (error) {
+    console.error("Error found:", error);
+  }
+
+
 
   return (
-    <CardContainer to={`/track/${id}`}>
+    <CardContainer to={`/track/${id}`}
+      onClick={() => incrementTrackViews()}>
       <CardContent>
         <CardImageContainer>
           <CardImage src={thumbnail} alt={title} />

server/src/datasources/track-api.js

@@ -23,6 +23,10 @@ class TrackAPI extends RESTDataSource {
   getModule(moduleId) {
     return this.get(`module/${moduleId}`);
   }
+
+  incrementTrackViews(trackId){
+    return this.patch(`track/${trackId}/numberofViews`);
+  }
 }
 
 module.exports = TrackAPI;

server/src/resolvers.js

@@ -15,6 +15,27 @@ const resolvers = {
       return dataSources.trackAPI.getModule(id);
     },
   },
+  Mutation: {
+    // increments a track's numberOfViews property
+    incrementTrackViews: async (_, { id }, { dataSources }) => {
+      try {
+        const track = await dataSources.trackAPI.incrementTrackViews(id);
+        return {
+          code: 200,
+          success: true,
+          message: `Successfully incremented number of views for track ${id}`,
+          track,
+        };
+      } catch (err) {
+        return {
+          code: err.extensions.response.status,
+          success: false,
+          message: err.extensions.response.body,
+          track: null,
+        };
+      }
+    },
+  },
   Track: {
     author: ({ authorId }, _, { dataSources }) => {
       return dataSources.trackAPI.getAuthor(authorId);

server/src/schema.js

@@ -10,6 +10,21 @@ const typeDefs = gql`
     module(id: ID!): Module!
   }
 
+  type Mutation{
+    incrementTrackViews(id: ID!): IncrementTrackViewsResponse!
+  }
+
+  type IncrementTrackViewsResponse{
+    "Similar to HTTP status code, represents the status of the mutation"
+    code: Int!
+    "Indicates whether the mutation was successful"
+    success: Boolean!
+    "Human-readable message for the UI"
+    message: String!
+    "Newly updated track after a successful mutation"
+    track: Track
+  }
+
   "A track is a group of Modules that teaches about a specific topic"
   type Track {
     id: ID!
@@ -52,6 +67,8 @@ const typeDefs = gql`
     "The module's video url, for video-based modules"
     videoUrl: String
   }
+
+
 `;
 
 module.exports = typeDefs;