Intermediate GraphQL

1. The next generation of API
design

2. About me
Sudheer Jonna
Full-Stack Developer
PrimeFaces and Extension open source team member
Author
Technical books Reviewer
Trainer

3. Agenda
● Introduction about GraphQL
● How to use GraphQL on the frontend side
● How to use GraphQL on the backend side
● Security techniques
● What’s new in GraphQL

4. Introduction
GraphQL is a data query language created by
Facebook in 2012 Which provides a
common interfaces between client and
server for data fetching and manipulations .

5. How the Journey started
Ads Manager
iOS Feed
Andriod Feed
iPad Messages
iOS Messenger
Facebook Lite

6. Request-Response

7. Why GraphQL over REST
A single request call: No more Multiple round trips to server
Full power to client: No over fetching and No under fecting
Strongly Typed
Independent of frontend and backend technologies
Self documentation

9. GraphiQL: A powerful Dev IDE

10. No more introduction please….

11. GraphQL + Frontend Frameworks

12. It’s not just one!!

13. GraphQL Clients

14. Major GraphQL Clients

15. Apollo Client
● Apollo team created GraphQL caching clients for
○ plain JS
○ UI frameworks(Angular,React,React Native etc)
○ iOS and Android libraries.
● Fully featured by supporting
○ Queries
○ Mutations
○ Subscriptions
○ Optimistic UI
○ Pagination
○ Server side rendering
○ Authorization
.

16. Apollo Angular
● To integrate with Angular framework Apollo-Angular created,used along with Apollo client
● Installation
● Create Apollo client and import Apollo module
● Write the queries using Graphql-tools
● Execute queries and Mutations

17. It’s a Demo time
GitHunt
(Created with Apollo client,GraphQL and PrimeNG)

18. Relay
● Facebook’s Javascript framework that can talk to GraphQL server for data needs of components
● Aggregates GraphQL queries and invoke them against GraphQL Server
● Supports features like
○ Queries
○ Mutations
○ Optimistic updates etc

19. How Relay works
Create your react component and define data requirements

20. GraphQL + Backend Frameworks
● On top of existing REST API.
● Integrate with Relational,NoSQL,ORM data sources
● Microservices

21. Server Implementations

22. PostGraphQL
● A GraphQL API created by reflection over a PostgreSQL Schema
● Automatically detect Primary Keys, relationships,tables,types and functions
● Can be used as HTTP middleware framework or CLI
● Accessing PostgreSQL functions

23. GraphQL Schema Generation

24. New backend services

25. How about Security

27. What’s new in GraphQL

28. ● Improve initial page load time with important data
○ Batching
○ Deferred data
○ Stream
● Real time data updates
○ Live
○ Subscriptions
● GraphQL Language Service: IDE support

29. Batching operations

30. Defer

31. Stream

32. Live

33. Subscriptions

35. GraphQL support for IDEs
● Diagnostics (GraphQL syntax linting/validations) (spec-compliant)
● Autocomplete suggestions (spec-compliant)
● Hyperlink to fragment definitions
● Outline view support for queries

36. It's already 9PM
Let me