lyonwj.com fullstack graphql · 2019. 9. 12. · 1) graphql is an api query language, not a...
TRANSCRIPT
![Page 1: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/1.jpg)
Fullstack GraphQL
Building Fullstack Serverless GraphQL Applications In The Cloud
William [email protected]
DeveloperWeek CloudSeattleMay 2019
bit.ly/graphqlseattle
![Page 2: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/2.jpg)
William Lyon
Software Developer @Neo4j
● Integrations■ GraphQL■ Data Visualization
● Helping developers build graph applications
![Page 3: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/3.jpg)
● GraphQL Overview● How To Build A GraphQL API● GraphQL Engines
○ Database integrations● Deploying GraphQL services● Querying GraphQL
○ React● Authorization With GraphQL
3
Agenda
![Page 4: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/4.jpg)
● Fullstack framework for building applications
4
All About GRANDstack
grandstack.io
![Page 5: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/5.jpg)
What is GraphQL?
5graphql.org
An API query language and runtime for building APIs
![Page 6: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/6.jpg)
“Your Application Data Is A Graph” -- GraphQL
![Page 7: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/7.jpg)
7
Movies, Genres, Directors, Actors
![Page 8: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/8.jpg)
8
Movies, Genres, Directors, Actors
GraphQL Type Definitions● Defined using GraphQL
Schema Definition Language (SDL)
![Page 9: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/9.jpg)
9
Movies, Genres, Directors, Actors
Introspection● Schema can be queried ● Schema becomes API specification /
documentation● Tools like GraphiQL / GraphQL
Playground
![Page 10: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/10.jpg)
10
Movies, Genres, Directors, Actors
GraphQL query
![Page 11: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/11.jpg)
https://blog.apollographql.com/the-anatomy-of-a-graphql-query-6dffa9e9e747
Operation name and arguments
![Page 12: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/12.jpg)
12
Selection set
![Page 13: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/13.jpg)
13
GraphQL query
Movies, Genres, Directors, Actors
![Page 14: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/14.jpg)
14
GraphQL query
GraphQL response
Movies, Genres, Directors, Actors
![Page 15: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/15.jpg)
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?
![Page 16: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/16.jpg)
● 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
![Page 17: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/17.jpg)
● 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
![Page 18: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/18.jpg)
Example API & How It’s Built
18
![Page 19: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/19.jpg)
Example GraphQL APINeo4j Community Forum Trending Activity Feeds
19
community.neo4j.com
![Page 21: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/21.jpg)
How To Build A GraphQL Service
21
![Page 22: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/22.jpg)
22hackernoon.com/building-trending-activity-feeds-using-graphql-and-neo4j-e62ee790238e
![Page 23: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/23.jpg)
Community Graph
23
http://138.197.15.1:7474/browser/
user: community
password: community
![Page 24: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/24.jpg)
24
![Page 25: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/25.jpg)
Start With A GraphQL Schema
25
graphql.org/learn/schema/#type-language
![Page 26: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/26.jpg)
Start With A GraphQL Schema
26
Type Definitions
![Page 27: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/27.jpg)
Start With A GraphQL Schema
27
API Entry Point(s)Query & Mutation Types
![Page 28: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/28.jpg)
Start With A GraphQL Schema
28
API Entry Point(s)Query & Mutation Types
graphql.org/learn/schema/#type-language
![Page 29: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/29.jpg)
● Functions that define how to “resolve” data for GraphQL request
29
GraphQL Resolvers
graphql.org/learn/execution/#root-fields-resolvers
![Page 30: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/30.jpg)
30
Cypher Query
https://hackernoon.com/building-trending-activity-feeds-using-graphql-and-neo4j-e62ee790238e
![Page 31: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/31.jpg)
31
Resolvers
![Page 32: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/32.jpg)
Apollo Server
https://www.apollographql.com/docs/apollo-server/
![Page 33: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/33.jpg)
Apollo Server
33
![Page 34: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/34.jpg)
Apollo Server
34
![Page 35: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/35.jpg)
Apollo Server
35
![Page 36: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/36.jpg)
Apollo Server
36
![Page 38: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/38.jpg)
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
![Page 39: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/39.jpg)
GraphQL “Engines”
39
![Page 40: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/40.jpg)
● 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
![Page 41: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/41.jpg)
Neo4j-GraphQL
41
![Page 42: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/42.jpg)
● 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
![Page 43: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/43.jpg)
43
GraphQL First Development
![Page 44: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/44.jpg)
44
Generate Cypher From GraphQL
![Page 45: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/45.jpg)
45
Extend GraphQL w/ Cypher
grandstack.io/docs/neo4j-graphql-js.html#cypher-directive
@cypher GraphQL schema directive
![Page 47: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/47.jpg)
47
neo4j-graphql-js
neo4j-graphql-jsapollo-server
![Page 48: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/48.jpg)
Demo
48
GRANDstack starter project
grandstack.io
![Page 49: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/49.jpg)
GRANDstack.io
49
![Page 50: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/50.jpg)
● 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”
![Page 51: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/51.jpg)
How Do GraphQL Engines Generate Database Queries From GraphQL Requests?
resolveInfo resolver argument ● GraphQL query AST● GraphQL schema● Selection set● Variables● ...
51
![Page 52: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/52.jpg)
Deploying A GraphQL Service
![Page 53: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/53.jpg)
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
![Page 54: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/54.jpg)
54
neo4j-graphql-jsapollo-server
Neo4j Cloud
AWS LambdaGCP Functions
Static CDN
GraphQL Deployment
![Page 55: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/55.jpg)
https://blog.apollographql.com/deploy-a-fullstack-apollo-app-with-netlify-45a7dfd51b0b55
![Page 57: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/57.jpg)
GRANDstack
57https://github.com/grand-stack/grandstack.io/issues/1
![Page 58: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/58.jpg)
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>
![Page 59: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/59.jpg)
Apollo Client (for React)
59
![Page 60: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/60.jpg)
Apollo Client (for React)
60
![Page 61: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/61.jpg)
Apollo Client (for React)
61
![Page 62: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/62.jpg)
62
Query GraphQL endpointRender our table
![Page 63: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/63.jpg)
63
<Query> component
![Page 64: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/64.jpg)
64
Handle GraphQL response and render table
![Page 65: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/65.jpg)
65
![Page 66: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/66.jpg)
Authorization In GraphQL
66
![Page 67: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/67.jpg)
Authorization In GraphQL
67
![Page 68: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/68.jpg)
Lots of options…
● Authorization In Resolvers● Business Logic / Data Access Layer● Wrapping Resolvers● Schema Directives
68
Authorization In GraphQL
![Page 69: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/69.jpg)
Pros:● Easy to implement● Fast prototyping
Cons:● No single source of truth● Duplicated logic
69
Authorization In Resolver
![Page 70: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/70.jpg)
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/
![Page 71: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/71.jpg)
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
![Page 72: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/72.jpg)
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
![Page 73: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/73.jpg)
● 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
![Page 74: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/74.jpg)
How To Implement Custom Directives
https://www.apollographql.com/docs/graphql-tools/schema-directives.html#Implementing-schema-directives
![Page 75: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/75.jpg)
● 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
![Page 76: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/76.jpg)
● 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
![Page 77: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/77.jpg)
● 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
![Page 78: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/78.jpg)
● 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
![Page 79: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/79.jpg)
How To Use graphql-auth-directives
With Auth0?
79
![Page 80: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/80.jpg)
● Cryptographically signed claims embedded in a token
● Claims specified in payload
Json Web Token (JWT)
jwt.io
How to add claims?
![Page 82: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/82.jpg)
● Assign role● Does email address
end in @grandstack.io?○ Yes → admin role○ No → user role
JWTs & Auth0 Rules
https://auth0.com/docs/rules
![Page 83: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/83.jpg)
Auth0 Client Code
https://auth0.com/docs/quickstart/spa/react/01-login
![Page 84: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/84.jpg)
● Apollo Client used to interact with GraphQL API
● Use apollo-link to add JWT to request header
JWTs & Auth0 Apollo Client
![Page 85: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/85.jpg)
● Resolvers generated by neo4j-graphql.js
● Enable auth
● Attach request headers (and database driver) to context object
Apollo Server
![Page 86: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/86.jpg)
Demo
86 https://github.com/johnymontana/grand-stack-starter-auth0-demo
![Page 87: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/87.jpg)
Add parameters from context object into generated Cypher query
Fine Grained Auth
![Page 88: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/88.jpg)
Resources
88
![Page 89: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/89.jpg)
● 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)
![Page 90: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/90.jpg)
● Open GraphQL Medium publication○ https://medium.com/open-graphql
● GRANDstack Starter Project○ https://grandstack.io/
● GraphQL.org○ https://graphql.org/
90
GraphQL Resources
![Page 91: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/91.jpg)
GRANDstack.io
91
![Page 92: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/92.jpg)
92
grandstack.io/docs/neo4j-graphql-js-api.html
![Page 94: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/94.jpg)
94
neo4jsandbox.com
![Page 95: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/95.jpg)
Questions?
95
![Page 96: lyonwj.com Fullstack GraphQL · 2019. 9. 12. · 1) GraphQL is an API query language, not a database query language. 2) Limited expressivity (no projections, no aggregations, etc)](https://reader034.vdocuments.us/reader034/viewer/2022051608/603d35921fc8ba0ebd47fe01/html5/thumbnails/96.jpg)
(you)-[:HAVE]->(question)<-[:ANSWERS]-(will)
96