lyonwj.com fullstack graphql · 2019. 9. 12. · 1) graphql is an api query language, not a...
TRANSCRIPT
Fullstack GraphQL
Building Fullstack Serverless GraphQL Applications In The Cloud
William [email protected]
DeveloperWeek CloudSeattleMay 2019
bit.ly/graphqlseattle
William Lyon
Software Developer @Neo4j
● Integrations■ GraphQL■ Data Visualization
● Helping developers build graph applications
● GraphQL Overview● How To Build A GraphQL API● GraphQL Engines
○ Database integrations● Deploying GraphQL services● Querying GraphQL
○ React● Authorization With GraphQL
3
Agenda
● Fullstack framework for building applications
4
All About GRANDstack
grandstack.io
What is GraphQL?
5graphql.org
An API query language and runtime for building APIs
“Your Application Data Is A Graph” -- GraphQL
7
Movies, Genres, Directors, Actors
8
Movies, Genres, Directors, Actors
GraphQL Type Definitions● Defined using GraphQL
Schema Definition Language (SDL)
9
Movies, Genres, Directors, Actors
Introspection● Schema can be queried ● Schema becomes API specification /
documentation● Tools like GraphiQL / GraphQL
Playground
10
Movies, Genres, Directors, Actors
GraphQL query
https://blog.apollographql.com/the-anatomy-of-a-graphql-query-6dffa9e9e747
Operation name and arguments
12
Selection set
13
GraphQL query
Movies, Genres, Directors, Actors
14
GraphQL query
GraphQL response
Movies, Genres, Directors, Actors
1) GraphQL is an API query language, not a database query language.
2) Limited expressivity (no projections, no aggregations, etc).
3) While GraphQL exposes your application data as a graph, it’s not (just) for graph databases
15
What is GraphQL?
● Overfetching○ Less data over the wire
● Underfetching○ Single round trip
● GraphQL Specification● “Graphs All The Way Down”
○ Relationships vs Resources○ Unify disparate systems (microservices)
● Simplify data fetching○ Component based data interactions
16
GraphQL Advantages
● Some well understood practices from REST don’t apply○ HTTP status codes○ Errors○ Caching
● Exposing arbitrary complexity to client○ Performance considerations
● n+1 query problem ● Query costing / rate limiting
17
GraphQL Challenges
Example API & How It’s Built
18
Example GraphQL APINeo4j Community Forum Trending Activity Feeds
19
community.neo4j.com
How To Build A GraphQL Service
21
22hackernoon.com/building-trending-activity-feeds-using-graphql-and-neo4j-e62ee790238e
Community Graph
23
http://138.197.15.1:7474/browser/
user: community
password: community
24
Start With A GraphQL Schema
25
graphql.org/learn/schema/#type-language
Start With A GraphQL Schema
26
Type Definitions
Start With A GraphQL Schema
27
API Entry Point(s)Query & Mutation Types
Start With A GraphQL Schema
28
API Entry Point(s)Query & Mutation Types
graphql.org/learn/schema/#type-language
● Functions that define how to “resolve” data for GraphQL request
29
GraphQL Resolvers
graphql.org/learn/execution/#root-fields-resolvers
30
Cypher Query
https://hackernoon.com/building-trending-activity-feeds-using-graphql-and-neo4j-e62ee790238e
31
Resolvers
Apollo Server
https://www.apollographql.com/docs/apollo-server/
Apollo Server
33
Apollo Server
34
Apollo Server
35
Apollo Server
36
1) Schema Duplication2) Mapping / translation layer from graph ←→ (???)3) Boilerplate code4) n+1 query problem
Common Problems With “Standard Approach”
https://blog.grandstack.io/five-common-graphql-problems-and-how-neo4j-graphql-aims-to-solve-them-e9a8999c8d43
GraphQL “Engines”
39
● Tools for auto-generating GraphQL schema, generating database queries from GraphQL requests
40
GraphQL “Engines” Overview
prisma.io aws.amazon.com/appsync hasura.io graphile.org grandstack.io
Neo4j-GraphQL
Neo4j-GraphQL
41
● GraphQL First Development○ GraphQL schema drives the database data model
● Generate Cypher from GraphQL○ Single query / single round trip to database
● Generate GraphQL CRUD API from type definitions● Auto-generated resolvers (no boilerplate!)● Extend GraphQL functionality with Cypher
○ @cypher schema directive
42
Goals for Neo4j-GraphQL Integration
43
GraphQL First Development
44
Generate Cypher From GraphQL
45
Extend GraphQL w/ Cypher
grandstack.io/docs/neo4j-graphql-js.html#cypher-directive
@cypher GraphQL schema directive
47
neo4j-graphql-js
neo4j-graphql-jsapollo-server
Demo
48
GRANDstack starter project
grandstack.io
GRANDstack.io
49
● Declarative database integrations for GraphQL
● GraphQL type definitions define database model
● Provision CRUD GraphQL API○ Auto-generated GraphQL API○ Schema enrichments
● Generate database queries○ auto-generated resolvers○ reduce boilerplate
50
GraphQL ”Engines”
How Do GraphQL Engines Generate Database Queries From GraphQL Requests?
resolveInfo resolver argument ● GraphQL query AST● GraphQL schema● Selection set● Variables● ...
51
Deploying A GraphQL Service
GraphQL Deployment“Traditional” Approaches Serverless Options
53
● PaaS○ Heroku, AWS Elastic
Beanstalk● Docker container● VPS● ...
● AWS Lambda, Google Cloud Functions, Azure
● Serverless Framework○ serverless.com
● Zeit Now○ zeit.co/now
● Netlify Functions○ netlify.com
54
neo4j-graphql-jsapollo-server
Neo4j Cloud
AWS LambdaGCP Functions
Static CDN
GraphQL Deployment
https://blog.apollographql.com/deploy-a-fullstack-apollo-app-with-netlify-45a7dfd51b0b55
GRANDstack
57https://github.com/grand-stack/grandstack.io/issues/1
GraphQL ClientsApollo Client Alternatives
58
● Most popular ● Frontend integrations for:
○ React, Angular, vue.js, scala.js,iOS, Android, etc
● Relay● urql● graphql-request● GraphiQL● GraphQL Playground● fetch● <any http client>
Apollo Client (for React)
59
Apollo Client (for React)
60
Apollo Client (for React)
61
62
Query GraphQL endpointRender our table
63
<Query> component
64
Handle GraphQL response and render table
65
Authorization In GraphQL
66
Authorization In GraphQL
67
Lots of options…
● Authorization In Resolvers● Business Logic / Data Access Layer● Wrapping Resolvers● Schema Directives
68
Authorization In GraphQL
Pros:● Easy to implement● Fast prototyping
Cons:● No single source of truth● Duplicated logic
69
Authorization In Resolver
Pros:● Flexible request
processing● Single implementation
Cons:● How to handle generated
resolvers (GraphQL engines)?
70
Auth In Business Logic / Data Access Layer
https://graphql.org/learn/authorization/
Pros: ● Permissions defined
together, single source for auth rules
Cons:● Permissions must match
resolvers● Difficult to work with
generated resolvers
Wrapping Resolvers - GraphQL Shield
https://github.com/maticzav/graphql-shield
Pros:● Declarative way to define
permissions by annotating type definitions
● Works with generated resolvers
GraphQL Schema Directives For Auth
Cons:● Spreads auth rules across
the GraphQL schema
● Identifier preceded by “@”, with optional arguments● A way of extending a GraphQL schema by annotationing type
definitions. ● Custom logic defined on server
What’s a Schema Directive?
https://www.apollographql.com/docs/graphql-tools/schema-directives.html
How To Implement Custom Directives
https://www.apollographql.com/docs/graphql-tools/schema-directives.html#Implementing-schema-directives
● Don’t need to implement our own auth directives
● Works with JWTs● Implements:
@isAuthenticated
@hasRole
@hasScope
● Included in neo4j-graphql.js
graphql-auth-directives npm module
https://www.npmjs.com/package/graphql-auth-directives
● Can be used on Types or Fields● User must be authenticated to access the resource
○ Request contains a valid signed JWT
@isAuthenticated
https://www.npmjs.com/package/graphql-auth-directives
● Can be used on Types or Fields● Request must contain a valid signed JWT and roles claim must
include specified role
@hasRole
https://www.npmjs.com/package/graphql-auth-directives
● Can be used on Query or Mutation fields● Request must contain a valid signed JWT and scopes claim must
include specified claim for that operation
@hasScope
https://www.npmjs.com/package/graphql-auth-directives
How To Use graphql-auth-directives
With Auth0?
79
● Cryptographically signed claims embedded in a token
● Claims specified in payload
Json Web Token (JWT)
jwt.io
How to add claims?
● Assign role● Does email address
end in @grandstack.io?○ Yes → admin role○ No → user role
JWTs & Auth0 Rules
https://auth0.com/docs/rules
Auth0 Client Code
https://auth0.com/docs/quickstart/spa/react/01-login
● Apollo Client used to interact with GraphQL API
● Use apollo-link to add JWT to request header
JWTs & Auth0 Apollo Client
● Resolvers generated by neo4j-graphql.js
● Enable auth
● Attach request headers (and database driver) to context object
Apollo Server
Demo
86 https://github.com/johnymontana/grand-stack-starter-auth0-demo
Add parameters from context object into generated Cypher query
Fine Grained Auth
Resources
88
● JavaScript○ Apollo Server apollographql.com○ graphql-js graphql.org
● Java○ GraphQL Java graphql-java.com
● Python○ Graphene graphene-python.org
● Ruby○ GraphQL Ruby graphql-ruby.org
89
GraphQL Implementations (Server)
● Open GraphQL Medium publication○ https://medium.com/open-graphql
● GRANDstack Starter Project○ https://grandstack.io/
● GraphQL.org○ https://graphql.org/
90
GraphQL Resources
GRANDstack.io
91
92
grandstack.io/docs/neo4j-graphql-js-api.html
94
neo4jsandbox.com
Questions?
95
(you)-[:HAVE]->(question)<-[:ANSWERS]-(will)
96