updates

Author: chenkie

server/prisma/dev.db

@@ -9,12 +9,35 @@ const prisma = new PrismaClient();
 const server = new ApolloServer({
   typeDefs,
   resolvers,
-  context: ({ req }) => ({
-    prisma,
-    userId: req.headers.authorization
-      ? getUserId(req)
-      : null
-  })
+  context: async ({ req, connection }) => {
+    if (connection) {
+      return connection.context;
+    } else {
+      return {
+        prisma,
+        userId: req.headers.authorization
+          ? getUserId(req)
+          : null
+      };
+    }
+  },
+  subscriptions: {
+    onConnect: (connectionParams) => {
+      if (connectionParams.authToken) {
+        return {
+          prisma,
+          userId: getUserId(
+            null,
+            connectionParams.authToken
+          )
+        };
+      } else {
+        return {
+          prisma
+        };
+      }
+    }
+  }
 });
 
 server.listen(process.env.PORT || 4000).then(({ port }) => {

server/src/index.js

@@ -0,0 +1,5 @@
+const { PubSub } = require('apollo-server');
+
+const pubsub = new PubSub();
+
+module.exports = { pubsub };

server/src/pubsub.js

@@ -9,6 +9,7 @@ const postedBy = async (parent, args, context) => {
       where: { id: link.userId }
     });
   } catch (err) {
+    console.log('the err', err);
     throw new ApolloError(err);
   }
 };

server/src/resolvers/Link.js

@@ -5,32 +5,38 @@ const {
   ApolloError,
   AuthenticationError
 } = require('apollo-server');
+const { pubsub } = require('./../pubsub');
 
 const createPost = async (
   parent,
   { url, description },
   context
 ) => {
   try {
+    let data = {};
     if (!context.userId) {
-      return await context.prisma.link.create({
-        data: {
-          url,
-          description
-        }
-      });
-    }
-    return await context.prisma.link.create({
-      data: {
+      data = {
+        url,
+        description
+      };
+    } else {
+      data = {
         url,
         description,
         postedBy: {
           connect: {
             id: context.userId
           }
         }
-      }
+      };
+    }
+    const newLink = await context.prisma.link.create({
+      data
+    });
+    pubsub.publish('POST_CREATED', {
+      newLink
     });
+    return newLink;
   } catch (err) {
     throw new ApolloError(err);
   }
@@ -116,7 +122,7 @@ const vote = async (parent, args, context) => {
       );
     }
 
-    return await context.prisma.vote.create({
+    const newVote = await context.prisma.vote.create({
       data: {
         link: {
           connect: {
@@ -130,6 +136,12 @@ const vote = async (parent, args, context) => {
         }
       }
     });
+
+    pubsub.publish('VOTE', {
+      newVote
+    });
+
+    return newVote;
   } catch (err) {
     throw new ApolloError(err);
   }

server/src/resolvers/Mutation.js

@@ -1,31 +1,10 @@
-const { PubSub } = require('apollo-server');
-
-const pubsub = new PubSub();
-
-function newLinkSubscribe(parent, args, context, info) {
-  return context.prisma.$subscribe
-    .link({ mutation_in: ['CREATED'] })
-    .node();
-}
+const { pubsub } = require('./../pubsub');
 
 const newLink = {
-  subscribe: () => pubsub.asyncIterator(['CREATED']),
-  resolve: (payload) => {
-    return payload;
-  }
+  subscribe: () => pubsub.asyncIterator(['POST_CREATED'])
 };
-
-function newVoteSubscribe(parent, args, context, info) {
-  return context.prisma.$subscribe
-    .vote({ mutation_in: ['CREATED'] })
-    .node();
-}
-
 const newVote = {
-  subscribe: newVoteSubscribe,
-  resolve: (payload) => {
-    return payload;
-  }
+  subscribe: () => pubsub.asyncIterator(['VOTE'])
 };
 
 module.exports = {

server/src/resolvers/Subscription.js

@@ -2,9 +2,9 @@ const { ApolloError } = require('apollo-server');
 
 const link = async (parent, args, context) => {
   try {
-    return context.prisma.link.findMany({
+    return await context.prisma.link.findOne({
       where: {
-        userId: parent.userId
+        id: parent.linkId
       }
     });
   } catch (err) {

server/src/resolvers/Vote.js

@@ -1,11 +1,23 @@
 const jwt = require('jsonwebtoken');
 const APP_SECRET = 'GraphQL-is-aw3some';
 
-function getUserId(req) {
+function getTokenPayload(token) {
+  return jwt.verify(token, APP_SECRET);
+}
+
+function getUserId(req, authToken) {
+  if (authToken) {
+    const { userId } = getTokenPayload(authToken);
+    return userId;
+  }
+
   const authHeader = req.headers.authorization;
   if (authHeader) {
     const token = authHeader.replace('Bearer ', '');
-    const { userId } = jwt.verify(token, APP_SECRET);
+    if (!token) {
+      throw new Error('No token found');
+    }
+    const { userId } = getTokenPayload(token);
     return userId;
   }
 

server/src/utils.js

@@ -1,8 +1,8 @@
-import React, { Component, useState } from 'react';
-import { FEED_QUERY } from './LinkList';
-import { LINKS_PER_PAGE } from '../constants';
-import { useMutation, gql } from '@apollo/client';
+import React, { useState } from 'react';
+import { gql, useMutation } from '@apollo/client';
 import { useHistory } from 'react-router';
+import { LINKS_PER_PAGE } from '../constants';
+import { FEED_QUERY } from './LinkList';
 
 const CREATE_LINK_MUTATION = gql`
   mutation PostMutation(

src/components/CreateLink.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import { FEED_QUERY } from './LinkList';
-import { AUTH_TOKEN } from '../constants';
+import { gql, useMutation } from '@apollo/client';
+import { AUTH_TOKEN, LINKS_PER_PAGE } from '../constants';
 import { timeDifferenceForDate } from '../utils';
-
-import { useMutation, gql } from '@apollo/client';
+import { FEED_QUERY } from './LinkList';
 
 const VOTE_MUTATION = gql`
   mutation VoteMutation($linkId: ID!) {
@@ -27,38 +26,50 @@ const VOTE_MUTATION = gql`
 const Link = (props) => {
   const { link } = props;
   const authToken = localStorage.getItem(AUTH_TOKEN);
-  const [vote, { loading, error, data }] = useMutation(
-    VOTE_MUTATION,
-    {
-      variables: {
-        linkId: link.id
-      },
-      update(cache, { data: { vote } }) {
-        const { feed } = cache.readQuery({
-          query: FEED_QUERY
-        });
 
-        const updatedLinks = feed.links.map((feedLink) => {
-          if (feedLink.id === link.id) {
-            return {
-              ...feedLink,
-              votes: [...feedLink.votes, vote]
-            };
-          }
-          return feedLink;
-        });
+  const take = LINKS_PER_PAGE;
+  const skip = 0;
+  const orderBy = 'createdAt_DESC';
+
+  const [vote] = useMutation(VOTE_MUTATION, {
+    variables: {
+      linkId: link.id
+    },
+    update(cache, { data: { vote } }) {
+      const { feed } = cache.readQuery({
+        query: FEED_QUERY,
+        variables: {
+          take,
+          skip,
+          orderBy
+        }
+      });
 
-        cache.writeQuery({
-          query: FEED_QUERY,
-          data: {
-            feed: {
-              links: updatedLinks
-            }
+      const updatedLinks = feed.links.map((feedLink) => {
+        if (feedLink.id === link.id) {
+          return {
+            ...feedLink,
+            votes: [...feedLink.votes, vote]
+          };
+        }
+        return feedLink;
+      });
+
+      cache.writeQuery({
+        query: FEED_QUERY,
+        data: {
+          feed: {
+            links: updatedLinks
           }
-        });
-      }
+        },
+        variables: {
+          take,
+          skip,
+          orderBy
+        }
+      });
     }
-  );
+  });
   return (
     <div className="flex mt2 items-start">
       <div className="flex items-center">