diff --git a/client/src/composition/Feed/onMount.tsx b/client/src/composition/Feed/onMount.tsx index a5340973..9fac52f6 100644 --- a/client/src/composition/Feed/onMount.tsx +++ b/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 ( - <> -
aa
- - ); + if (data) { + return
{data.newUser}
; + } else { + return ( + <> +
WHAT?
+ + ); + } }; diff --git a/client/src/composition/Feed/subscriptionTest.tsx b/client/src/composition/Feed/subscriptionTest.tsx index 7edf944f..3b6f18f0 100644 --- a/client/src/composition/Feed/subscriptionTest.tsx +++ b/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: -
FETCH
+ New data: !! +
{ + // onLoadMore(); + }}> + FETCH MORE +
); }; diff --git a/client/src/composition/Feed/subscriptionTest2.tsx b/client/src/composition/Feed/subscriptionTest2.tsx new file mode 100644 index 00000000..f783d5d6 --- /dev/null +++ b/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: {/* */} +
FETCH
+ + ); +}; + +export default SusbscriptionTest; diff --git a/server/src/api/feed/feed.graphql b/server/src/api/feed/feed.graphql index 9ad33e8d..54137060 100644 --- a/server/src/api/feed/feed.graphql +++ b/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 { diff --git a/server/src/api/feed/feed.resolvers.ts b/server/src/api/feed/feed.resolvers.ts index fd72aa70..9876feed 100644 --- a/server/src/api/feed/feed.resolvers.ts +++ b/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++; }