Recommended
More Related Content
Similar to Introduction to GraphQL to enhance your APIs
Similar to Introduction to GraphQL to enhance your APIs (20)
Recently uploaded
Recently uploaded (20)
Introduction to GraphQL to enhance your APIs
- 1. Introduction to GraphQL to enhance your APIs
- 2. Hi! Dionysis Technical Team Leader @jexia Robert Backend Developer @jexia @robertignat irobert91 linkedin.com/in/robertignat @d3nnn1z d3nnn1z linkedin.com/in/d3nnn1z
- 3. Agenda • Introduction to GraphQL • Let’s build a server • Advantages & Disadvantages • Compared to REST • Q&A
- 4. What is GraphQL? GraphQL is a data query language and runtime designed and used at Facebook to request and deliver data to mobile and web apps since 2012.
- 5. No, you don’t have to use a graph db.
- 6. No, you don’t have to use a specific server language.
- 7. How GraphQL works? iOS App Android App Web App Desktop App GraphQL Server Data Data GraphQL Queries JSON Payload 1 2
- 8. GraphQL Query Example { user(id: 123) { name email friends { id name } } } { “user”: { “name”: “Wilma”, “email”: “wilma@flintstones.com”, “friends”: [ { “id”: 124, “name”: “Barney” }, { “id”: 132, “name”: “Fred” } ] } } GraphQL query JSON Payload
- 9. Monkepark You can use GraphQL with your existing backend! Let’s build a server! github.com/irobert91/monkepark-server-graphql
- 10. Advantages
- 11. Advantages • What you see is what you get • Client specific data • Application layer protocol • Strong typed • Self documenting • Existing backend APIs • RFC - http://facebook.github.io/graphql • Extra powers with Relay and React • Introspection • Active community
- 12. Disadvantages
- 13. Disadvantages • Steep learning curve • Overhead to manipulate the data • No select * • Args can become enormous • Boilerplate
- 14. From REST to GraphQL Mandrill The mandrill has an olive green or dark grey pelage with yellow and black bands and a white belly. Its hairless face has an elongated muzzle with distinctive characteristics, such as a red stripe down the middle and protruding blue ridges on the sides. It also has red nostrils and lips, a yellow beard and white tufts. Africa
- 15. REST GET /monkey/1 { id: 1, name: "Mandrill", description: "The mandrill has...", imageUrl: “mandrill.jpg”, regions: [1], ... } GET /regions/1 { id: 1, name: "Africa", area: 30370000 }
- 16. GraphQL { name: "Mandrill", description: "The mandrill has...", imageUrl: “mandrill.jpg”, regions: [ { name: “Africa” } ] } Mandrillus The mandrill has an olive green or dark grey pelage with yellow and black bands and a white belly. Its hairless face has an elongated muzzle with distinctive characteristics, such as a red stripe down the middle and protruding blue ridges on the sides. It also has red nostrils and lips, a yellow beard and white tufts. Africa
- 17. GraphQL GraphQL JSON { monkey(id: 1) { name description imageUrl regions { name } } } REQUEST { name: "Mandrill", description: "The mandrill has...", imageUrl: “mandrill.jpg”, regions: [ { name: “Africa” } ] } RESPONSE
- 18. Custom Endpoints Custom Endpoint 1 Custom Endpoint 2 Custom Endpoint 3 View 1 View 2 View 3
- 19. Custom Endpoints Custom Endpoint 1 Custom Endpoint 2 Custom Endpoint 3 Custom Endpoint 4 Custom Endpoint 5 Custom Endpoint 6 View 1 View 2 View 3 View 4 View 5 View 6
- 20. Custom Endpoints Custom Endpoint 1 Custom Endpoint 2 Custom Endpoint 3 View 1.1 View 2.1 View 3.1 Custom Endpoint 1.1 Custom Endpoint 2.1 Custom Endpoint 3.1
- 21. Custom Endpoints Custom Endpoint 1 Custom Endpoint 2 Custom Endpoint 3 View 1.2 View 2.2 View 3.2 Custom Endpoint 1.1 Custom Endpoint 2.1 Custom Endpoint 3.1 Custom Endpoint 1.2 Custom Endpoint 2.2 Custom Endpoint 3.2
- 22. Custom Endpoints
- 23. GraphQL GraphQL View 1 View 2 View 3
- 24. Links Github repo What? github.com/facebook/graphql The GraphQL specification, it’s not tied to a specific implementation github.com/graphql/graphql-js Node.js reference implementation by Facebook github.com/graphql/graphiql Web based IDE for GraphQL, cool features like autocomplete github.com/facebook/dataloader A data fetcher utility github.com/chentsulin/awesome-graphql Awesome GraphQL github.com/irobert91/monkepark-server Original monkepark server github.com/irobert91/monkepark-server-graphql GraphQL monkepark
- 25. Thank you! Questions? Dionysis Technical Team Leader @jexia Robert Backend Developer @jexia @robertignat irobert91 linkedin.com/in/robertignat @d3nnn1z d3nnn1z linkedin.com/in/d3nnn1z
Editor's Notes
- Welcome to our GraphQL presentation.
- This is our agenda. We are going to start with a small introduction to GraphQL, then have a short live coding session to demonstrate what a server looks like. We’ll continue with advantages and disadvantages to using it and, of course, compare it to the most popular alternative, REST. In the end, there is going to be a Q&A.
- Nowadays building backend APIs practically means the mapping of the resources to URIs ( REST principles in mind ) GraphQL could help us go a step forward and make our APIs even more powerful. It is an application server with a standard type system and a standard API. This technology is still new and best practices are still emerging.
- The first thing that might come to mind when hearing the name are graph databases. GraphQL doesn’t force us to use a specific storage engine. It works equally using a relational db, a key-value store or even a graph database.
- GraphQL is language agnostic, it's just a specification between the client and the server. You can find implementations in many languages (node - reference implementation, golang, php, whatever).
- (After you explain it) Let’s see a GraphQL query example.
- GraphQL is a query language. It requests data which is then returned in the same shape it was queried in. As we can see, on the left we have a GraphQL query asking for the name, email and friends of user with id 123 and on the right we have the json response from the server. A key point here is that GraphQL allows us to use nested queries, like the friends.
- Monkepark is a Node.js project that we have created for a different presentation. Basically, it exposes a REST API to manage a list of monkeys, so we thought that it would be a good candidate to enhance with GraphQL. If you are interested in seeing the code, you can find both versions, with and without GraphQL, on github. Coding: GraphQL has a specific API and it involves some boilerplate code. Mention schema and types. Write the query part. Start the server. Show GraphiQL and explain it. Because GraphQL has an introspection API, GraphiQL makes use of this and provides features like autocompletion and documentation. Test the queries. Explain mutations in code. They are separated, but they have the same api as query. Exemplify mutations in GraphiQL. Now let’s see some cool stuff: Introspection, aliases, fragments, multiple queries. I mentioned an introspection API earlier, which is a nice feature of GraphQL, so let’s see how that works. Show __schema and __type(name: “Monkey”)
- What you see: Easy declarative way to describe data structure, the query looks just like the data it returns. Client specific data: A GraphQL query returns exactly what a client asks for and no more. Application layer protocol: GraphQL doesn’t require a specific transport, it’s just a string that is parsed and interpreted by the server. Strong type: GraphQL is strong typed. One: It allows a very good tooling system to prevent you from many errors! Second: the server can make certain guarantees about the queries and responses Self documenting: Exploring data becomes trivial. Existing backend APIs: designed to work with existing backend APIs RFC: It has a clear spec Extra powers with Relay and React: When you are going to search for graphql you are going to meet Relay and React. You have probably heard of React. Relay is a glue layer between React frontends and GraphQL servers. Ofc you can use graphql without those tools but if you use them you are going to have a better way to interact with your data and build strong UI components Introspection: You can easily explore the schema to see what fields you can query for Active community: GraphQL has an active open source community, with many online examples
- Steep learning curve: You have to get familiar with the GraphQL API and terminology in order to start building your GraphQL server! Overhead to manipulate data: After grabbing the data, the GraphQL server will filter and manipulate it before sending it to the client. No select *: Fields need to be specified in each query, there is no way to just return all of them. You can use fragments to avoid repeating writing again and again the same type, but it’s not an equivalent solution. Args: The more querying functionality the server has, the longer the args list can get. Boilerplate: Because of strong typed field definitions you have to deal with a lot of boilerplate code.
- So let’s see how GraphQL compares to REST. Suppose that we have to create this widget, a card that displays information for a specific monkey.
- Let’s see how to achieve it using a REST API. Although there is no strict definition of what rest means, in a simplified form we can think of it as resources and their representations. So let’s go back to see what data we need to create this widget. “Click” So we can see that we need at least 2 round trips to the server in order to get all the information to power this widget. “Click” It would be nice to just call the server once and have a payload like this
- Just get me the monkey details and the regions in order to render my view.
- This is where graphql shines! With GraphQL a frontend can ask for only the data that it needs, even if it’s nested, in only one call.
- Ofc another different approach when you are dealing with web services in order to avoid multiple round trips to the server is to have some custom endpoints for the specific view data. But usually we are building new features or we are iterating over existing features and this workflow introduces a new kind of problem. “Click”
- As you can see on this slide we just added more views so we had to add some more custom endpoints. And this is only for incrementally adding new features, let’s see when we have to deal with iterations over existing features.
- So you can imagine that after some point you get this “Click”
- So you can imagine that after some point you get this “Click”
- So you can imagine that after some point your API is like this!
- In graphql we don’t need an endpoint per view Most of the cases we don’t need to touch the server and if we need we touch it is to add some more types. One of the key problems GraphQL aims to solve is the idea of only making one API request to get all data needed, instead of constructing custom endpoints per use case. With GraphQL you expose a single endpoint to parse and execute the query. Then that query is executed over a type system which you can also access through the Introspection API.
- Under our experiments we found a lot repositories and links regarding graphql. We found it a little bit confusing to have to deal with all those different repos and what is what so we decided to put a slide here with all the repositories that we found useful in order to get started with graphql.