Check out a free preview of the full Firebase with React, v2 course:
The "Document Routing" Lesson is part of the full, Firebase with React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve explains the benefits of subcollections, then introduces the next feature in the application, which is to allow the user to fetch a specific post via a URL.

Get Unlimited Access Now

Transcript from the "Document Routing" Lesson

[00:00:00]
>> Steve Kinney: Two things we haven't covered yet, which is, one, this idea of subcollections. We've talked about collections. We've talked about subcollections. We haven't really dealt with any of it. We've just had this post and the user, right? And those are both top level collections. But a collection can have further collections beneath it.

[00:00:19] And so again, if a post can have a comment subcollection, those comments are only a subcollection of an individual post. So you don't need to do things like filtering of queries. Even in a SQL database, you might have a comments table that has a post ID and you would have to do a join on that.

[00:00:37] In this, you don't have to do that. They are unique to every post. It does make it a little problematic. If you wanna search all of the comments or something, that's not a thing, right? You'd have to store them a second place or something along those lines. But it does mean that we can keep nesting down different layers and separate stuff out.

[00:00:52] There's a bunch of advantages to subcollections. One is since queries are shallow, if there's stuff you don't want, so you might necessarily have a list of posts for maybe all of the full post content might be a single document subcollection, so that you can get the title and metadata of all the posts, right?

[00:01:12] But for the full body, that might be in a document in the subcollection, the comments, right? If you don't wanna get everything in the first pass, moving it down to a subcollection works really well. For the list of all the posts, I also don't wanna get all of the comments, perhaps, at that moment.

[00:01:27] I only wanna fetch the comments should they go to the given post. The other thing that we're gonna do is we have React router set up now. It would be great if when they go to a given URL, we can fetch the post based on the URL, right?

[00:01:45] Because let's say this application really grows and it's got 60 million hot takes in it, right? We're not gonna load those all into React state because that would be too much. And we'd probably limit the query to maybe the first 10 or 20, but that doesn't mean that somebody might share a link, right?

[00:02:04] So we wanna be able to fetch a post based on the URL. So if someone does share a link, we can go to Firestore, get just that document, in a sense will also get the comments. So there's two things that we're gonna do is having React router inform what specific document to go get.

[00:02:21] And then also, we'll have comments as well, and we'll be able to create comments and then read them all as it goes on. We'll actually subscribe to those changes for the individual document cuz that individual document may or may not be in that list of posts that we're also subscribed to.

[00:02:37] Right now, we're fetching all of them, but if we did limit it to 10, and it was the 12th, it wouldn't be tracked, right? So it makes sense that we would have a separate abstraction for this. So those are the two things that we're gonna do, and it's gonna be not dissimilar from the user profile component that we made.

[00:02:56] We're gonna break it out into computer properties, because we're gonna need to hold onto the comments ref to both to get the comments and to post new comments. We're gonna build the comments ref based off the post ref, so on and so forth. So it will be slightly similar, but a different take what we do with the user profile.

[00:03:13] This time, we're not doing storage, we're letting the route inform which one to go get, so on and so forth. So let’s get into it. I do have a problem, which is I have a component called Posts and Post, and I don’t really know what to call this one.

[00:03:27] I’m gonna call it PostPage, PostView. I wanna have strong opinions on what we name this for.
>> Speaker 2: [INAUDIBLE] PageView.
>> Steve Kinney: Page, all right.
>> Speaker 2: Do it in Post Page.
>> Steve Kinney: I got a PostPage vote. So we've got this PostPage.
>> Steve Kinney: Bring in React and we're gonna make it a stateful component because we're gonna have that comment field and, yeah, input fields.

[00:03:54] We're gonna bring in that Post component that we're using on the index page just to show the post. I don't really feel like rewriting that right now. So I'm gonna import Post, ./Post. We have that Comments component. That's been there the entire time.
>> Steve Kinney: ./Comments, we will need Firestore at some point.

[00:04:22]
>> Steve Kinney: Nope.
>> Steve Kinney: I feel like I've accidentally taught that. Now let's do the wrong thing, so that's great. And then we will also need that utility function that we had before.
>> Steve Kinney: Cool, and so we'll say class PostPage extends a Component.
>> Steve Kinney: And the state, we'll have to go get the post, so that will start out as null.

[00:04:57] comments will start out as an empty array.
>> Steve Kinney: Start out the render method.
>> Steve Kinney: Cool, so you have all that in place. Now I want to hook it up to the page that I want to know what post I'm supposed to get. Right now, this post is null, cool, I wanna see a post.

[00:05:29] I don't know which one get. That ideally would be informed by the URL. So let's start with this get so we can get to this page, and then we'll deal with the next step from there. So in react-router, we can go say posts/:id, and this'll be a dynamic segment.

[00:05:49] This'll be the ID of the post we should go get.
>> Steve Kinney: We'll say PostPage. No, I don't think I exported it yet. export default PostPage, all right, very cool.
>> Steve Kinney: There we go. Let's actually just take that for a spin as it is now.
>> Steve Kinney: Let's give ourselves a link from a given post,

[00:06:22]
>> Steve Kinney: To that PostPage. So we'll go ahead and say import Link from react-router-dom.
>> Steve Kinney: We'll say the h3, the title, we'll say that is the Link now,
>> Steve Kinney: to,
>> Steve Kinney: /posts,
>> Steve Kinney: id.
>> Steve Kinney: So now all these are links. Let's go click on this one and you see we're on a post page.