🚀 Add to Chrome – It’s Free - YouTube Summarizer
Category: API Integration
Tags: APIsAuthenticationDevelopmentGraphQLIntegration
Entities: Auth GuardianGitHubHasuraNetlifyOneGraphSean GroveSpotify
00:00
[Music]
00:17
[Applause] [Music] [Music] [Music]
00:47
[Music]
01:32
[Music] [Applause] so [Music]
01:54
[Music]
02:35
[Applause] [Music] so [Music] [Music]
03:05
[Music]
03:38
[Music] [Music]
03:59
[Applause] [Music] [Music]
04:47
music fades away we are now live welcome to the dayton api show i am super excited to have the one and only the og uh sean grove joining us today sean how you doing i'm doing quite well thanks for having
05:02
me yeah thank you sean is a what do you call that when you have like a batter in in baseball that's like the one you can count on or it's like always part of the rotation uh yeah you're asking the right person definitely i'm huge in the basement
05:19
i think a pinch hitter pinch it there we go uh you are like the pinch hitter of of speaking tracks because basically i don't know if there's been a single conference where i have like needed to feel a speaker or whatever and i haven't known the a you would say yes and two it would be an amazing talk and uh
05:36
i really appreciate that so thanks thanks for coming for this one you put together good uh conferences so it's always nice to be able to speak with them they're fun so uh sean you have you're from one graph which like why don't you give
05:51
people kind of the breakdown of what one graph is doing because it's like it's like a ton of things that it does so yeah sure the the basic idea um is pretty simple and i think becoming
06:06
much more common these days but you know you have you know every app is touching tons of apis these days right um just hundreds and hundreds of apis out there across the ecosystem uh and each of them kind of has its own um
06:22
you know approach to authentication data layout all that sort of stuff and every developer has to go through and learn that uh bespoke setup for each of these apis um each api kind of has to build its own tooling its own developer experience um so the thought with one graph is
06:39
what if we could kind of normalize the way that you access these apis not necessarily that you normalize the data underneath it right every api does have a unique data set but uh we wanted to make it so that it was trivial to access these apis so things like auth just went out the the window
06:54
um you know exploring the data that was available in there so you can basically put a parachute a developer into an api and within about 30 seconds they would have a firm understanding of what data was available and potentially even kind of have it running in production
07:11
nice yeah because i think i think one of the canonical demos that you used to give was essentially putting together like a github and spotify flow that would essentially run a web app that would you could then push a button and play spotify like on
07:28
your phone or something it was kind of uh exactly yeah with wizardry moment but but not right because this is a it's basically because the thing that you've often had passion about in the past and and i think your other things you're doing tangential to
07:44
one graph have been a lot about opening up developer exploration yeah would not be fair you'd say or yeah i think so and then like part of the part that is born out of the frustration of um you know most developers can very easily
08:01
articulate the data that they want from an api right you take salesforce for example which um has quite a large api surface area you know you can say look i for this app i need to get a list of all of my sales opportunities i need to know how big they are what stage they're in in the
08:16
name but you can easily articulate that but turning that into working code uh you know that handles off and everything related to the salesforce ecosystem is probably several days uh possibly weeks of work if you haven't used uh
08:32
salesforce before and the thought is that it isn't inherently difficult right it's just kind of that most of the um the roadblocks that are there are kind of incidental right oftentimes it's not kind of given the attention um that it deserves
08:48
and then graphql in particular i think provides some really nice underlying abstractions right if you find the right abstractions underneath it makes building a you know a wonderful developer experience much much easier so that that's kind of the the thing that has driven me for quite a
09:04
while now yeah that's i mean that's great so um now i wanna i wanna touch on a couple of things here too so with that being kind of the drive for you and then like sort of
09:21
you know exploring ecosystems of apis connecting together making it easy to consume easy to sort of stitch together to now your your recent move if you will or or
09:36
yeah how do you want to call it where did you go and how did this kind of come about yeah sure um depending on you know what level of detail you'd like to go into but we started um i had the i built the first prototype for one graph you know this the scrap kill api that could reach
09:52
into lots of different apis and uh stitch data together and i think january of 2015 and it felt like it was very exciting but if you think about building a business on top of that um you know the a lot of the concepts were very very new
10:08
right the the amount of customer education that was going to be required was tremendous and so i thought i better put this aside and i think you know maybe in five years it'll be interesting um but you know it was an idea that kept coming back and inviting me so around 2017 i started working on it in earnest
10:24
and then we started the company in 2018 so that was full time from for about three three and a half years and um you know the the landscape changed remarkably in that time uh i think a lot of the ideas are now just part of the zeitgeist you know you
10:40
have um apollo federation and things like take shape and steps in so people really started coming around to this idea so i thought you know that part of the mission is pretty secure right people are definitely going to understand this idea
10:56
of being able to bring together despair uh district apis into one cohesive whole so then what's the what's the next challenge right and i think a big part of that is um making it so that
11:11
you can vertically integrate it right and reach scale so we you know good friends with uh the neglify founders and uh we chatted with them for a while and we built some proof of concepts um of you know what would a
11:28
a netlify one graph partnership look like and as we started to build it out it was pretty exciting um i think on both sides but especially for me as i one of the nice things is you know netlify has this huge user base um and
11:44
it's kind of a a noun so one graph one of the challenges one graph is you know it's like a conjunction it's an and so it's like if you want a salesforce and uh github or something like that and so you kind of want like two things you need two things for one graph to be
12:01
useful and here's netlify is now one of those things so if you want to use netlify and something else so that's simplified some of the uh market positioning uh challenges for us but also like uh the stuff that we could
12:17
build which is totally different whenever you're on the inside of a company like that versus on the outside yeah i mean like one graph you could say exists in the edges like if you if you really go full graph uh there um because then you know
12:34
nullify being one of the nodes i'm curious if you're even able to give a little more detail so when you're talking about some of the interesting ways that using one graph inside of uh or with with fuller integration with a tool like
12:50
netlify what are some of those kind of exploration spaces you're looking at is that is that like privy information that's coming or is it something you can share like a little bit of the it's it's like four notes mostly uh you know uh private but i'm about to share some some
13:06
you know high level uh notes so you know like i said i mean just goes back to the original thesis right that anyone who's building on netlife almost inevitably is going to be hitting some api right it's uh if you look at like all the sites that are deployed only a very small number
13:24
are completely isolated from any sort of api and so the thought is you know can you make it so that um as part of the experience of developing a application on uh netlify can you make it so that it's both transparent to read and write data to these apis
13:40
um to get the data into the hands of the front-end developers or to the designers even right so that they have much more flexibility they can go much further in the product development process and the one in particular that i'm excited about that i think is
13:56
challenging um for most of the api world you know mahasara accepted probably is the real-time data so being able to make it so that you can actually securely and efficiently consume real-time data from all these different
14:11
sources on you know any really any of these uh like jam stack uh platforms like it's a really big challenge right now and i think that we'll be able to make that significantly like almost accidental where you'll accidentally start processing uh you know lots and lots of
14:28
uh high volume requests high volume sounds ominous but no i mean that that actually makes a lot of sense yeah because you're gonna be you're gonna need tooling in place that allows you to unify the api i mean the
14:45
unifi graphql api is something zera has been pushing for a while um that and it's something that that really does seem to be a unique problems set that graphql is is well designed to solve for um and so
15:02
there's going to be a lot of room there for different tools to work um do you have anything that's newer or anything that you would like to show off today that you're they've been working on lately or we could even just look at creating a hizura plus one graph um you know
15:20
uh remote schema join kind of thing play around or maybe you can just shuffle when graph does yeah anyway i probably showed it off no no so part of the the the challenge series um we actually disabled sign up so all the existing customers are supported um and what not but while
15:37
we move this over to netlify we've actually disabled new signups and so i have been getting a steady stream of emails from hustler users asking for uh hey i know that the disabled can i can i just get in um so we do try to accommodate them uh yeah
15:52
i don't know uh yeah i'd be happy to maybe just play with um you know uh generating some components or um uh seeing what it looks like on the hustlers side of things um yeah it could be it could be fun yeah let's let's kind of have a look at
16:08
what one graph can do maybe we'll get some creative juices flowing here and then we'll see if there's something that we can kind of merge with because one of the things that that i don't not a lot of service providers do in a great way is the instant graphql api uh for for existing data sets so whereas
16:25
a company may have an existing postgres database or bigquery they want to bring in to one graph and a more streamlined controlled access control kind of way um that's where you know hazura fits really well in that builds because it's able to say well like
16:41
one graph can work with non-graphql apis but it also works really well with graphql apis and so uh that might be interesting kind of fun thing to have a look at so let's let's let's play yeah sounds good uh do you want to drive
16:57
uh sure i'm i haven't do not have a one graph account but i can do it and you can show me what i'm supposed if you don't have one then i'll go ahead and uh i'll drive let me uh i don't think i have one certainly not with this account but
17:13
i probably have one back with uh let me put you on screen there i probably had one back with the uh graph cms days but all right let's do uh all right i'll let you play
17:28
okay so yeah we could do a few um examples maybe so i think one that might be yeah let's just do the initial data exploration then we can play around maybe with off guardian and see how that
17:44
relates to um hustler up which should be fun sure and then we can see where we want to go from there all right so it's just a new one all right so you know the idea behind one graph is effectively you know we have a catalog of apis that are
18:00
available for you to use and let me know if i should make this this larger or not and so let's say for example you wanted to use github github has a wonderful graphql api so i can come in here and say maybe i want to get some information about a user and i want to know their bio i want to
18:17
know the company that they work at and their their id we'll say let's call this one github user and then for this uh login you know it's parameterized so i'm gonna i can go ahead and hard code this and say yes
18:32
grow if i run this i'll get some data back um but i have to authenticate let me uh a little smaller and the idea is part of this is um for a set of errors we want to canonicalize them so you can see here that whenever
18:48
you're missing a authentication or an authorization we actually normalize this such that you can always look at the results of any response and say hey the query that we just ran or the mutation or whatnot was there something that we tried to
19:04
access that we didn't have access to so in this case you can see that there's an off missing off uh error here and it's for github so that's actually how this button here popped up so it just says let's go ahead and prompt you to log in
19:19
and boom there we go so now i actually have a some data coming in maybe i want to parameterize this and uh what's your github login motleydev
19:34
run that yeah and there we go so it's you know the idea is just to make it very very easy to exp explore the data or what not um and then you know the the next step is you actually want to use this presumably inside of some sort of application and so maybe i want to come in here and
19:49
say well uh let's generate a react apollo application and we'll just create a code sandbox here and i'll open this in a new link and this is going to load up and while it's loading up i'll just go over
20:05
here and you can see that actually it generates all of the boilerplate for handling forms uh for the query turning it into a visual component here so you can see here that uh first that it has a component
20:21
for our github user query um it has a form already and no data came back um because we're not authenticated inside of this application but that's actually already handled inside of this so if i go ahead and log in once again now i'm logged inside of this application and i can go ahead and run
20:37
this and you can see that now i have a full uh react component i can just kind of copy and paste inside of my application so it makes it the goal is to make it so that you actually have a clear path from you know what's actually available inside of this api exploring it playing with it getting
20:54
some data back and then putting that directly into production and this also handles things like let's go back in let's do a like one of the the bug bears of um graphql at least traditionally is subscriptions
21:09
let's do [Music] this let's say i want to subscribe to npm i want to get all of the anytime a package is published i want to know some information about it maybe it's id the readme the names and we'll get the total downloads last month for it
21:26
and once again this is just going to generate uh these two different components for us so i'll go ahead and generate a new code sandbox here and this will work with fetch view seltz you do it with curl if you'd like a lot of people using curl for graphql
21:44
these days and then so see down here we actually have the subscription component is still loading but anyway it just handles all of this for you so that you can kind of
21:59
you know it the goal is to make it so it's delightful to move from uh exploring an api to actually using in production that's uh i think the worldwide tour of just the basics um happy to also talk a bit about off guardian which i think
22:14
might be a fun segue here so yeah so the idea with off guardian is um you know whenever you are generating whenever you're trying to secure an api um or an application again as a human you can kind of easily
22:31
articulate the the rules right so let's say for example you should only have access to this page if you're a member of my organization on github right like that's that's how i do access control or uh you should be logged into salesforce and your official verified salesforce email
22:46
should end in the domain for my company something along those lines the the challenge again is actually getting you know finding those facts about you across the internet is very very the spoke right trying to figure out how to get the data out of salesforce or github or whatever it
23:02
might be but if you have this underlying api that is a well-formed graph and you can say i know exactly the query you know where in the query to find this information about you um and you know maybe run some transformational logic on it um
23:17
then it becomes much easier to actually elevate you know what would be hundreds and hundreds and hundreds of lines of you know comparative you know code fetching all this data and talking with apis and whatnot turn it into something that a human can read so for example um
23:32
over here what i have is a set of rules that anytime a user logs into any service so github salesforce whatever i want to run some rules and if these rules pass then we're going to affect the jwt in some way
23:48
so for example let's say um you know on github if you are if your login status is true then i'm just going to say we'll set the value of path github user and we have some built-in values so for
24:04
example uh we know where on the graph to get your uh github uh login and so you can see here that it's giving me a little preview of what is this jwt actually going to look like um you know if someone works with to login so if i log out of github you can see
24:20
that it goes away so uh this current role when someone is not logged into github this is the jwt that they're gonna see and if they do log into github then we'll see that this gets added here
24:37
and this is really nice so for example let's say i'm going to add a no one another one on github if you're a member of an organization called one graph then on hasura i actually want to set your default role to be one of admin
24:53
and you can see that here that actually knows like precisely how to generate the claims so that this works automatically with asura and maybe i want to you know i have an apollo setup as well so i'm going to say on spotify if your login status is true then on uh we'll stay on apollo i want
25:10
to add some roles of you know spotify user and i'm not logged in currently so if i log into spotify and there we go so i know how to do this
25:28
let's go ahead and actually also make it so that on netlify you can access the sales page and i'll remove this condition and then on express js um let's say you are an admin
25:45
so again so the idea is that you know these rules are really easy for me as a human being to come in and actually audit and say does this make sense for our application um or api and you know i once i'm happy with this and
26:00
i can preview it i can say all right this token will work with hasura it'll work with netlify it'll work with apollo and i don't have to worry about you know how does it actually get all this data it just knows how to transform these roles into a job that's usable across
26:16
all these services now you know there might come the point where um you know you you outgrow this right it's where it's cute uh it's a great way to get started it's really nice uh as a kind of bootstrapping mechanism but eventually your logic gets very very
26:31
complicated and we actually have a an escape patch here which is we'll take these and we'll actually compile them into two things the first is a graphql query so you can see here that this knows exactly where to find all
26:46
those bits of data that need to go into the jwt so for example if i added for example say github id and we'll do a built-in value of the github user id
27:02
you can see here that it actually knows to use your database id or maybe i want to change it to be your github email so it knows to add in your email here and then it will also generate some javascript which will take the results of that query
27:18
and you can see here that it actually will extract all of the bits of data you need and it will reproduce that jwt exactly in your own handler so you can use this to get started with your hauser application use it to lock down the permissions on the api and you can be pretty confident that if
27:35
you ever need to do anything more complicated there's always this very smooth transition path into you know taking this logic into your own uh own hands yeah and you can see how that becomes really really powerful especially in context of something like a netlify
27:52
where being able to simplify connecting off between these different providers is is really i mean critical um i'm trying to think if there's any kind of a quick demoy thing we can do here does
28:08
does one graph have a built-in connection to netlify functions no not not at all because what we could do for fun this is a proof of concept so what we
28:25
could do is we could actually utilize uh hizura for basically exposing a net life function through an action on on our api and then use the auth guardian to be able to give us uh sort of an axis so
28:43
we'll do something that needs to happen inside of the netlife function that need requires the proper jwt and we'll use hizura to essentially funnel the the jwt through to the nullify function and then
29:00
perform some sort of a behavior to the netlify function yeah we could give it a try um are you able to set permissions on remote schemas in hussera yet yeah i know that oh okay so maybe we
29:16
could use rules you can do raw based yeah yeah maybe we can just do something even simpler where we can add a mutation that will allow someone to control your spotify um my spotify your spotify inside of the
29:33
graph but only um you know if they have the the appropriate uh permission appropriate role inside of their jwt is that possible sure we we can try that we'll have to i'll have to have you actually probably talk me through some of the important pieces
29:50
so we can try to see what we can build here in 30 minutes to yeah i mean it's it's a risk but let's try it i mean why not i wasn't planning on it but yeah all right you want to drive for this part sure i will drive for this part and we'll see how far we get let me go ahead
30:05
and i share my screen here so i will show you wanna fire up a uh new house or or uh get your hustler where we can add in a remote schema
30:21
and i'll send over the endpoint so here is the graphql endpoint that you can use as the remote schema and one of the things that is a bit challenging here is our
30:37
schema is very very large it's something on the order of i think 80 megabytes of json um but one of the things we've just worked on in the past um two weeks it's not released yet is but it allows you to select sub graphs so you you know if you're only using npm
30:53
you don't pull in 70 uh megabytes of json for salesforce and spotify and everything what what i'm going to do here is i'm actually going to do something more fun i'm going to give
31:09
a sneak an old sneakaroo peekaroo of something else that we're working on here i'm not going to use cloud for this just yet so uh since we don't have like all the all the viewers in the world i
31:24
just closed down that things that's probably a less nice experience we we have a new thing that is called uh you know rest transforms but i need to boot up a example of this so give me one moment to
31:43
find the where i have the code the code running for that uh i have the elevator music queued up yeah you know my stream game is not that good just yet unfortunately so i do plan on uh trying to trying to
32:00
step up a little bit this coming year but we'll see um so i'm going to go ahead and grab a blank docker compose file here and then boot it up and and we'll be able to get running with that this compose file should do
32:15
i think everything that i need so i'm just gonna take this new folder uh that i can then run with that so i'm gonna go to [Music] uh yeah
32:31
make a new directory i'm describing this for for asmr uh developer debugging is the uh the effect we're going for here uh one graph jam we're gonna call this folder go into there and just
32:48
almost there so i will share my code screen here so you can at least you love what i'm doing um that's good so maybe it's maybe it's less weird should i share a screen share window
33:06
share a bird sure blaine okay um so i'm gonna go ahead and just make a new file here uh this is going to be a docker compose file and that docker compose file is going to be these magical contents here which is going to just basically
33:22
bootstrap up a beta version three so this is something you can definitely try out yourselves um i'm going to go ahead and run this now so docker compose up i think that's everything i need to do its thing
33:39
error so let me have a look to see um port is all eradicated that is because i will do a doctor compose down
33:55
and uh do it again so we'll run this now this should free me up supports allocate so we're going to do the down again we're going to see what's running here
34:10
so docker stopped that and as much as i usually just uh kill on whatever spine bound to the board i like your approach you know i think it's more about
34:28
a confidence level about what it is you're able to recover from right so if you're fair enough if you pee kill the wrong thing you're in for a bad day live dangerously that's my motto says the startup founder um
34:48
investors were harmed in the making of this episode all right so i didn't run this in in detached mode so you get to see a bunch of lovely output but we're going to go ahead and just minimize that i'm going to stop this screen and pull up the actual browser environment now so this is going
35:03
to be kind of cool we'll see what we're able to we'll see what we can see here with this i will now switch over to the actual console share this window and a little little hint hint if y'all watch the twitter feeds uh later this
35:20
afternoon you might see some more stuff uh happening regarding this information so um that beta might get dropped so i'm saying um cool all right so we have this
35:35
running here so uh we need to get a netlife function running or what do we need to do now uh let's add the remote schema so i sent you a chat message with the url you can use this is a graphql endpoint
35:54
and i'm going to go to remote schemas here and go ahead and uh you know forward the uh client headers as well any additional headers or is that good
36:09
no i think they should be good i mean it's been a while since i've done this so we'll see uh it'll be a a learning experience on both sides there was a small issue with this beta build on on remote schema so i'll see if that doesn't bite us in the
36:24
tushy but i think well one graph is also i mean if you are building a graphql tool uh the one graph schema is great to test against because it is i think one of the largest publicly available and uh okay as you can see it took a while to like download and parse
36:39
everything for that so i think we're good because for the audience that's the introspection that is going out and looking for everything that's available and in this case it probably did a double check to be like are you sure okay um
36:55
yeah good there um let me go ahead and uh kill my api explorer here look at that crazy this is interesting yeah and actually i would say let's why don't you try querying um npm if you
37:11
just expand yeah uh and maybe get some information about a package inside of npm is it parameterized or no no it's uh if you use the explorer i mean it'll you know i like never use these
37:28
well all right so we have a package and let's do react or yeah whatever okay and let's go to downloads last month and count downloads last month and count
37:44
yeah let's yeah let's run this as a sanity check make sure that everything's working end-to-end oh [Music] i probably have i have variables in there i think graphical should just ignore that you know that's yeah a little bit strict here all
38:00
right cool all right so now we got access i wrote that one i wrote i wrote that one i updated it five years ago [Laughter] well it's uh it's uh eleven thousand dollars per month as part of the test
38:16
suite for uh for microsoft uh fabric ui apparently and i'm embarrassed because there's a there's an error that's a good way to you know it's like a calling card you always leave a an error somewhere right typos for me it's typos so i was like oh jesse wrote this
38:32
there's a typo in there okay so so now we have a challenge which is we want to make it so that you know we can get some data from spotify right which requires you to be authenticated um
38:48
so what i'm going to do why don't you add an authorization header up there and i will send you over a token just in a moment that might be plain text just so you're aware that's fine
39:04
okay it's only going to have access to spotify but that means they could control your spotify not well they
39:20
so the one nice thing is um the is this a bear token or what is this that's a baritone yeah so all of the um uh tokens are scoped to an individual app
39:39
okay so let's go ahead and test this real quick let me give you a spotify query for those that are wondering we have a private chat in the background here that's what's happening
39:56
let's look for fury okay
40:13
here you are now did you actually add was it you that added the explorer to graphical i did yes yeah graphql royalty in the house all right so there we go so we're able
40:29
to uh query into uh spotify through hansura and uh get some data back so that the token that i gave you is not a uh jwt it's just a token let me also share
40:45
for any good citizens out there if you go to this url here it's onegraph.com security if you ever find a token you're able to in the wild say it's in github or whatnot you can actually paste it into
41:02
the form here and it'll destroy the token so uh if you if you ever see a token that someone didn't mean to expose then you can go ahead and destroy it for them all right so if you find somebody else's token and you paste it in there it'll just destroy it yep like
41:18
any kind of token the idea being that uh it's better to be able to like disable it uh rather than have someone take that hijack and use it for nefarious purposes so for example i took it in right now and uh the token would go away
41:35
interesting okay so um let's see how do we how would we apply permission so we need a forward we need a forward uh essentially we're needing to re to call the hazura
41:53
endpoint with the auth guardian jwt uh mutation very good so i'm curious like just so for example let's say you know we're searching for spotify tracks let's say i only want you to be
42:08
able to uh get the um image url for the cover if you are oh i think i see where you're going with this so you'll want to go through remote schema so we're going to give a roll here we're going to test this because i haven't actually done this really in a meaningful way but i won't have to
42:23
reboot this because i believe i need to yes add this environment variable we're just going to do this real quick so i'm going to go ahead and go back to my docker compose file i'm going to uh set this to true
42:40
and i need to then docker compose stop when it stops takes takes a minute um and then i need to boot it up again also for anybody else watching this i am
42:58
using an m1 mac with azura engine what like yeah it works it works now and no no like rosetta or anything oops i just lost my audio maybe no
43:13
no rosetta you still hear me now i can't hear you hang out one second i think siri hijacked my my things or did you get hijacked because uh i
43:28
hope not uh i don't see any ui cam audio no the the audio looks good here okay uh it was in fact i invoked
43:44
can you hear me now or not yet i i can hear you you can hear me but i can't hear you this is a little bit of a funny uh situation my terminal tried going into audio text input mode has not given back my headphones
44:00
just yet so let me see what i can do about that this is a first give me one second here i'm going to go to audio i may have to switch to a backup mode here okay now i can hear again i can hear it
44:16
again all right oh right here okay that was all right that was unusual all right so i'm going to save this file and reboot and then we should be uh running it up again so i needed to add the environment variable it should be all happy
44:34
let's let it kind of kick through for a second i'll try refreshing the page here not yet booted up so we give it just a moment here i'm looking to see if there's any errors i don't see any errors
44:51
so it should be coming up coming online here we go all right so
45:10
that ap the uh endpoint seems to be asking it a few a few things yeah it's it's it's quite large like i mentioned yeah all right and you may have to restart once more i'm giving you the um
45:26
the hasura how do you call this jwt claims uh set up oh yeah mm-hmm so um just as a bit of preparation but yeah i'll have two permissions first
45:41
yeah let's try here so i'm gonna go into here and so i had an error uh introspecting the schema let's see if we can give it a chance to try again here for permissions um okay so we're gonna we're gonna call
45:58
this uh a a pal a friend okay uh just so i know what's happening if i see weird things happening okay uh so we're gonna drop down into uh spotify you said right
46:13
yep and we wanted to do you know which specific endpoint we wanted to extend these permissions let me grab it real quick so it is a spotify track spotify track i see that okay
46:29
yeah excuse me okay so let's make it so that you can only um get the uh let's see what's a good one um uh well let's just make it easy let's uh
46:46
the preview url you can only get that if you are if you have the pal roll okay so let's just do that one all right yep okay so we'll close that up and we have that permission
47:02
i don't think i have to save or anything let me just see if i have to save anything in the bottom wow yeah a few types here let's just grab that handlebar here and just there we go save permission let's see if it's uh
47:19
likes working so that's what i mean by like one graph is a nice stress test for you know if if your tool works very quickly with one graph then it's going to work with everything i'm going to put a watch inside of the azura query has to be an object
47:36
type so what would that be indicating here so do i need to give permission on query 2 or i wonder him
47:53
makes sense okay and then just to make sure i understand the ui i saw that there was an x next to the pal is that uh is that supposed to be an x or a check mark so that's currently an x in terms of we haven't saved the permissions yet once
48:10
we have that i'll switch to a uh like a partial uh icon okay um so and pro we've got the spotify query we probably need to add anything there no probably not huh
48:25
so yes so spotify this track we were playing with right yeah so it's like spotify search okay
48:41
just checking to see if there's anything here that would indicate i could try running the save again anyways but yeah i think if you click on the spotify query bang does that take you down to maybe that object right there yeah
48:57
okay cool and then you can see here that all that's enabled that looks good yeah so this looks coherent to me let's try it and save again validation for the given role based
49:14
schema fail for the following reasons field artists expects the following non-noble arguments being present id field track well i think so this didn't exist in hassura last time i played with it and i
49:30
was really looking yeah this is pretty cool yeah this is we're getting edge here yeah we're getting we're getting very edge here uh and the uh and it's going to be i'm trying to think the debugging i'm thinking it has to do
49:48
with there being an expected uh parameters for what's it expecting at the moment um you see let's just take a quick peek interesting um i guess there might be a
50:05
challenge with string and uuid um between hasura and was that's i i don't remember what the error message said but i wonder if there's if there's an assumption that like an id uh is well it did expect uh is that
50:23
somebody commenting there in the chat um common error with point graph okay um okay so that's that might be the situation here um
50:40
interesting interesting okay oh no worries i mean well we could try do you have do you happen to know the rest end point for spotify uh yes one second because what we can do is we can actually try a new feature of hazura but still using the auth guardian
50:58
mechanism to authenticate if we create an action here and we can actually try to do a spotify lookup so let's see if we can look at the spotify uh docs here
51:14
sure [Music] track okay so here's the equivalent uh curl
51:31
okay let me grab this here so we got the external audio the header okay good and i'm going to just grab the api endpoint here so this is a get request
51:47
so we're going to do and this is a this is a search as a search and then the parameters well i'll paste it in here so we can see it um so what do we got here we got api spotify.com v1 search question
52:02
mark goes album and include external audio and then there's a q equals and that's that's your query oh the queue is the query okay so we're going to do is we're going to go ahead and create a spotify um do you mind running that curl on your
52:18
machine real fast and just pasting me with the json responses so we can map that i'm going to do this here as a query not as a mutation uh so i'm going to create a custom action here inside of azura we're going to call this spotify search
52:34
i'm going to give this a search string here and this is going to just simply be a string but it will be a required field and so now we can actually remove this input here we don't need that um and we're going to take
52:51
this field so we're going to give it a a request transform here this is the new stuff here so we're going to make this a get request and we're going to go ahead and do a query param which is q
53:08
and then we need the the inputs go ahead and view the um the sample input here um yeah i have it here one second or i have the uh the output rather let's see
53:27
so we need the what's the syntax well i'm going to do a search around the docs is there a docs and that would be action transform
53:43
i'll do a search up here for action transform and this one here uh for the query param i'm looking for
54:01
[Music] so that's it body that's the thing there okay so body input
54:20
so this query parameter here is going to be body dot input dot search and uh yeah
54:36
so we have an action here spotify search the sample output so we get a top level key called tracks yep all right so i'm going to go ahead and define a custom scalar here called json b we are going to be refining this in the future but what we're going to do is
54:52
just go ahead and call this tracks which responds with a json b output we're going to call this spotify output type we'll make it to your more specific spotify search
55:07
output type and we'll map that as the expected response from our thing so we'll expect to see a tracks so now what we have is uh the and we can actually expand some of these
55:22
parameters even more so we have the type is album i'm going to go ahead and hard code that in for now and so we can remove that and include external
55:38
go ahead and parameterize that on there which how do they tell is that it just says just audio okay and we'll just go ahead and remove all those parameters yeah it's really cool so we have this search uh api we have
55:55
the we have the parameterized input coming from spotify search output uh input search here up here at the top and we're going to go ahead and see
56:11
if this gives us everything we need and we do forward client headers is the biggest thing so when we receive headers from um from to our api uh then we need to pass on them so what we would get as the
56:27
approval authorization header from auth token we would forward that along let's go ahead and hard code that one token for now just as a test and then we will remove that in a minute if we actually get that far
56:49
because so the the one graph token is not a token that will work with spotify it's like it's a token that has lots of off so let me get you a spotify token okay just a moment
57:05
now would it be possible with the off guardian to have a a token or a jwt that includes the proper claims and things in that and then you just pass that on forward yet yeah you're good
57:21
let's do actually i have the queer for it here
57:36
you got me all my my toes here well i'm i'm testing a beta feature live heard of an audience all right secrets
57:53
and you can tell me if this should not be exposed publicly or not i could put this in an environment variable if you'd like it to be uh i'll destroy it afterward all right okay on that so we're gonna have two
58:09
two uh upper level graphql developers who have managed to create a uh spotify resolver in one hour
58:25
hardcore this is hardcore stuff here this is a bear token to correct yes he who has a token has the power all right so we'll go ahead and create the action i'm gonna i'm hoping this works um so we're gonna we're gonna just go
58:42
ahead and save this go ahead and create the action we're gonna try it so uh let's give it a shot here so once this saves i'm gonna switch back over to view in the comments we got a really active uh thing here so when is this feature available uh us is asking i believe that's how you pronounce your name uh
58:59
theoretically let me just check something real quick theoretically in an hour too so it is it is uh
59:19
it's building so um all right so we've got this thing saved let's go ahead and test this in the api explorer so what we'd have is we have this exposed um search now so we go ahead and we say spotify search
59:34
and we still have the remote schema i'm surprised that we didn't get a collision with that so that's nice we'll do a search now and i can just give it to any string here right like um this is like specifically for albums right would be the thing
59:49
uh yeah or um it's got to be an album called butterfly so we'll just try that um i don't know i can never mind uh and look for tracks here we'll see what we get so invalid uh something or rather let's see what the issue here is
00:08
the so i think we so here's the query i can see if the input is is incorrect um search include external uh no it took the query parameter just fine um
00:25
let's include external audio and q equals butterfly and type equals album and the authorization header so that looks correct for the request authorization that's not this bit me
00:40
more than once miss using a typo there bearer okay and it is a get request right it is yes so and i just ran it uh via curl and that looks
00:58
right um and what was the do we have the url sorry good uh let's go down and see like all right so your client has issued a malformed or illegal request that's all we know
01:13
uh do we know the url they're sitting so i see headers so we can see the form we can see the form here the transform request um so here's the query string we can see the actual url that got generated so
01:29
api spotlight.com v1 search question mark the word is the order important of the other query params shouldn't be right um this looks uh looks good to me do you want to try curling uh
01:46
so so this is the uh curl request that works locally so let me just run this as a sanity check here yep
02:01
just gonna run that here so um it didn't work for me when i just pasted it and ran let me go and see what i what i sent curl request get url um
02:20
so it said you are a bad illegal format or missing url um maybe i need to what what is it not like there you said you ran on your machine and worked just
02:36
fine yeah yeah but i'm running it if i copy and paste it from that then uh let me does it get too many like funky formattings yeah i suspect that you remove all the forward slash all the slashes
02:54
yep that should do it okay how do you jump words in terminal meta you do have to what's meta oh option option sorry that's my emacs uh kicking in sorry
03:13
so that worked um good good good good good let me just see if maybe the response is something different than just tracks at the top uh so we get well the response we got from spotify was an html page though
03:30
right i i'm getting albums as the top response which it would be complaining about it that doesn't match up so let's see what happens if we modify that uh to be albums
03:45
it makes sense if the type is albums from what i would just have thought but i said yeah i'll just see let's just see what we get here we'll go ahead and bring up this again now the api
04:04
saving saving saving history all right so now we're going to try albums i mean like obviously it would not be i
04:20
was just wondering uh because it doesn't like the request yeah the it looks um cute butterflies there's there's a body
04:35
though why i don't think there should be a body in the transformed request uh where do you see that so under transform requests i see a query string and then body i suspect that there shouldn't be a body so this probably underneath the uh
04:55
where's body i'm looking i'm looking uh um oh here yeah here so this is the transformed request um that's i think the just from the actual graphql transform thing
05:12
if we're sending a body with a get request i could imagine them not being happy about that let's see yeah exactly so i just tried it with a get and i added with curl and i added a body and i got the same thing so we need
05:29
to not be sending a body in this action so i'm wondering can yeah that's going to be a problem let's have a look here uh let's have a
05:46
look um so this is i mean this is all new stuff so we have the we have the uh the api endpoint and then we have the transformation which goes to the base url
06:04
this is the input parameter coming from graphql uh payload transformation which we the transformation we want is just don't well yeah um
06:22
can you just uh see the only thing is it'll give us is the request buy but this is typically only with uh post requests it shouldn't necessarily be firing exactly yeah um
06:37
this is a pretty cool approach though i mean obviously you know beta but uh yeah approach to like that error could probably be a bit more helpful to figure out i mean i am yeah we're able to track it down and then you can easily map you know external apis like specific endpoints to this which is
06:53
really nice yeah we and we actually have i'm just going to give this last plug here so we're over time and i want to respect your time too i'm going to just show so if people are interested in kind of learning more uh so along with the build that is building now and will be released here very
07:09
shortly and i want to have a look and see why this isn't working um even your errors are instructive um we have this new page that we just launched today called the hazura data hub and this is where you can actually go in and find a lot of information about remote schemas which we definitely have to get one graph and there now um
07:26
and we have action transforms event transforms and you can actually find uh plug and play examples where you can actually just bootstrap up a hazura project with elasticsearch air table firebase and this is community powered so if you have
07:42
a integration with some tool you'd like to try and test out because again this is going to be a live version in the next hour or two uh you can you can try this out and you can follow the guide here to actually submit new stuff so this would be something that'd be kind of fun to uh play around with um
07:59
well we you got to see two people nerding out about graphql and figuring out how to how to geek around the edges didn't work out but it's a nice insight into like where this is going and you can see how faster like we'll be able to adapt some more and
08:16
more uh endpoints which is and like in a in a way that's you know because nullify functions lambda functions they're all rights but it's still a lot of effort to set them up and and you know deploy them and everything so it's really cool to just say hey look here's the endpoints here's the transform just do the work for me and it's all like self-contained
08:31
inside of houseroad well like with netlify functions too like it's getting back to the mission of these data of the data layer concept is that less glue glue code and more actual domain code right so things like off guardian allow
08:46
you to say i'm not actually wanting to deal with refresh tokens and whatever else like just just giving me the permissions i need because i'm authorized and so being able to have that and be able to then send that off into these discrete handlers is very much uh the
09:02
right approach sean that was a lot of fun it was uh definitely didn't quite have the right ending i'll definitely get that fixed and figured out what's going on there because spotify has got to be there but i'm completely yeah i'm i'm always happy to like export
09:18
the edges and break things so no worries a lot of fun a lot of fun today all right thanks again for joining me today i'll let you go cause i know you're a busy guy uh but everybody go follow eskrobe on twitter if you don't already i am sure more of you follow him then follow me uh you can
09:33
see my twitter handle there in the screen please follow me that's my only metric my only personal metric i track but all your sells of uh sense or self-worth comes from that all of it so no that's that's great anyways have a
09:48
great uh rest of your day and we will see you around the community so have a good one and we'll see you next tuesday bye