Querying Content with GraphQL

[00:00:00]
>> Scott Moss: Cool, all right, welcome back, hope everyone had a small, nice break. So let's hop into creating some content. Yeah, so how about we go back to our Contentful instance, and I'm gonna click on content here. I don't have any content, so like there say, now for the fun part, [LAUGH] I'm going to click here, I'm going to make a new hero, okay?

[00:00:27]
As you can see, all my required fields are lit up, it's a form. So this is what people on your content team, your marketing team, whoever is responsible for editing content, this is what they'll see. So everything we just selected on that content model page, that's what gets rendered here.

[00:00:43]
So for the title, for this pre-title, I'm just gonna say something like, Beta is live, something like that. For the title, I'm gonna say, Work in progress, we're still thinking of it. [LAUGH] And then for the subtitle, I'm just gonna put a bunch of random words here because I don't know what to say yet.

[00:01:15]
So we're gonna put that there. And then for our Call To Actions, we get this nice little GUI. So I'm gonna click here, select the Button, I wanna add a button. This button has a label, the first one will say Getting Started, and it's gonna just stay here.

[00:01:33]
It's gonna stay at home.
>> Scott Moss: I'm then gonna click Publish on this, we'll talk about the different states in a minute. They're mostly all the same across most CMSs. So I'm gonna click Publish. I'm then going to make another button because it says you need two. So I'm gonna do that.

[00:01:50]
Make another button. And this one's gonna say, Read the docs, something like that. And it's gonna go to /docs, and I will publish that one, and go back. So we'll notice in most headless CMS UIs, you're just gonna be in like modal hell. There'll just be modals on top of modals, on top of modals.

[00:02:12]
Every relationship, there's another modal. So you have to be able to go back, and I think that's where, I remember when we were working on our CMS and we used one of those apps where you can watch a user's session to see what they do, they all got stuck there.

[00:02:26]
It was just, unless you are just the person making the schema and you understand relationships, you will get lost on that. So there's a balance between putting a bunch of stuff on one schema and not putting too much on one schema, and it's never perfect. So I think it's one of those things that have to be solved between the developer who's designing the schema and the content person who's gonna be filling it out.

[00:02:50]
Like, there has to be like some education there, some meeting, some agreement. So, it's just that typically those two people aren't the best at talking with each other. [LAUGH] A lot of CMSs fall through those cracks simply because the developer can't talk to the content person very well and vice versa.

[00:03:07]
Okay, so that's there, and then I'm going to publish this whole hero. So I'm gonna do that. So there we go, if I go back to my content list, I now have three things, I have one hero that I made, and I have two buttons that I made.

[00:03:24]
>> Scott Moss: You should have something similar, and they should all be published. Now what I wanna do is, before I go into the app and write the code, because we're using GraphQL, I want to try out the actual query that we're gonna be running, so I can just go Copy and Paste it.

[00:03:39]
So luckily, because we are using GraphQL, we can use some really cool tools. So one of the tools is gonna be called, if you just Google, Apollo Studio, you Google that. They have this Explorer Sandbox, go there. Click on that. Click on the Explorer Sandbox, and then what you can do up here in the URL, you can add the GraphQL URL for Contentful.

[00:04:13]
So we'll just do that. So I'm just gonna grab the one that we have in fetch, right? We'll grab this URL here, not that. Come here. Grab this URL and go, why is my dictionary open? Go here.
>> Scott Moss: And put this up here at the top. You need to obviously get rid of this placeholder for this environment variable and add in your real space ID.

[00:04:40]
So let me go get mine.
>> Scott Moss: Like that, and then you need to add in some headers. So you click on Headers here at the bottom, you can click on a New Header. Click here it says Header key, go to Authorization.
>> Scott Moss: And then you want to paste in your access token with the word Bearer in front of it.

[00:05:11]
So Bearer space, make sure there's a space after the word Bearer, and grab your access token and place it in there. And then once you do that, boom, it'll load up like magic.
>> Scott Moss: You know you did it right when you see a bunch of stuff here on the left.

[00:05:35]
>> Scott Moss: So the steps to follow again, add the GraphQL URL at the top here, make sure you put your space ID on the end. Click on Headers, add an Authorization Header. The value should be Bearer space, your access token that's in your env file. Once you do that, you don't have to hit refresh, you don't have to do anything.

[00:05:55]
It should populate with some, if you know what GraphQL is, these are just, you can think of these as like routes that you can hit, but they're based on your Contentful schema. So it's going to evolve. As you make more content models, this will change. This is the cheat code.

[00:06:12]
This is how you build really quickly. I think GraphQL is probably the most useful on the frontend when it comes to CMSs.
>> Scott Moss: Okay, I'll keep going then. So, to use this tool, let me make this bigger. To use this tool, it's very simple, we don't even really have to do anything.

[00:06:35]
I want to be able to get the one hero that I have and get the data for it and put it on the page. So there are a bunch of ways I can do that. If I use the one here that's called hero, it requires an ID. So I could, being the smart developer I am, go get the ID that was created for that one hero, but that's assuming I made the hero.

[00:07:00]
What if the content creator made the hero? I just made the model and then they went and made the hero. So, I guess I could still go get it. So there's this like condition of like, I don't know what the idea is, cuz in most cases you don't know what the idea is of something unless you got it from a list in the original instance.

[00:07:17]
And I don't need a list of heros, so I'm not gonna hard code it here because again, they could delete that hero, make another one, and then that ID is gonna break my app. So instead, what I can do with Contentful is I'm just gonna click on the hero collection, which is how you can query for, you can basically do filtering on the heroes collection.

[00:07:36]
Like, find me a hero that has this field value that contains this and limit to one, so I'll do something like that, right? So I'm gonna click on, I can hit this plus button right here, and it's just gonna add it for me. I don't even have to write anything, it's gonna make a GraphQL query.

[00:07:51]
If you're looking at this, don't worry about it, just look at this over here, these are the fields that you want, you just click plus on the fields that you want and it'll add them for you. So for us, we want to get all the items, so I'm gonna say, give me the items like that, and then I want the title, I want the subtitle, I want the pre-title.

[00:08:11]
And then I want to get all the buttons, which we called Call To Actions. So I'm gonna say, Give me those. And out of those, I want the items. And from that, I want the link and the label. So I want all of that.
>> Scott Moss: You're right that if you are fancy with GraphQL, it'll all complete for you.

[00:08:33]
If you type, it'll say that.
>> Scott Moss: So that's my collection, so if I run this, and actually let me go back, I could limit to one but we only made one, I don't have a content team right now. So I'm just gonna trust that I'm only gonna make one for now.

[00:08:55]
Again, a lot of CMSs have a restriction you can add, like this. You can only make one instance of this model and nothing else, and that would be useful here, but they don't have it. So I'm gonna run it and there we go, I give back. If you never use GraphQL, you're gonna give back data in the exact same shape that this describes, the exact same shape.

[00:09:13]
So that's what we got back, we got data.heroCollection, that has an items property on it, that's an array of objects that look like this. Each one of those has an array of buttons. That's the flow, as I make content, I make my model, I make my content, I come in here and I test it, and then I just copy this.

[00:09:30]
I just copy this whole thing for Bao, just give me that query.