Use a GraphQL Query and Subscription Together to Fetch the History and Current Comments

Instructor: [0:00] Now that we have subscriptions working, we want to see the history of the chat. When you reload the page you lose all of the history, so you can't go back and read what people have said before.

[0:14] In our application, we already have this component in comments query. We need to extract this hook that's loading the comments and use it in comments subscription. I'm going to create a function called useComments history.

[0:38] I want to move this on up and instead of just returning the result, we'll return this whole path. First, we need to check if result.data, then we'll return our nodes, because if we have data, we know that we've successfully got this whole query back. If not, we'll just return an empty list.

[1:23] Inside of here, we can go useCommentsHistory, so if not comments, we can just delete this, because it'll either return an empty array, or it'll return the comments that we have. Then we'll go comments. Inside of our app, instead of comments subscription, we'll go comments query, just to make sure that this refactor worked. There's all the history of our app.

[2:06] Let's open our terminal. I'm going to mkdir source/components/hooks, and then I'm going to touch source/components/hooks/useCommentsHistory.js. We'll open it, useCommentsHistory. I'll go back to comments query and I'll copy all of this. I'll import useCommentsHistory from, and then we'll also need this.

[3:04] Paste that and we'll paste this. I'll export default useCommentHistory. Let's make sure everything is working. There we go.

[3:18] Let's go back to our app. We're going to replace this with comments subscription, and then inside of comments subscription, we can import useCommentsHistory from hooks/useCommentsHistory. This time, we will call it const commentsHistory.

[3:48] Then down here, we will go const commentsWithHistory. This will be an array. The first thing we want to do is spread CommentsHistory. Then we want to spread any result that we've got, result.data. e'll put that into our comments. We'll save comments subscription result.data is not iterable.

[4:35] Let's go console.log CommentsResult. There we go. When data is undefined, we need to default it to an empty array. Now, we can go, I'm so glad, enter, but we're getting it two times. Why is that? If we go to our Network tab, you can see that we're also fetching our query.

[5:26] To solve this, we can go back to our app, and in CommentsHistory, another parameter in our useQuery, so we can pass Pause. We don't want to pause the query by default, so we'll pass in an options object, and then we can grab Pause. We'll default it to false.

[5:59] Inside of our CommentsSubscription, we need a variable to tell useCommentsHistory when to stop fetching. We'll call this const pauseCommentsHistory, and set pauseCommentsHistory React.useState.

[6:33] We'll default it to false because we want Comments to fetch at least one time. We'll pass this.pauseCommentsHistory. We will get the CommentsHistory length, so const CommentsHistoryLength = CommentsHistory.Length. Now we're going to call React.useEffect. We're going to say, if commentsHistoryLength does not equal zero, we will set pauseCommentsHistory to true.

[7:23] We don't want this effect to be called over and over again, so we're going to pass commentsHistoryLength in. When this variable changes, then we'll run our effect. When we go to our app, we get the history. We send a comment, and it only appears once.