The document introduces GraphQL, including how it provides a common interface for client-server data fetching and manipulation. It discusses how GraphQL addresses issues with REST APIs like multiple round trips to the server. Major GraphQL clients like Apollo are presented, as well as how to use GraphQL on the frontend with frameworks like Angular and on the backend by integrating with databases and services. New features in GraphQL like batching, deferred data, streaming, subscriptions, and IDE support are also covered.

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