Dynamic Content Fetching

[00:00:00]
>> Scott Moss: Now we need to make, the call to get the data so const data = wait. I'm gonna restart my builds, when you move files around sometimes it doesn't pick up some of the changes that you did so, let's do that. So I'm gonna say wait, get, what did I call this one?

[00:00:22]
>> Scott Moss: GetContentForCustomerPosts. So getContentForCustomerPosts. Because this is a page on a dynamic route, it's always gonna get a params object here as a property or as a prop. And then, let me make this async.
>> Scott Moss: We know we need to pass in a slug here, and we have slug, it's gonna be on the params.

[00:00:50]
Because what we put here as slug, whatever you put here, that's what's gonna be on the params object. So that's gonna be params.slug.
>> Scott Moss: If this was ID, it'd be params.ID.
>> Scott Moss: Why is this thing freaking out?
>> Scott Moss: Okay [LAUGH] that's what was there. Okay, so we got the data.

[00:01:25]
>> Scott Moss: Wait, did I not add the types of the data? Yeah, add the types, let me add the types. There we go, this will be,
>> Scott Moss: Customer post query, okay.
>> Scott Moss: There we go. Let's say, got to have my types.
>> Scott Moss: There we go, okay, so this will be, so we'll say content = data.net.items.0, so that's our content.

[00:01:58]
So we'll just log this just to make sure this works, and we just need to navigate to a slug that exists on a piece of content in our CMS, which we only have one. So that should work just fine, and then we'll replace some of this stuff, so let's go try that.

[00:02:17]
I'm just gonna grab this right here.
>> Scott Moss: There we go, okay, so it'll be customers/ and then that slug, so let's see what happens.
>> Scott Moss: Looks like it still loathes, that's good, and then the content is here, so it works just fine.
>> Scott Moss: Next thing we need to do is we need to render this rich text JSON.

[00:02:46]
So, in order to do that, we can use a component from Contentful. So Contentful has a component for this, so it'll be Contentful rich-text-react-renderer, that's the one. Well, it should already be installed, but that's what it is right there. Contentful rich-text-renderer. And then really all you have to do is you call it with the JSON, you just pass it to JSON and you're pretty much good to go.

[00:03:18]
So let's go ahead and do that. And we have the JSON, it's on the JSON field, if we look, it's body.JSON, it's that, we're gonna pass that in, so let's do that. So we got content, I'm gonna go down here to where the rich text is.
>> Scott Moss: It's all of this, I'm just gonna collapse it all.

[00:03:40]
And if we do it right, it should look exactly the same, nothing should change.
>> Scott Moss: Okay, let's see if I can get all of this.
>> Scott Moss: There we go, and what is the name of that component?
>> Scott Moss: There we go this one, so I'll copy that import.
>> Scott Moss: Just make a placeholder so I can come back to this here.

[00:04:21]
>> Scott Moss: There we go.
>> Scott Moss: Maybe this is not installed. Just this MP installed just to be sure.
>> Scott Moss: All right, contentful/rich-text-react-renderer. Okay, so we got that. Go down to where I left my placeholder, here we are. And I will say,
>> Scott Moss: DocumentsToReactComponents, that would be content.body.json.
>> Scott Moss: So if I go back and check the site, it should look the same, and it does.

[00:05:11]
But now, this isn't hard-coded content. This is the rich text coming from the CMS, so let's go edit some of it and we'll see. So if I go here and I say let's put something here so we can see it immediately, I guess. Hello there and then publish this, and then go back to our site, do a hard refresh, there we go.

[00:05:34]
So I think this is pretty powerful. You can create a really good blogging solution like this, now the editing experience is as good as it's gonna get without having like the app whose job is to make an editing experience. It's a little widget, that's gonna be be there, but it's pretty good, it works.

[00:05:50]
There's a bunch of camps of what should the output of a rich text editor be. I think the end of the day JSON is probably the best, but when you do that you have to also support a renderer in every single environment in which your customers might use it.

[00:06:08]
Because if you've created this JSON output or you just leave it up to them to create some recursive renderer that loops through this thing and maps it to whatever output they need, you also have to do the work of doing that. So, but I do think that's the way, that way it's composable.

[00:06:25]
You can take your content wherever you want, bring it wherever you want, it just works, it's just JSON. Okay, so we got that, let's move some of this other stuff into dynamic land, so right here, this is the title. So we can say, content.title let's do we have here, think that was that.

[00:06:46]
>> Scott Moss: Yeah, that might have been at some other stuff. I guess we're here Airbnb Inc, we could this is the thing on the right I think that's disrepair. Let's change this, so we can say,
>> Scott Moss: Content.customer.name, and then we don't have their address or anything like that, but it's just a logo.

[00:07:16]
I think this is the logo.
>> Scott Moss: Or is that something else? No, that's a logo, okay. We gotta bring in an image component, I don't feel like doing all that. But you put an image component there, have that work. So let's save that, and if we go back, there it is, there's Canon, there's our stuff.

[00:07:36]
There is the new title. So that's good to go.