[Add] subscribeToMore sample code #29

why
새 피드 알람을 위해서 sample code 작성

how
subscribeToMore 로 새 데이터 받아서 data 에 반영되는지 확인차 적용

주의
- subscribeToMore는 알람이 왔을 때 어떤 작업을 하고 싶을 때 사용
- 데이터를 받아서 바로 쿼리의 데이터와 머지하고 싶은 경우- existing queries are automatically notified 대신 데이터 형태가 같아야됨!!!

client/src/composition/Feed/onMount.tsx

@@ -3,14 +3,21 @@ import React from 'react';
 
 interface Props {
   onEffect: () => void | (() => void);
+  data: { newUser: string };
 }
 
-export const OnMount = ({ onEffect }: Props) => {
-  useEffect(onEffect, []);
+export const OnMount = ({ onEffect, data }: Props) => {
+  useEffect(() => {
+    return onEffect();
+  }, [onEffect]);
 
-  return (
-    <>
-      <div> aa</div>
-    </>
-  );
+  if (data) {
+    return <div>{data.newUser}</div>;
+  } else {
+    return (
+      <>
+        <div>WHAT?</div>
+      </>
+    );
+  }
 };

client/src/composition/Feed/subscriptionTest.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import { useQuery, useSubscription } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 import { OnMount } from './onMount';
+
 const FEEDS_SUBSCRIPTION = gql`
   subscription {
     newUser
@@ -10,18 +11,15 @@ const FEEDS_SUBSCRIPTION = gql`
 
 const COMMENT_QUERY = gql`
   query {
-    testPubsub
+    newUser
   }
 `;
 
 const SusbscriptionTest = () => {
-  /* const { data, loading } = useSubscription<{ newUser: string }, {}>(
-    FEEDS_SUBSCRIPTION,
-    {}
-  ); */
-  const { subscribeToMore, fetchMore, ...result } = useQuery(COMMENT_QUERY, {
+  const { subscribeToMore, data, ...result } = useQuery(COMMENT_QUERY, {
     variables: {}
   });
+
   // const [testMutation] = useMutation(COMMENT_QUERY, {});
 
   const subscribeToNewComments = () => {
@@ -31,26 +29,24 @@ const SusbscriptionTest = () => {
       updateQuery: (prev, { subscriptionData }) => {
         if (!subscriptionData.data) return prev;
         const newFeedItem = subscriptionData.data;
-        // console.log('new data! -', newFeedItem);
-        return newFeedItem;
+        console.log('subscriptionData loaded -', { ...prev, newFeedItem });
+        return { ...prev, ...newFeedItem };
       }
     });
   };
-  const onLoadMore = () =>
-    fetchMore({
-      variables: {},
-      updateQuery: (prev, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return prev;
 
-        return fetchMoreResult;
-      }
-    });
-
-  // return <> lalala </>;
+  if (data) {
+    console.log('data load check??', data);
+  }
   return (
     <>
-      New comment: <OnMount onEffect={subscribeToNewComments} />
-      <div>FETCH</div>
+      New data: <OnMount data={data} onEffect={subscribeToNewComments} /> !!
+      <div
+        onClick={() => {
+          // onLoadMore();
+        }}>
+        FETCH MORE
+      </div>
     </>
   );
 };

client/src/composition/Feed/subscriptionTest2.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useQuery, useSubscription } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+import { OnMount } from './onMount';
+
+const FEEDS_SUBSCRIPTION = gql`
+  subscription {
+    newUser
+  }
+`;
+
+const COMMENT_QUERY = gql`
+  query {
+    testPubsub
+  }
+`;
+
+const SusbscriptionTest = () => {
+  const { data, loading } = useSubscription<{ newUser: string }, {}>(
+    FEEDS_SUBSCRIPTION,
+    {}
+  );
+  /* const { subscribeToMore, fetchMore, ...result } = useQuery(COMMENT_QUERY, {
+    variables: {}
+  });
+  // const [testMutation] = useMutation(COMMENT_QUERY, {});
+
+  const subscribeToNewComments = () => {
+    return subscribeToMore({
+      document: FEEDS_SUBSCRIPTION,
+      variables: {},
+      updateQuery: (prev, { subscriptionData }) => {
+        if (!subscriptionData.data) return prev;
+        const newFeedItem = subscriptionData.data;
+        // console.log('new data! -', newFeedItem);
+        return newFeedItem;
+      }
+    });
+  };
+  const onLoadMore = () =>
+    fetchMore({
+      variables: {},
+      updateQuery: (prev, { fetchMoreResult }) => {
+        if (!fetchMoreResult) return prev;
+
+        return fetchMoreResult;
+      }
+    }); */
+
+  // return <> lalala </>;
+  if (!loading) {
+    console.log(data);
+    return <> data </>;
+  }
+  return (
+    <>
+      New comment: {/* <OnMount onEffect={subscribeToNewComments} /> */}
+      <div>FETCH</div>
+    </>
+  );
+};
+
+export default SusbscriptionTest;

server/src/api/feed/feed.graphql

@@ -58,7 +58,7 @@ type Query {
   feeds(first: Int, cursor: String): [Feed]!
   pageInfo: PageInfo
   feedItems(first: Int, cursor: String): [IFeed]
-  testPubsub: String
+  newUser: String
 }
 
 type Mutation {

server/src/api/feed/feed.resolvers.ts

@@ -50,14 +50,14 @@ export default {
       });
       return ParseResultRecords(result.records);
     },
-    testPubsub: (_, __, { pubsub }) => {
+    newUser: (_, __, { pubsub }) => {
       /* const user = {
         id: 1,
         username: 'name'
       }; */
 
       pubsub.publish(NEW_USER, {
-        newUser: 'name'
+        newUser: 'name' + temp + ''
       });
       return 'value' + temp++;
     }