Build a Podcast Mashup App Using OneGraph and Gatsby — Learn With Jason

Build a Podcast Mashup App Using OneGraph and Gatsby — Learn With Jason


– Quick sound check, make
sure that it’s going through. – Yeah, how’s this sound? – Yup, we’ve got audio going to the stream which is what we needed. So let me open the Twitch chat just in case anybody has questions, and we should be able to
get rockin’ and rollin’. Yup, we’re live, okay, cool. So, Sean, I appreciate
you taking the time. I know that you have a lot going on, so it’s great that you were
able to carve out some time to build some stuff with us. And I am gonna start
signing up for OneGraph. While I’m doing that, do
you wanna talk a little bit about what OneGraph is and what it does? – Yeah, sure. So the idea is fairly simple. It’s pretty easy to get the concept. OneGraph is effectively a GraphQL wrapper around existing public
APIs and some not APIs. And it makes it so that you can basically explore the entire
internet with just GraphQL. And then you can use it
either on the server, so kind of traditionally. If you were to make a
Gmail app, for example, you’d probably build
it from the server up, or you can use it entirely
kind of client side, with no server and we’ll
handle of the server queries, mutations, that kind of thing. So the idea is really simple, but kind of watching it
in action is a lot of fun. – Yeah, that’s awesome. Sorry, I just realized
that my password generator was kind of out on the stream, so I’m trying to do it off screen here. – No worries. – Let’s do here. Okay, that’ll work. Did I lose my window? Here. And so, we did a quick demo on a call and you were talking about the, you showed me stuff that
kind of blew my mind, which was really cool. You’ve got full integration with Gmail and you can just drop in some really, stuff that seems very, very hard. You just kinda did on the fly,
which was pretty exciting. – I mean, if you’re comfortable, we can also do it with your Gmail. – Yeah, let’s–
– Let’s do it You can do for the first time. – Let’s do it. (laughing) We’ll see how this goes. So, let’s see, okay. So I’m gonna create an
app, and, let’s see, any apps I create, my new app ID, okay. And I just leave–
– So this is the part where if you use it from the front end, we’re gonna enforce CORS to make sure that everything is secure. – Got it.
– So in this case, localhost:3000 should be fine. It’s already in there. – Oh, yeah, I guess we can
just run Gatsby on that port. – I mean, as you like, yeah. – Yeah, whatever. – Okay. – And now, see support. Good deal, awesome. Let’s go into, what should I do, the Data Explorer first, you think? – Yeah, I think so. So we’re using GraphiQL and we
haven’t opensourced this yet, but we need to do this soon, but we actually have this
piece called the Explorer. So if we open up the Explorer. – And that’s here. – Mm-hm, and this lets you actually kind of visually navigate
the GraphQL query and kind of interact with GraphQL without actually knowing what it is. It’s like a really nice way
of posting what’s available and of like getting your bearings on just GraphQL in general. – Oh, wow, that’s super cool. So let’s start with the easy one. What happens if I just run me? – So me is like to find whether
or not you’re logged in. Let’s do YouTube for example. So auths is what we’ll use if we’re trying to send an authenticated query, and we already have our auth token. But let’s just have
OneGraph handle it for now. So we’ll do Authentication and YouTube. And this is all using like
the OneGraph JavaScript app, just like you would in your app. So you can just do OneGraph auth, saw it, log in with YouTube, and it will take care of this window. – Oh, wait, what I am I doing? I need to go. Ah, crap, I need to go back. So let me do that again. Here.
– That’s fine. – Do it with my other account. This one, and then I’ve got this one. Okay. – All right, so now you
can uncheck the auths. – Uncheck the auths. – Yeah, so the idea is, auth is like I’m gonna bring my own auth. Otherwise OneGraph will handle it. So you expand the YouTube
and get your email maybe. – Oh, wow, it gives you everything. – Yup. Yeah, I think by default
if like you don’t have your ID in there, then
it’ll expand everything. – Sure. – Yeah, so now we’re
logged in with YouTube and we can actually make some YouTube. Like you wanna go grab a
YouTube video ID real quick? – Yeah. Let’s go to my YouTube channel, and we’ll pull in something. What do we got? Here, just grab this first one. – There he is. – Hey, I just sent you a message. Okay, so got that. – Okay, and now back in our Data Explorer. Let’s find the YouTube video to pop in. Actually, let’s do YouTube video. So this is an older part of the OneGraph that we’ll clean up in a
bit, but towards the bottom, there’s YouTube Video. – Ah, here, got it. – Yeah. So now we’ll try to find
ID, you just pop that in. And let’s pull out, yeah, I guess snippet. And then that’s gonna have a title. And let’s try it out, see if it works. Cool. – That is slick. – You wanna get the comments on it maybe? – Sure. – So I think it’s comment
threads, up towards the top. – And then we implement the traditional pagination patterns everywhere. Like if the pagination is uniform across all the different APIs, which is nice. – Yeah. Wow, this goes deep, huh? Looks like that one doesn’t
have any comments on it. Let me grab one that does ’cause that seems like it
would be interesting to see. Let’s go to, let’s see there’s one in here that’s got a lot of comments on it. It’s the node one. Hey, everybody. This is Jason Lengstorf, and
today I wanna walk through the. Okay, so let’s get back over here, and we’ll swap it out for this one. – Okay, and let’s go into the snippet and let’s pull maybe the original text. So the text, yeah, original. Try that. Oh, and you can see we’re able to do this in I guess just a few
API calls, which is nice. – Yeah, that’s awesome. Yeah, this is two API calls. And then, does this show
how many it would’ve been had it been just rest? – We don’t show that right now, no. – Okay, because that is pretty awesome. – Yeah, we basically, we find
a way to kind of optimize for the underlying APIs. So for example, with
YouTube, in the rest way, you can specify which kind
of chunks of fields you want. And so we automatically detect
which fields you’ve specified in the OneGraph, in the
GraphQL Data Explorer. And then we figure out the optimized query to send to the YouTube video
so we get all that data back in as few calls as possible,
and as little time as possible. – Mm-hm, yeah. That’s super slick. Okay, and so then, all of
that, that I’ve just done, we did from the UI. Like we didn’t have to do any other work. So now I can do this with
my other setup as well? So if I go into Google, I just have to authenticate with Google. Should I do Gmail, do you think? – Yeah, sure. – All right, let’s do Gmail. – Trello is also a fun one. I don’t know if you have a Trello account. – I do, but I can’t remember what’s in it, so I’m (laughs) not sure
I want it to come out. So I’m gonna do my personal email, and we’re gonna see what shows up. So I go into, is Gmail up here somewhere? – It’s in Google. – Google. And then?
– And then you got Gmail. – Gmail. – Looks like query thread. And maybe search for something. So the q is a query. I believe if you hover over the q, it should kind of give you a doc string. We should probably do a
better way of exposing it. But you can kind of see
the docs are in line. – Okay, yeah, that’s cool. Okay, let me look at my inbox over here so that I can see what’s
in here to look at. And let’s query for, let’s see. I’ve got some marketing stuff. Let’s look for circleci. – Oh, nice. (laughs) – And then– – Okay, so let’s pull up the threads then. – Threads. – And we want it to be expanded. And this is another
area that we’ll probably clean up a little bit. Now we wanna get the messages
inside of the thread. – Okay. – The snippet is fine, I guess. – And that should be enough
to see some messages, right? – Yeah. – Okay. – Fingers crossed anyway. Yeah, there we go.
– Cool. Where’s the subject line? Let’s pull that out. – So if you go under payload. – Payload, here? – Yeah. So now you’ll see, ah, yeah. – Subject. Okay, and so, that’s the subject, and I’ll just bring my
email over real quick. Here’s the email that we
just pulled out, right? So that’s super slick. – Yeah and the nice thing is
actually the subject field doesn’t exist in the Gmail API. It’s actually just a list
of headers that you have to fold over and search through
a subjecty looking one. But we’re actually able
to add derived fields on top of the API to kind
of start to clean it up, and make it the API that
you would want to have. – Yeah, but this is slick. This is like really, really cool stuff. – By the way, if you
go to listUnsubscribe, and you grab the http or the mailto. See if circleci gives you. Oh, they’re not good players. They don’t give you a way
to unsubscribe automat, oh, there ya go. Okay. So, yeah, that’s if you wanna unsubscribe, you just send an email to that, and that will unsubscribe your
specific email from circleci. – Huh, that’s pretty, pretty cool. And you can see the
power of this too, right? Because then if we come
down here to mutations, can I like send an email to somebody? – Yeah, sure. – All right, let’s do
it, let’s send an email. I’m going to send an email. I’ll send it to my Gatsby
email so I can also see it. And the data that I’m
gonna send is a subject. The subject is going to
be sent from OneGraph. And then we’re gonna send a body. – You can fill that out in
the left if you wanted to. – Oh, yeah, I can, can’t I? I needed to fill out the to. So let’s send it to… – And just tab. – Do we need anything else or will it automatically fill out the rest? – Let’s remove out the thread ID, but I think everything else is optional. – Okay. – And then, now we need to select some result fields from it. – And do those, let’s see,
does it show me those? – That’s under message, yeah. – And let’s just bring out the, I guess the snippet is fine. And that’s it, right? I can just send that? – This may not work. Yeah, so what happens
I think in this case is we actually need to have
write permissions for Gmail. And by default, the Data
Explorer only has, oh. – It looks like I didn’t
give it a from field. Oh, insufficient permissions. Okay, so I would need to
grant additional permissions? – Exactly. And we don’t actually
request those permissions inside of the Data Explorer,
just to keep it safe. – That makes sense. – But inside of your
app, you can request it. – Okay, cool. You can see how much you
could do with this, you know? You could build your own email client without ever having to
worry about handling email. That’s a pretty slick way to do this. – Yeah, it’s not bad. – Well, cool. So what we were gonna do today, is we were gonna just
build from an RSS feed. And we thought it would be
fun to do two RSS feeds, and just kind of show how that would work. So the first one is we’re gonna pull in Front End Happy Hour. And I’m gonna do that
by getting the RSS feed. And we’ll drop that in here. And I’m gonna name this one. So we’ll just call this
Front End Happy Hour, or a short version. And then, out of this side
we’re gonna get the items, and let’s just start with the title. That’s a long title. – (laughs) Yeah, RSS feeds
are not super uniform. Some people put the entire
content and their whatnot. – Yeah, so they’ve got
the title of the podcast. I wonder if they put… Yeah, this is good. This is all fine. So we’ve got a link to the podcast, we’ve got their their title. Did they even put the names
of the things in here? They didn’t, did they? No, they did. – Maybe under, yeah. – Hmm, yeah looks like it’s
getting pulled out of summary, for some reason. But that’s all right,
we can work with this. Let’s see, did I do… – The content is usually empty. If you do enclosure. And let’s just get all three of those. So, if they’re nice, then that’ll give us a link to the mp3. – Yep, so that’s perfect. And what else do we need here? Do we need anything else? I think that’s all, right? – I might go to, actually if you pull up
the image above item. Let’s get the URI for it, that way we can show like a
preview of the description. Okay, so that’s the
picture for the podcast. – Okay, and then we can do the same thing. We’ll name that one, and so,
the reason that I’m naming it is it’s gonna change what comes back here. And that means that we
can take all of this, and oops, and create another one. – You wanna make it a fragment? – Ooh, yeah, that’s a good call. So let’s do a fragment. Let’s see if I remember fragment syntax. Fragment, let’s see, RSSFragment on, what type is this? RSS2Channel. And then we’re gonna take
all of this and that. – Braver than me. (laughs) That was a good job, though. – (laughs) We’re gonna do a RSS fragment. And I think, if I did
that right, it works. Okay, so next, we can
do our other podcast. We’re gonna grab the React Podcast. And I’m gonna take this, and
then we’ll do React Podcast. And we can just copy/paste all of this. I forgot to do that. So drop this one in here, and
then we’re gonna take this. And then you’d said we need
to drop the HTTP for now. – Yeah. – Replace this here. And what we should be able to do then is collapse this one, and now
we’ve got the React Podcast. And that is super cool, because what we’re gonna be able to do now is build like a mashup app, that’s gonna pull in one
or more different podcasts into a centralized feed. Which is pretty, pretty slick here. Let’s talk about how we
actually make this happen. So I have my app. Let me clear here. Okay, so I have an app
that we’re gonna build. Let’s do gatsby new. Did you have a starter that you used when you were doing
proof of concept on this? – Yes, I just went to
the Gatsby repository. And under examples, there’s the gatsby using
source graphql example. – Okay, examples. And then using source graphql. – I think there’s source
in there somewhere. Yeah, using gatsby source. – Got it, okay. Oh, oh, yeah so… Perfect, all right. So let’s just do this then. Let me just start a new site, and I’ll start it from the hello world, so that we can kind of do the whole thing. I’ll do
gatsby/js/gatsby-starter-hello-world. And if I spelled everything right, that should give us a podcast mashup. Kay.
– Pretty slick. – And now we’re doing yarn
install on the dependencies. We’ve got a couple comments
coming in from the chat just talking about how
cool this all looks. Which I wholeheartedly agree. All right, so let’s get
into our podcast mashup, and we will open that. So in here, what we can
do is start by installing that gatsby source graphql,
or I’m gonna use yarn. And over here, we can
create a gatsby config. Now we get to see how well I
remember how to write all this. – I’m gonna look at, I have an example of doing this earlier. So let me see. – Okay, so let’s go look at
the gatsby source graphql. So this is one that is super exciting. Effectively what this allows us to do is any GraphQL API, rather than having to write a custom wrapper for it, we’re able to just pull it straight in. So for example, for the Star
Wars API, which lives here, all we have to do is give it a type name, give it a field name to query under, and then tell Gatsby where to find it. That’s because it’s unauthenticated. In GitHub, we need to authenticate, so we also pass in headers
within a bearer token, and if you need additional things, you can do that as well. Or you’ve got like a
hardcore custom option where we use CreateLink to do ApolloLink. It looks like we aren’t
gonna need to do that. Am I correct in assuming that? – Yeah, we can just do the,
start with the API example. – And the API example that
I would find is, let’s see, how do I find my? – All right, so we need the app ID. – Okay. – Let’s go into the (mumbles)
fig and paste it in there. (mumbles) in just a second. The URL is going to be
https://serve.onegraph.com/dynamic. And then there’s a query
parameter of app_id. And that’s just set to your app, yeah. And the dynamic, so the idea
is we actually allow you to store persisted queries. And so the cool thing
is like that RSS feed that you just built, that query. you can actually save that to an endpoint. And so now you just hit
that (mumbles) anywhere, like curl or whatever, and it will actually execute that query with whatever variables you pass in. And you’re good to go. It’s pretty cool. – That’s very cool. So for this now, do I need to give it a bearer token or anything? – No, you can do that if
we were to, for example, go into like pull Gmail
into your Gatsby site. – Oh, but in this case,
we’re just doing RSS, right, so we don’t need anything. Got it. Okay, so then I need to
give it a field name. So we’ll do type and
that’s gonna be onegraph, or I guess I better. And the field, is it fieldName? Where was it? Oh, god. Here, fieldName, yeah. – Oh, yeah. – Okay. And just to double-check
one more time its URL. Okay. – And typeName. – TypeName, all right. Good thing you’re keeping honest. – Was there a fourth option in there? – There’s a refetch
interval that’s optional. I don’t think we need that. So, with that being said, what I should be able to
do here is yarn develop, and that’s gonna get us set up with our local instance of GraphiQL. And if I look under this
local instance of GraphiQL, I should be able to, come on little buddy. There we go. I should be able to then
look into the schema, and we should see OneGraph in here. – Yeah, so here it is. So now I can just start making queries. And what I think I’m gonna do. – So we’re gonna hit an error here. Let’s go ahead and hit it first. We’ll fix it right after you hit it. – K, what am I trying to do? – So what’s gonna happen
is we haven’t set up the course origins for this. – Hmm. – This is your browser that’s going to be, actually, who makes the
GraphQL call in this case? – In this case, it’s gonna
come from the browser. So it’s gonna come from local host 8000. So yeah, that’ll fail for us, won’t it? – Yeah. – However, I’m not seeing
the, oh, deprecated fields. So I just gotta jump in here, right? – Yep.
– Okay. – Yeah, unfortunately, there
isn’t a concept of beta. So, our progress is
deprecated beta, public, and then deprecated. That’s the lifecycle of the field. – Gotcha, okay. And so then what I should
be able to do is over here, I can, I think, just take all of this, and let’s go back over here. And I think I can just, let’s do this. And then I’m gonna take these. – Alright, okay. – Unknown type, oh yeah. Because everything gets prefixed. – Yep, which is how it should be. Cool, yeah, I get to work. – So that’s pretty, like that’s slick. It took us all of five
minutes, including my typos to get this integrated, which is, I don’t know how many times
you’ve attempted to do this without GraphQL (laughs). – It’s nice, yeah. – Yeah, this is really nice. So then in our pages, we can, how should we do this? We’ll just do a div. Or I guess we can maybe
start with like a list. And this is gonna be, let’s see, we wanna get the query, so we can do export const query. And the query that we’re going to export is gonna use graphql, not gql. – And what is the difference between the gql tag and the graphql tag? – So in Gatsby, we have our own GraphQL extraction, since we run at build time. So the graphql tag in
Gatsby is actually a no op. Because what’ll happen is at build, we’ll go find all of
these and just rip ’em out of the source code, and
execute them ahead of time, and then embed the data
and the build (mumbles). So the gql tag would be used
if you actually wanted to run these at client runtime. – Gotcha, okay. – So then, what I’m gonna do in here is I’m going to take the
query that we just wrote, I’m gonna drop all of that in here. And that should do everything
that we want it to. So let’s get our data out of the props. And then what we should be able to do is do data onegraph. – .fehh. – .fehh. – Yeah, let’s start by
just maybe dumping this. .rss2feed, and then we’ll do… Let’s see, that’s gonna be, the rss2feed, we get an image and items. So let’s do items. And then I’m going to just map over those. For each of those, we’ll return a list item that at first, is just going to have, let’s do the, hmm. The title is not great on
these, but we’ll do it anyways. Let’s do item.title,
and that’s gonna be it. So in running that, now,
if I go to localhost:8000, I should see all my Front End
Happy Hour stuff just listed. – Fingers crossed, ooh, all right. – All right, and so, that just happened. So then, what we can do is, I feel like maybe the next
step here is to figure out how to get at the, get
these into alphabetical, or into chronological order, and include some details, right? So what we’ve got is we probably need some kind of a helper function. So let’s get weird real quick. So let’s do sortPodcasts,
and then we’ll get our… How do we wanna do this? Probably just like an
array of podcast maybe? No. – Yeah, I think that’s
probably a good idea. – Yeah, that’s– – Sorry, of items. – Oh, yeah, so the only
problem with that is that we’ve got the image and
title outside of the items, so we almost need to throw this object in, and then attach these to each item so that we can display that as each entry. – All right. – I think. Let’s see how it goes. (laughs) So we will do podcast array. And then we map over that. And so that would give us our podcast. And then our podcast has, let’s do the image is gonna
be the podcast.rss2feed.image. The title is going to be that same thing. And then we’re gonna have the items. And so, I think we can
just return items.map. Oh, wait. So we’ve got each podcast. Oh shit, we need to like
reduce this, don’t we? – I think so. – Cool, all right. Now we’re definitely gonna
see what I don’t know about computer programming. So the reducer has an accumulator, and then a handler, and then a initial value which is gonna be an array in this case. Each of these we’re going to, we’re gonna return an array that includes the existing items, and then we’re going
to map over the items. And we want to do the item as well as the podcast title and image. – I think the arguments for reduce, I think it takes both the
accumulator and the podcast. Is that what this
JavaScript syntax is saying? – Ooh, that’s a great question. (laughs) Let me look this up. Let’s see. It takes the accumulator
and the current value, and then– – Return to the next state. – And where do you set the initial value? – I think that’s an optional second. So you did it correctly. I’m just wondering about, see how the function takes two arguments? – Yes, you are absolutely correct that I should have done it like this. – Perfect. – Yes, okay, okay, cool. So I’ve got my accumulator, I’ve got my podcast items,
and we’re gonna do that. And I am going to then
try to, let’s take this. And we’re gonna run, what do they call that function? SortPodcasts. We’re not actually sorting it. – Yeah, we probably wanna
sort it at some point. (laughs) – So for now, let’s do data.onegraph.fehh, data.onegraph.rp. Then I think if we do this, we should be able to do something
like item.podcast.title. Did it explode? There’s no way I got that
right on the first try. Okay (laughs) good. That’s what we needed. So cannot read property
title of undefined, which is this one. – Do you need a return
somewhere, or is that all? – Yeah, so this is all returning. I do need to just log
out the items and see what are we actually creating? Let’s take a look at that. So if I dump these, we get our array, and the array is two items, which means… Oh, I know what we’re doing wrong. We need to spread this as well. Because then it becomes a flat array. – Oh, yep, wow. That’s not bad. – Okay, so now we’ve got
the Front End Happy Hour. And then down below we
should see the React Podcast. Way down below, apparently. Yeah, React Podcast. And so, then we can actually do our sort by just doing a .sort. And then we can take item, and we didn’t pull out a date did we? – No. So that is on, let me look it up. The pubDate is a field
of item, under items. – Under items we get pubDate. – Yep. – And that is perfect. We can sort by that. So we’ll add pubDate here. And then we will add a sort
down here for, let’s see. Oh, wait, sort has A and B. And then we need to do a.pubDate is greater than b.pubDate. We can just return that. And that may not work, let’s find out. – The return of sort, is that a undefined? ‘Cause I think it does it in place. Let me just double-check. – Yeah, I might be making stuff up. – No, no, no, that looks right. So numbers that sort returns a new array. – Yeah, and I think the shorthand
that I was trying to use was just getting oh, return a minus B. Oh, yeah, okay. That’s why, because we
have to return a number, and what I’m doing is returning a Boolean. So that wouldn’t sort anything. So with that in place, maybe. – And do you wanna put maybe the pubDate in the HTML so we can compare? – Yes, indeed, I do. Let’s add it. Where is it? Here. We can do item.pubDate. – Is this going from– – This is ascending
order, so let’s swap that. We’ll do b, a. And Front End Happy Hour. Are these all? – Let’s see, maybe React Podcast puts the pubDate in a different field. – Mm, yeah, good idea. Let’s actually look at that. So here’s Front End Happy Hour. Here’s React Podcast. So React Podcast should be
giving us a pubDate at 153, so let’s poke at that and see if, 153. – Yeah, see all Front End. – Okay, so I’m clearly doing this wrong. – Is there any React at all in here? – Yes, and it’s still
getting stuck at the bottom. Which, oh, oh, oh. I think I know why. It’s because we’re running the sort, not on the final array. We’re running it on the
sub-array that we’re creating. So that’s just me not
knowing how JavaScript works. – They’re very neatly
sorting the sub-array. – React, React, Front
End Happy Hour, React. Hey! So that’s pretty slick
that that just worked. So then from here we can go
to try to make it look nice. Let’s see, let’s do, dump this out. And we can put in, let’s do, what do you think? An image, and we’ll put
in the item.podcast.image. – .URI or URL? One of those two. – Oh, is it? – Image– – Image.uri, yes. – Yeah. – And then we’ll use the
podcast title as the alt text. Okay, my guess is that it’s gonna look all sorts of wild when we first put it in, but that’s all right. – It’s gonna look wonderful. (laughs) – Let’s do the date. This little handy library that I saw Ryan Florence talking about it. So let’s see. Master? And this gives us just some
helpers without having to actually do like moment
or something like that. But I think, oh come on. Just show me how to take a time stamp. – We can just do a new date
and pass on the time stamp, that’ll give us a date. – Yeah, that’s probably
easier than trying to learn new software on the fly. (laughs) So let’s see, if we do it as a, or I guess we should
probably make this into some kind of a title. So we’ll do an h2, and then we can do. Can you just do like, it’s just plus new, or not plus new date, just new Date. And then item pubDate. And then is there like a toDateString? – Yeah, I think there’s like a toLocal. So let’s see, dates, toLocaleString. Yeah, toLocaleString is
probably what you want. – All right, so let’s just
see what happens if I do that, because I cannot (mumbles). Ooh! Maybe that’ll help. Yeah, that’ll help. – Okay. – Okay. You know, that is good enough for me. So I’m not even gonna worry about that. Let’s do, make that even
a little bit smaller yet, ’cause it’s pretty aggressively large. And let’s do the title again. So item.podcast.title. And then down here, we should
be able to just drop in this description as a paragraph. And then we get a nice little mashup. I mean this is far from a gorgeous app that you’re gonna take to production, but with a little bit of styling this is gonna look pretty slick. – It looks (mumbles) to me. – And what’s really cool is
maybe what’s another podcast that we could add in here? Like what’s one that you’ve
tried that you know works? – I really like the BBC
Friday Night Comedy podcast. – K, and let’s do this. – Under Subscribe. Should have an RSS down there. – Okay, so let me take this, and then, just to kind of show how
powerful this actually is, let’s just add it in. So I’m gonna take this,
I’m gonna drop it in, and hopefully all the fields line up ’cause that’s gonna be… Okay, and then all we have to do up here is include it. And so, what should
happen, fingers crossed. Uh oh.
– Uh oh. – Each child should
have a unique key prop. Yeah, that’s just me being bad at this. But yeah, so check this out. Now we have the BBC
Comedy is now dropped in, and it took like zero code changes, which is– – Oh, wait, we have to
add one more thing though. – Okay. – Let’s add in an audio tag. – Ooh, yeah, let’s do it. All right, so the audio tag
is gonna be in GraphiQL here. We already have it. We have the enclosure and the URL. So let’s plug this in. I have to look this I think. – Yeah. (laughs) – I haven’t done one of these in, I actually don’t know if
I’ve ever done one of these. All right, so we’ve got audio,
and then we want controls, and the source is the item.enclosure.uri? – Hm mm. And then, we wanna put
some content on our URL, in case the audio tag isn’t supported. – Mm, okay. So here’s the end of my audio tag. And then inside of it,
I’m going to put in… Okay, and then out here. – Ooh, ooh, ooh. – This is, you gonna play? I think I might’ve broken
it ’cause I hit that button. – There are probably a lot
of them loading right now, so if you scroll down. – Yeah, and I think
probably this is something that we would wanna work
on lazy loading that, as opposed to putting those
directly into the browser. But yeah, this is slick. So yeah, we just built– – [BBC Narrator] Brought it
by advertising outside the UK. – Incredible. – Can we deploy this to Netlify now? – Yeah, let’s do it. Let me, let’s stop it in here. Oops, let’s actually stop it. Nope, not that button. And let’s go to Netlify. Am I on my account? Let’s see. K, I’m on my account. Let’s switch to, yeah, new site from, I guess I better push it. K, do I have? Yeah, I do. I have Hub installed so it
just does me favors like that. – That’s awesome. – Let’s see, [email protected]/me
podcast-mashup. What? – I guess maybe it’s even smarter? – Yeah, it adds the HTTP
unfortunately, so you gotta… Git push origin master. Hey? Oh. And that’s just me being bad at Git. I’m gettin’ there. (laughs) – I wouldn’t have been able to do it from off the top of my head. Impressive. – Okay, so, we’ve got that. And then I think I can do git browse, which will take us straight there. Okay, so we’ve got this. And so now, I can create from GitHub. Let’s do the, Netlify
wants access to my account. That’s fine. Here. And wait, why is it
installing to everything? Whatever, it’s fine. I trust you, Netlify. (laughs) K, so now I should be able
to do this podcast mashup. K, we’re gonna run it with Gatley build, it’s a personal site. Let’s deploy it. So, what I love about this is so far it feels like we’ve
almost written no code, which I just love this. – Pretty slick, huh? – We’re building, I didn’t
try to build this locally. I don’t think we did anything, we didn’t touch the window
object so it should be just fine. What is gonna break, though,
is we didn’t set up the CORS, so do you wanna do that
actually while we’re in here? So the actual site is going to be. Sorry, I’m trying to figure out
where this site is gonna be. It’s gonna be at, can I see it? Site settings, here. So this is my actual site. So that’s where we’re gonna go, so I need to go into here. And then for CORS, I just
drop that in, is that right? – Yeah, yeah. The only thing is, since
this will be rendered, so Gatsby is doing this
at build time, right? – Oh, so it’s not gonna matter anyways. – Yeah, but if we wanted to hydrate this and turn this into an app
so that it started with the pre-rendered stuff, and then it took over on the client side, then that would be what
we would want to do. – Mm hm, yeah. Okay, so, how we doin’? Site is live. So we can then go out to our deploys. We can go take a look and it is built. – Very cool. – Pretty slick, and so there’s
a lot of things that I, like I just saw these
images took a while to load. I’d wanna hook those into Gatsby
Image so that we could get the lazy loading and
other benefits of that. We’d wanna be lazy loading the
audio file so that we’re not downloading, what, 91 podcasts
(laughs) on every page load? But, like for what has this been? Like 45 minutes of work,
probably 40 minutes of work, where I think we’re
doing a great job here. All right, so you wanted to
show us something cool, right? – Yeah, so, this is not
released to production yet, so I have to run this
off of a local version. If you go under the Data Explorer. – Under the Explorer. – And go ahead and erase your query. And you try subscription instead. – Here? – No, under Data Explorer,
just type in subscription. We can’t use the Data
Explorer for this yet. I haven’t added support, it’s so new. So if you close the Explorer. – Close the Explorer. – Yep, and now explore under subscription. I used the word Explorer. I just meant list the
fields under subscription. – Oops, hold on, I’m doing this. The hell is the shortcut to? – Control space. – Control space. K, I feel like that’s what I’m doing. – Or you can (laughs). – Whoa. Okay, my computer has just like done. I’m gonna reload the page. Something weird just happened. Okay, so we’re going to Data Explorer. – Mm hm. – Oh no, did you trigger some– – Did I break it? – I think you might’ve broken it. – Oh no. – Well, it’s good that
the bug report on our side will fix that. I can just take over and I’ll show you, but let’s go to Netlify first. – K. – And I think what we can do
is, you can go to settings. Let’s just go to, yeah,
to Deploy settings. And then there should be a build hook. And let’s add a build
hook, and give it a name. And let’s say like, yep. – Right? – Perfect, yeah. And if you copy that over to me, and I will take over, I’ll share my screen if you’re up for it. – Yep, go ahead. I think I need to stop
sharing first, don’t I? – Yep.
– Yeah, go ahead. – Okay. – Okay, and then I need
to move this over here so that it’s visible. Yeah, okay. So I can see that, let me share or get this chat over to you. There you go. – Okay, so, what we can do, so what I was trying to show you is that we now have support
for some subscriptions. Like this is kind of a new
feature we’re rolling out. And the idea here is just like before, you can come in here and say whenever there’s a new Gmail message, I effectively want to pull off the subject and attachments and whatnot. And you’ll automatically
get kind of notification. We take care of all of the crazy Google Cloud Pub/Sub architecture stuff. We don’t support WebSockets yet. The only delivery mechanism
is the webhook URL. But, what this would do right here, is every time you got an email, it would actually trigger a
new build of your podcast site. It’s probably not what
we wanna do in this case, but that’s how easy it is to tie together. What I can do is actually RSS new item. So I’m gonna say whenever
there is a feed URL. Let me hook us up here. I’m gonna grab the link from the chats, so we’ll do the React Podcast. Alright, so whenever we have a new item on the React RSS feed, then we want to actually hit
the webhook URL from here. And in this case, Netlify
just kind of ignores any of the body. It doesn’t care just as
long as you do a post, it’ll trigger a new build. But if we were building a server-side app, we might actually want
it to tell us for example what’s the title of this item, what’s the content of it,
what was the pub date, that kind of thing. And so, I’m gonna go ahead and run this. And I get a subscription ID back. This is how I’m going to cancel it later. And I’ll just run it a few times. And if we go back to your screen share, I’ll stop sharing my screen. And if you want to actually share yours and share the Netlify window. – Yep. I’m showing it on the screen, on the here. No, that’s not what I wanted. Here. Gonna share this, and okay. So we’re back on deploys. – Yeah, and give me one second here. So I’m going to also hook
up the other podcast here, since there wasn’t enough new items yet. So we’ll pop in a new one,
and run that subscription. And let’s see. – And now the likelihood
that either of those are gonna publish while we’re on this call is pretty low, so we
might have to fake it. – Yeah, so I actually added
a new podcast feed as well, so it’ll see those as new. Images and let’s see, (mumbles)
the description payload, and hopefully it should have triggered. Yeah, they can see it building there now. And now the idea is, yeah,
we can just basically say, anytime there’s a new item now, we just want to automatically
rebuild our Gatsby site. But even if we were to
build like a podcast app where the client took over and rehydrated with the most up-to-date data, this way we basically have,
we don’t have to do anything, and Gatsby itself is always
gonna keep up to date with the most recent content,
server-side rendered. And it’s only in the case
where there’s that’s kind of small gap between Gatsby being rebuilt, and the client loading it,
that the client will actually take over and do anything meaningful. – Yeah, that’s pretty slick. I feel like this is, the amount of stuff that
we were able to do here in being able to get access to data, being able to get that data into a UI, being able to get that UI
on screen and then deploy it with webhooks for live rebuilding. 1999-me is just shaking his head and like no way is this possible. (laughs) – Not bad. And being able to explore the
schema and see everything, it’s a nice mashup of
different technology. It comes together really nicely. – Yeah, I definitely agree. Well, yeah, Sean, this is amazing. Is there anything else
that you wanna show off before we wrap this up? – No, I think that’s
probably it for today. There’s lot of things that are rough around the edges obviously,
but we’re working on it. Just curious if there are
any comments or anything that we should address? – So far nobody has asked any questions. If anybody who’s watching
has questions about OneGraph, now’s your chance. – If you have some suggestions for API that we should bring in here. So if you have like a Trello
card and you wanna render those inside of Gatsby and automatically
update it or whatnot, it’s all as easy. It basically turns the
internet into Lego blocks. – Yeah, and so, maybe a couple questions just to get people started. What’s the pricing for OneGraph? – So right now, most of it is free. So there are some premium features where there’s usage-based, so it’s
somewhat reasonable here. If you’re not just totally
hammering our servers then it will usually be free. It’s free for opensource. We actually offer some premium
features where we handle, for example, rate limiting. One of the biggest challenges
whenever you’re dealing with for example the Twitter
API is, or Salesforce, or lots of these other
enterprise APIs is rate limit. Typically, you’re in the
process of going and getting, you’re making an API call
to get some data back. And really you should
be checking for errors. You should be checking
for authentication errors or not found, or rate limits. But usually we follow the happy path. We don’t do that. And even if you do check for rate limit, it’s really hard to kind of figure out you need to kind of like
exponentially back off, right? So you back off a little
bit and then you try again. And now you kind of like
have this asynchronous slow, or just like sleep behavior
which is challenging. And then also to do that
across your entire app. You might have multiple workers or users that are hitting the API. And so we have features for
that where, for example, we allow you to say I want
to automatically paginate through my entire Gmail, for example. I want to download all of my emails. And whenever it’s done, I
want you to store it in S3 or Google Cloud as a JSON blob. And let me hit that as hard as I want, so I don’t have the rate limit. And then ping me here whenever it’s done. And by the way, while you’re doing that, never let my remaining API calls get below 1000 for the hour. So that way I always have
enough in case I need to do a live interaction with a customer, or I need to use my email. I never locked me out of my email. – Right, yeah. – And so, you can simply express that, you can tell that as like a header saying here’s my query, and
we’re far enough for that, here’s the strategy I want you to use with the rate limits and whatnot. So things like that. Things like integrating
with enterprise encryption. So things like (mumbles) on-premise stuff. That’s typically where
we actually charge money. – Okay, that’s awesome. And so I have a question. Let’s see, so the question here is the secrets are stored in the
cloud and encrypted at rest. So he’s asking what cloud,
and how is it encrypted? – So we store it in our database, in our (mumbles) database,
and Google Cloud. And it’s encrypted with
an AES 656 mechanism, per row mechanism. And we have a regular rotation setup for the encryption keys
as well, and the rows. The idea is whenever we
actually execute the query, we actually have to decrypt it and send that to the upstream provider. Whereas if we integrated
with (mumbles) or on premise, for example, we can do
it in such a way where the external world, OneGraph itself would never actually see those naked credentials. – Okay, very cool. Awesome. That’s the only question
that’s come through. Sean, thank you so much
for your time today. – No, thank you, man. This was a blast. – Yeah this is a lot of fun. I look forward to building a
lot more things with OneGraph, and I’m very grateful
that you did all this work so I don’t have to. (laughs) – All right, cool, man, cheers. – Take care, thanks so much. – Thank you, bye bye.

2 thoughts on “Build a Podcast Mashup App Using OneGraph and Gatsby — Learn With Jason

Leave a Reply

Your email address will not be published. Required fields are marked *