Extract a React View Component From a CommentQuery Component
Generally, you want to keep your view components separate from components that fetch data.
In this lesson, we extract the view portion from our Comments component. Into another component so that we can use the same view later in the course with two separate ways of fetching comments.
Ian Jones: [0:00] The first thing we want to do is go over to our comments. We want to take all of this Urql related logic, and move it out into a separate component, so that we can have a comments component that is just concerned with the UI. We'll call this queryComments. Then we'll create a function comments().
[0:26] Comments will take comments as props. Then if there are no comments, or if it's undefined, or comments.length=, we will return null. This will make sure to avoid any rendering errors when we render our comments list. Now we'll return and then we'll grab this JSX, move it down here.
[1:11] Instead of this long path, now we will just have comments. It still expects the same data on each comment, but now this component is much simpler and then up here, all we have to do is return comments and passComments = we'll paste that path in and now when we return queryComments, we can go over to our React app. It's loading and everything works as we would expect.
[1:55] Let's touch src/components/comments/query.js. We can copy all of this. We'll go to query or comments/query, paste this in, export default queryComments. We need to import comments from. We can delete any of the queryComments code. Just doing some refactoring, so now we're exporting comments. We'll save, make sure app is still working.
[2:59] We're not getting any data because inside of our app instead of comments we need comments/query. Now it's back to where it was.