Wonderful demo on GraphQL. Deserved a standing ovation. Was blown over by the optimization technique you explained in the last 3 minutes. Thank you for uploading this.
I like the Node.js plot twist at the end. Awesome demo. I'm starting to get interested in this tech because it looks like a nice way for a front end dev to be able to build something in React etc without a back end dev being needed to make custom endpoints. I can see from the video that it still falls victim to the n + 1 problem (loading 4 friends of the person when a custom endpoint could use SQL or the ORM to perform a join etc and bring that down to one query), so maybe it would be useful for prototyping, and then later on a back end dev could create efficient endpoints for what is needed.
That sounds about right to me. You can always switch out the implementation for a better one, while keeping the types and the overall shape of the API the same!
My theory is that the presenter is actually an AI by Facebook. It's humanly impossible to type all this code without a single syntax error! And to trick the audience into believing that it's actually an human, the IA even made a small mistake at 27:20.
Holy shit, my mind just exploded... This is awesome, Steven! I'm a simple front-end dev, do you think I can start learning back-end stuff straight from Graphql? I have a bit of experience with Node and Express.
All of the JavaScript code you see *written* in this demo is server side JS, but the browser-based tool that I use to test the server sends the GraphQL query that you type as a string to the server over the network. The GraphQL resolver on the server side receives and parses that string, then executes it according to your rules. That said, there's literally nothing stopping you from shipping the GraphQL resolver to the client and executing the query in the browser. That's mostly an academic exercise - only in rare cases would that be useful.
So, interestingly, the GraphiQL UI that you see in the video *is* a web app. It simply makes requests to an endpoint (in this particular case, /graphql/) with a URL param named ‘query.’ The value of that URL param is the full text of the GraphQL query. As for the lack of ‘self’ in my Python code, it's just bad Python style on my part. Where you would typically create an argument called ‘self’ I named it ‘root.’ The Graphene docs use ‘self’ in their examples.
Certainly. Since your backend already knows whether a record is banned or not, your resolver can simply check if you're allowed to see it and return `null` in the event that you're not.
+Steven Luscher good, i have watched , this one was too awesome, i'm still hungry for GrapQL and Relay talks if you have more please upload it somewhere, happy programming
hi Steven. I've started reading about GraphQL. I'd like to know if GraphQL can be another source/point of failure since we're inserting it as compared to the told way which is client does a REST api call to a an API server. Now with GraphQL, what happens now is client sents a request to GraphQL server then GraphQL server sends a REST call to the API server. It now has more steps. I really haven't read much more about GraphQL so my assumptions maybe wrong. FYI, I would like to mention I'm coding in React. I also do code in nodejs.
To wrap a GraphQL API around an existing REST API can be inefficient, as you've noted. Ideally, the GraphQL field resolvers would be able to make calls into your data fetching abstraction directly, rather than to make a second hop through a REST API. However inefficient, the ‘REST wrapper’ example in this video is useful for two reasons: 1) it shows just how arbitrary the code backing a GraphQL type can be, and 2) it demonstrates how you can quickly prototype a GraphQL API by piggybacking atop your existing REST API. You can expend minimal effort to see if GraphQL is valuable to you before deciding to go all in!
@@steveluscher Thank you for the fantastic talk, Steven. I wonder, is it common to provide a thin cache at the GraphQL server to reduce load on the REST api? It would seem like a reasonable and performant solution to bridge the gap between prototype and backend rewrites.
I would say that it's common to place a read-through cache between your GraphQL field resolvers and _any_ API, @@LukePighetti. Even when your GraphQL field resolvers talk to ‘native’ ORMs like Ruby on Rails' ActiveRecord directly you get same-request caching for free (guides.rubyonrails.org/association_basics.html#controlling-caching). I would encourage you to design your system in such a way that it's presumed that you'll be requesting the same objects from disparate parts of your code that don't talk to each other.
I wish to ask about the potential `n+1` problem when you want to query for "friends". Would that issues another query, or would it be smart enough to prefetch related fields?
You basically need to write very smart resolvers that inspect the AST or even roll out your own execution module. Dataloader helps only up to a point. A custom execution engine is what's happening here subzero.cloud where each graphql query, no matter how deep is a single SQL query
In summary, GraphQL allows me to add a layer on top of my API to make it easier to fetch the data I actually need. It helps to avoid creating all these bespoke endpoints for different consumers which need different data from the same source. But, following example from the video, if I need to fetch not one, but 10 users and their friends (aka pagination) would it mean GraphQL is going to execute all() query to get friends on each of the user? Which means 10 API calls + 10 API calls to get friends = 20 API calls (or 1 API call to get initial 10 users + 10 calls to get their friends = 11 API calls) - if I do it with bespoke endpoint, I could write a bespoke query to get this data in 1 database query = 1 API call - how does (if at all) GraphQL could solve this problem?
There are two approaches that I know of. First, you can slightly defer the fetch in order to batch calls for the same resource across different parts of the query tree (see graphqlme.com/2017/12/09/n1-queries-no-more/). Secondly, since you have access to the query itself when resolving it you can make a query plan. For instance if you can see that the friends field is present as a subselection of user you can decide to include friends via a join in the database query that fetches each user (see github.com/graphql-dotnet/graphql-dotnet/issues/21).
This particular example uses Babel to be able to convert the import statement to something that can run on any version of node (see the GitHub repo for an example of how to set this up using babel-node - github.com/steveluscher/zero-to-graphql/blob/master/zero-node/package.json#L7) but starting in Node 8.5.0, you can start to use it natively (stackoverflow.com/a/37132668).
it doesn't say how the Person django model associates/is found. Nor it does say how field names are resolved since they are specified with underscore in the model but queried in camelCase
We use `Person.objects.get(id)` to get person models by ID - one of the arguments available on the `person` field in the GraphQL schema. Camel casing field names from Django model properties is how the Graphene library works by default. Check out the docs for the `ObjectType` for more! docs.graphene-python.org/en/latest/types/objecttypes/
Why nobody talks about resolve method implementation to cover all the GraphQL syntax? Without resolve GraphQL is empty - gives nothing in fact. You have to implement resolve method by yourself for each query type. There is no default method that handles all GraphQL syntax, I guess.
The `resolve()` method takes a source, args, context, and an info argument, and must return either a value conforming to the type of the field it's resolving, or a Promise that resolves to that value. You can inspect the types of the four arguments in detail here: github.com/graphql/graphql-js/blob/master/src/type/definition.js#L469-L486
but by default it returns nothing, not cover GraphQL syntax at all, you have to implement it, I guess this is not like you define data structure and you send query and you got exact result, if you don't implement resolve you have nothing, for simple data like return data[ i ] is simple but for more complex data like lists, groups and so on it is very hard to use
Also you have build bugs: - you depends on global babel-node instalation instead of this from node_modules/.bin - babel-node shouldn't be used for real I guess - you have to npm install first but README run script first - also there is problem with deprecated print
Hi Steven, good talk. regarding NodeJs (Express), i'm wondering if it will affect server since you requested multiple query/fetch? basically you will send one request to the end point (Express), but behind the scenes, the end point will fetch multiple times to the 'source' base on the query? Sorry, i'm just started exploring the GraphQL. This video help me start. Thanks! :)
Certainly yes, the NodeJS GraphQL example you see here makes multiple requests to the REST server, which is not ideal. That example shows the *flexibility* of the GraphQL executor, but you would almost always want to move the executor as close to your database API as possible so that you can make requests ‘on the metal,’ rather than by calling out to a REST server over the network.
Would it be logical to build a REST API alongside a GraphQL API with Express, as in creating all the REST endpoints the "rerouting" GraphQL endpoints to those endpoints via resolvers? This way the app can take advantage of GraphQL while also offering users REST?
Sure! I would recommend that you colocate both implementations with the underlying model layer. For example, if whatever offers your REST API lives on a server that fetches data through X (eg. ActiveRecord, Redis, MongoDB), colocate the implementation of your GraphQL API similarly, and resolve data for the queried fields using that same X. It's possible to wrap your REST API in a GraphQL API, but preferable to wrap your GraphQL API around the same data API that your REST API wraps around.
I would start by downloading the examples at github.com/steveluscher/zero-to-graphql. After that, try to expose a small part of your own app's API through GraphQL!
Steve I see many of the viewers has raised interest by the themes you have used in your GraphQL talk, so do I, the atom theme it is pretty nice, How I can found it .. By the way .. nice talk !!
For those that want to code along, I made a small API in Node that'll serve up endpoints with data just like in this video. Find it here: github.com/mikedloss/zero-to-graphql-helper
Kinda disappointed, I though this might go deeper in the model query itself (making only one SQL query, possibly only querying the requested fields) (I've only watched the django part) But thanks anyway :)
There are certainly people thinking about ‘query planning’ - how to use the query to craft optimized queries that do the minimal amount of work possible. Start reading from here for more: graphql.org/blog/rest-api-graphql-wrapper/#query-planning-and-beyond
1:23 python esp. django
10:07 ruby esp. rails
14:30 node esp. express
Thanks!!
Thanks! Time saver!
Amazing! The most clear demo about GraphQL I've ever seen!
perfect video. detailed yet high level too. concise and thorough. many use cases, clear voice and structure. 0 dislikes.
Good lord! What a stellar presentation. I'm a python guy, but it was the "node pulling from external rest APIs" section that blew my mind.
I watched this couple months ago, now watched it again. Great video about GraphQL, thanks Steven.
That was impressive... I really didn't know it was that easy to implement a graphql endpoint on top of an existing rest API endpoint.
Great talk.
also made a dark cloud go away from my mind
Wonderful demo on GraphQL. Deserved a standing ovation. Was blown over by the optimization technique you explained in the last 3 minutes. Thank you for uploading this.
Best hands on guide to using graphql, learn a lot and was able to implement graphql into a project thank you
I like the Node.js plot twist at the end. Awesome demo.
I'm starting to get interested in this tech because it looks like a nice way for a front end dev to be able to build something in React etc without a back end dev being needed to make custom endpoints. I can see from the video that it still falls victim to the n + 1 problem (loading 4 friends of the person when a custom endpoint could use SQL or the ORM to perform a join etc and bring that down to one query), so maybe it would be useful for prototyping, and then later on a back end dev could create efficient endpoints for what is needed.
That sounds about right to me. You can always switch out the implementation for a better one, while keeping the types and the overall shape of the API the same!
My theory is that the presenter is actually an AI by Facebook. It's humanly impossible to type all this code without a single syntax error! And to trick the audience into believing that it's actually an human, the IA even made a small mistake at 27:20.
Practice. If you repeat it enough, and only focus on those snippets, it's not that hard.
@@MaxiTB and a good keyboard :)
haha. yup. but man the irony. you made a mistake at IA.
Amazing Steve! So well explained and very interesting!
Excellent video, super concrete and easy to understand even for me who wasn't familiar with graphql.
Holy shit, my mind just exploded... This is awesome, Steven! I'm a simple front-end dev, do you think I can start learning back-end stuff straight from Graphql? I have a bit of experience with Node and Express.
That sounds great! Make it all the way to the “Using a real data source” section of learngraphql.com and you should be well on your way.
link is broken. :(
THIS is what I needed. How to allow frontend apps using graphql to talk to a server side api app
Is the bar on the left is client side JS or servicer side JS? so one can pass a Query instead of a JSON from the client side JS?
All of the JavaScript code you see *written* in this demo is server side JS, but the browser-based tool that I use to test the server sends the GraphQL query that you type as a string to the server over the network. The GraphQL resolver on the server side receives and parses that string, then executes it according to your rules.
That said, there's literally nothing stopping you from shipping the GraphQL resolver to the client and executing the query in the browser. That's mostly an academic exercise - only in rare cases would that be useful.
best 30 minutes of my day! thanks
What Atom extension are you using to get the bar on the left?
It's Nuclide! nuclide.io/
Cool, thanks.
Great talk. I assume you're using oh-my-zsh - what's the theme with the 3 arrows?
It's the Sorin theme from Prezto, actually!
Steven Luscher oh, alrighty, thanks!
Very good hands-on start! Thx!
2 questions! How to query that info in web app, and how your methods work in python, without self?
So, interestingly, the GraphiQL UI that you see in the video *is* a web app. It simply makes requests to an endpoint (in this particular case, /graphql/) with a URL param named ‘query.’ The value of that URL param is the full text of the GraphQL query.
As for the lack of ‘self’ in my Python code, it's just bad Python style on my part. Where you would typically create an argument called ‘self’ I named it ‘root.’ The Graphene docs use ‘self’ in their examples.
Awesome explanation about GraphQL, thanks a lot.
Great talk, do you also have one about mutating the graphql objects?
I don't, but I like this tutorial: graphql.org/graphql-js/mutations-and-input-types/ It uses the new ‘buildSchema’ utility.
but how to use graphql+dataloader in express+mongodb+mongoose😔
Can it handle conditions? say if item has a status of banned, the query will never return the name of the item.
Certainly. Since your backend already knows whether a record is banned or not, your resolver can simply check if you're allowed to see it and return `null` in the event that you're not.
Awesome demo. Out of curiosity, what's your iterm setup? Love the arrows and the color scheme.
+Lev Brie I use the Sorin prompt theme from Prezto, and the Solarized Dark color scheme.
+Steven Luscher Awesome thanks Steven, I've actually been meaning to expand beyond my Oh-My-Zsh horizons and play around with Prezto. Perfect timing.
what is complete playlist link of series of tech talks at Facebook HQ on April 19 2016?
+Anees Khan There was one other, and you can watch it here: ua-cam.com/video/oPSuvaYmXBY/v-deo.html
+Steven Luscher good, i have watched , this one was too awesome, i'm still hungry for GrapQL and Relay talks if you have more please upload it somewhere, happy programming
+Anees Khan Watch these when you have time: facebook.github.io/relay/docs/videos.html#content
hi Steven. I've started reading about GraphQL. I'd like to know if GraphQL can be another source/point of failure since we're inserting it as compared to the told way which is client does a REST api call to a an API server. Now with GraphQL, what happens now is client sents a request to GraphQL server then GraphQL server sends a REST call to the API server. It now has more steps. I really haven't read much more about GraphQL so my assumptions maybe wrong. FYI, I would like to mention I'm coding in React. I also do code in nodejs.
To wrap a GraphQL API around an existing REST API can be inefficient, as you've noted. Ideally, the GraphQL field resolvers would be able to make calls into your data fetching abstraction directly, rather than to make a second hop through a REST API. However inefficient, the ‘REST wrapper’ example in this video is useful for two reasons: 1) it shows just how arbitrary the code backing a GraphQL type can be, and 2) it demonstrates how you can quickly prototype a GraphQL API by piggybacking atop your existing REST API. You can expend minimal effort to see if GraphQL is valuable to you before deciding to go all in!
Thanks a lot! Btw, I really enjoyed your video. :)
@@steveluscher Thank you for the fantastic talk, Steven. I wonder, is it common to provide a thin cache at the GraphQL server to reduce load on the REST api? It would seem like a reasonable and performant solution to bridge the gap between prototype and backend rewrites.
I would say that it's common to place a read-through cache between your GraphQL field resolvers and _any_ API, @@LukePighetti. Even when your GraphQL field resolvers talk to ‘native’ ORMs like Ruby on Rails' ActiveRecord directly you get same-request caching for free (guides.rubyonrails.org/association_basics.html#controlling-caching). I would encourage you to design your system in such a way that it's presumed that you'll be requesting the same objects from disparate parts of your code that don't talk to each other.
Awesome. It seems that the resolvers can also have some business logic embedded.
I wish to ask about the potential `n+1` problem when you want to query for "friends". Would that issues another query, or would it be smart enough to prefetch related fields?
Check out this comment for more discussion: ua-cam.com/video/UBGzsb2UkeY/v-deo.html&lc=z12pd3copxfff1ggc04cg3m4eu3aw5sygek.1475100408250462
You basically need to write very smart resolvers that inspect the AST or even roll out your own execution module. Dataloader helps only up to a point. A custom execution engine is what's happening here subzero.cloud where each graphql query, no matter how deep is a single SQL query
Ooooh, forgot to ask... What is the Atom package that is handling your javascript imports?
It's custom! Open up your snippets.cson and drop this in: gist.github.com/steveluscher/1d71dabb42e1a4a4145d9d61a35feb4f
Thank you so much! That's excellent.
In summary, GraphQL allows me to add a layer on top of my API to make it easier to fetch the data I actually need. It helps to avoid creating all these bespoke endpoints for different consumers which need different data from the same source. But, following example from the video, if I need to fetch not one, but 10 users and their friends (aka pagination) would it mean GraphQL is going to execute all() query to get friends on each of the user? Which means 10 API calls + 10 API calls to get friends = 20 API calls (or 1 API call to get initial 10 users + 10 calls to get their friends = 11 API calls) - if I do it with bespoke endpoint, I could write a bespoke query to get this data in 1 database query = 1 API call - how does (if at all) GraphQL could solve this problem?
There are two approaches that I know of. First, you can slightly defer the fetch in order to batch calls for the same resource across different parts of the query tree (see graphqlme.com/2017/12/09/n1-queries-no-more/). Secondly, since you have access to the query itself when resolving it you can make a query plan. For instance if you can see that the friends field is present as a subselection of user you can decide to include friends via a join in the database query that fetches each user (see github.com/graphql-dotnet/graphql-dotnet/issues/21).
Can someone tell me how he is able to use import here without any error?
This particular example uses Babel to be able to convert the import statement to something that can run on any version of node (see the GitHub repo for an example of how to set this up using babel-node - github.com/steveluscher/zero-to-graphql/blob/master/zero-node/package.json#L7) but starting in Node 8.5.0, you can start to use it natively (stackoverflow.com/a/37132668).
it doesn't say how the Person django model associates/is found. Nor it does say how field names are resolved since they are specified with underscore in the model but queried in camelCase
We use `Person.objects.get(id)` to get person models by ID - one of the arguments available on the `person` field in the GraphQL schema. Camel casing field names from Django model properties is how the Graphene library works by default. Check out the docs for the `ObjectType` for more! docs.graphene-python.org/en/latest/types/objecttypes/
Why nobody talks about resolve method implementation to cover all the GraphQL syntax? Without resolve GraphQL is empty - gives nothing in fact. You have to implement resolve method by yourself for each query type. There is no default method that handles all GraphQL syntax, I guess.
The `resolve()` method takes a source, args, context, and an info argument, and must return either a value conforming to the type of the field it's resolving, or a Promise that resolves to that value. You can inspect the types of the four arguments in detail here: github.com/graphql/graphql-js/blob/master/src/type/definition.js#L469-L486
but by default it returns nothing, not cover GraphQL syntax at all, you have to implement it, I guess
this is not like you define data structure and you send query and you got exact result, if you don't implement resolve you have nothing, for simple data like return data[ i ] is simple but for more complex data like lists, groups and so on it is very hard to use
Also you have build bugs:
- you depends on global babel-node instalation instead of this from node_modules/.bin
- babel-node shouldn't be used for real I guess
- you have to npm install first but README run script first
- also there is problem with deprecated print
Thanks for finding those! If you have time to send a pull request on GitHub, that would be awesome.
will see, not promise, bug for babel-node is in package.json, any plans to make resolve automatic? more easy to use?
Hi Steven, good talk.
regarding NodeJs (Express), i'm wondering if it will affect server since you requested multiple query/fetch?
basically you will send one request to the end point (Express), but behind the scenes, the end point will fetch multiple times to the 'source' base on the query?
Sorry, i'm just started exploring the GraphQL. This video help me start. Thanks! :)
Certainly yes, the NodeJS GraphQL example you see here makes multiple requests to the REST server, which is not ideal. That example shows the *flexibility* of the GraphQL executor, but you would almost always want to move the executor as close to your database API as possible so that you can make requests ‘on the metal,’ rather than by calling out to a REST server over the network.
Thank you, Steve. This was awesome!
Do someone knows what is this zsh theme ?
+Pierre Maoui I use the Sorin prompt theme from Prezto, and the Solarized Dark color scheme.
Would it be logical to build a REST API alongside a GraphQL API with Express, as in creating all the REST endpoints the "rerouting" GraphQL endpoints to those endpoints via resolvers? This way the app can take advantage of GraphQL while also offering users REST?
Sure! I would recommend that you colocate both implementations with the underlying model layer. For example, if whatever offers your REST API lives on a server that fetches data through X (eg. ActiveRecord, Redis, MongoDB), colocate the implementation of your GraphQL API similarly, and resolve data for the queried fields using that same X. It's possible to wrap your REST API in a GraphQL API, but preferable to wrap your GraphQL API around the same data API that your REST API wraps around.
excellent
Man, this was an awesome demo. Where can I learn more?
I would start by downloading the examples at github.com/steveluscher/zero-to-graphql. After that, try to expose a small part of your own app's API through GraphQL!
Done deal, Steven! Thanks so much!
wow, great demo.
which Atom plugin does the help in es6 typing import hello from "hello"?
thanks
+K.K. POON Open up your snippets.cson and drop this in: gist.github.com/steveluscher/1d71dabb42e1a4a4145d9d61a35feb4f
+Steven Luscher Great, it does great help. thanks!!!!!!
great presentation 👍
i guess I'm kinda randomly asking but does anyone know a good place to stream newly released tv shows online ?
@Levi Major i would suggest FlixZone. You can find it by googling =)
@Levi Major Lately I have been using FlixZone. Just search on google for it :)
Cool and Inspiring video with a very talented performer.
Awesome live coding demo!
Steve I see many of the viewers has raised interest by the themes you have used in your GraphQL talk, so do I, the atom theme it is pretty nice, How I can found it .. By the way .. nice talk !!
I use the Solarized color theme everywhere. ethanschoonover.com/solarized
Great video mate
someone please tell me how he deletes the word as he starts typing here, and can you do this in sublime? ua-cam.com/video/UBGzsb2UkeY/v-deo.html&t=509
It's kind of hard to see in the video but I think I was double clicking on each word to select it. Starting to type replaces it once it's selected.
one word:
A-W-E-S-O-M-E
For those that want to code along, I made a small API in Node that'll serve up endpoints with data just like in this video. Find it here:
github.com/mikedloss/zero-to-graphql-helper
Cool! Also, don't miss github.com/steveluscher/zero-to-graphql for more examples using other languages and frameworks.
Great talk
Mind-blowing!
Stunned!
thanks dude.
Dude, you're the shit... (that's a compliment) :)
😊💩
Use GraphQL along with Microservices:
Express: ua-cam.com/video/-XHN1T6r_R4/v-deo.html
HapiJS: ua-cam.com/video/VWPVrJU2upw/v-deo.html
Kinda disappointed, I though this might go deeper in the model query itself (making only one SQL query, possibly only querying the requested fields)
(I've only watched the django part)
But thanks anyway :)
I thought its more like an ORM as well
There are certainly people thinking about ‘query planning’ - how to use the query to craft optimized queries that do the minimal amount of work possible. Start reading from here for more: graphql.org/blog/rest-api-graphql-wrapper/#query-planning-and-beyond
***** Thanks ++
just wow!
Very nice🎉🎉❤
💙
🎉🎉🎉
intro ua-cam.com/video/M5LlBetzICo/v-deo.html
AWESOMESAUCE
Poor javascript, you installed a gem and looked at a django console, and called express logs django logs. JS gets no love. :-(
JavaScript had a good run.
Hola😎🙋♂️👏🖐🖐👍