GraphQL the holy contract between client and server
6 likes745 views
Talk in Russian at @HolyJSconf in Moscow (10.12.2017) 1 - Intro 11 - GraphQL basics 29 - Demo 33 - Static Analysis 51 - GraphQL query problems 54 - Schema construction problems 77 - Graphql-compose packages 90 - Last words 93 - Take away
![GraphQL Basics24
• types
• fields
• args
• docs
• resolve
• directives
• input types
• enums
• interfaces
• unions
type Customer {
id: Int
name: String
# List of Invoices for current Customer
invoices(limit: Int): [Invoice]
}
# Show me the money
type Invoice {
id: Int
customerId: Int
amount: Decimal
# Customer data for current Invoice
customer: Customer
oldField: Int @deprecated(reason: "will be removed")
}
SDL format
(txt)
Schema Introspection example](https://image.slidesharecdn.com/pavelchertorogovgraphqltheholycontract-betweenclientandserverv11-171215063947/85/GraphQL-the-holy-contract-between-client-and-server-24-320.jpg)
![Static Analysis
/* @flow */
/*::
export type BalanceQueryResponse = {|
+viewer: ?{|
+cabinet: ?{|
+accountBalance: ?number;
|};
|};
|};
*/
44
Generated Response Type Def
Writer time: 0.53s [0.37s compiling, …]
Created:
- BalanceQuery.graphql.js
Unchanged: 291 files
Written default in 0.61s
__generated__/BalanceQuery.graphql.js
JS CLIENT
File with
GraphQL Query
and Response processing
Watcher Flowtype
File with
Response Type Defs
3
4
5](https://image.slidesharecdn.com/pavelchertorogovgraphqltheholycontract-betweenclientandserverv11-171215063947/85/GraphQL-the-holy-contract-between-client-and-server-44-320.jpg)
![Problem #4: import { makeExecutableSchema } from ‘graphql-tools';
Writing Types via SDL and providing resolvers separately.
71
const schema = makeExecutableSchema({ typeDefs, resolvers });
const typeDefs = `
type Query {
customer(id: Int!): Customer
invoices(limit: Int): [Invoice]
}
type Customer {
id: Int!
firstName: String
invoices: [Invoice]
}`;
It’s nice developer experience for small to medium sized schema BUT…
const resolvers = {
Query: {
customer: (_, { id }) =>
Customer.find({ id: id }),
invoices: (_, { limit }) =>
Invoice.findMany({ limit }),
},
Customer: {
invoices: (source) =>
Invoice.find({ customerId: source.id }),
},
};
type args resolve](https://image.slidesharecdn.com/pavelchertorogovgraphqltheholycontract-betweenclientandserverv11-171215063947/85/GraphQL-the-holy-contract-between-client-and-server-71-320.jpg)
![Problem #4: import { makeExecutableSchema } from ‘graphql-tools';72
• If one InputType used in several resolvers, then the
complexity of refactoring increases dramatically.
Hard to work with complex input args
type Query {
invoices(filter: FilterInput): [Invoice]
}
input FilterInput {
num: Int
dateRange: DateRangeInput
status: InvoiceStatusEnum
}
input DateRangeInput {
min: Date
max: Date
}
enum InvoiceStatusEnum {
unpaid paid declined
}
invoices: (_, { filter }) => {
const { num, dateRange, status } = filter;
const q = {};
if (num) q.num = num;
if (dateRange)
q['date.$inRange'] = dateRange;
if (status) q.status = status;
return Post.findMany(q);
},
• If one InputType per resolver, then too much
copy/paste almost similar types.
All highlighted parts with red lines should be in sync
* This example contains an error in the code, try to find it ;)](https://image.slidesharecdn.com/pavelchertorogovgraphqltheholycontract-betweenclientandserverv11-171215063947/85/GraphQL-the-holy-contract-between-client-and-server-72-320.jpg)
![Problem #4: import { makeExecutableSchema } from ‘graphql-tools';75
type Query {
invoices(filter: FilterInput): [Invoice]
}
invoices: (_, { filter }) => { … }
{
type: new GraphQLList(Invoice),
args: {
filter: { type: new GraphQLInputObjectType({ … })},
},
resolve: (_, { filter }) => { … },
}
combine code from different places
back to FieldConfig
type args resolve
type
args
resolve](https://image.slidesharecdn.com/pavelchertorogovgraphqltheholycontract-betweenclientandserverv11-171215063947/85/GraphQL-the-holy-contract-between-client-and-server-75-320.jpg)
![Problem #4: import { makeExecutableSchema } from ‘graphql-tools';76
type Query {
invoices(filter: FilterInput): [Invoice]
}
invoices: (_, { filter }) => { … }
{
type: [Invoice],
args: {
filter: `input FilterInput { … }`,
},
resolve: (_, { filter }) => { … },
}
my code with
graphql-compose
combine code from different places
back to FieldConfig](https://image.slidesharecdn.com/pavelchertorogovgraphqltheholycontract-betweenclientandserverv11-171215063947/85/GraphQL-the-holy-contract-between-client-and-server-76-320.jpg)
![graphql-compose packages82
const InvoiceTC = TypeComposer.create({
name: 'Invoice',
fields: {
id: 'Int!',
now: {
type: 'Date',
resolve: () => Date.now()
},
items: () => [InvoiceItemTC],
},
});
SDL syntax inside
Type as function, [ ] as List
Config Object Syntax
for complex types
Graphql-compose provides handy syntax for manual
type creation](https://image.slidesharecdn.com/pavelchertorogovgraphqltheholycontract-betweenclientandserverv11-171215063947/85/GraphQL-the-holy-contract-between-client-and-server-82-320.jpg)
![graphql-compose packages83
TC.hasField('lon'); // boolean
TC.getFieldNames(); // ['lon', 'lat']
TC.getField('lon'); // FieldConfig
TC.getField('lon'); // return FieldConfig
TC.getFields(); // { lon: FieldConfig, lat: FieldConfig }
TC.setFields({ ... }); // completely replace all fields
TC.setField('lon', { ... }); // replace `lon` field with new FieldConfig
TC.removeField('lon');
TC.removeOtherFields(['lon', 'lat']); // will remove all other fields
TC.reorderFields(['lat', 'lon']); // reorder fields, lat becomes first
TC.deprecateFields({ 'lat': 'deprecation reason' }); // mark field as deprecated
TC.getFieldType('lat'); // GraphQLFloat
TC.getFieldTC('complexField'); // TypeComposer
TC.getFieldArgs('lat'); // returns map of args config or empty {} if no args
TC.hasFieldArg('lat', 'arg1'); // false
TC.getFieldArg('lat', 'arg1'); // returns arg config
TC.addFields({ field1: …, field2: … });
TC.removeField(['field2', ‘field3']);
TC.extendField('lat', { description: 'Latitude', resolve: () => {} });
TOP 3 commonly
used methods
Bunch of other
useful methods
Graphql-compose provides methods
for modifying Types](https://image.slidesharecdn.com/pavelchertorogovgraphqltheholycontract-betweenclientandserverv11-171215063947/85/GraphQL-the-holy-contract-between-client-and-server-83-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to GraphQL the holy contract between client and server (20)
Ad
Recently uploaded (20)
Ad
GraphQL the holy contract between client and server
- 1. GraphQL the holy contract between client and server
- 2. Pavel Chertorogov @nodkz with GraphQL since 2015
- 4. Intro4 Client-server apps SERVER CLIENTS NodeJS C# .NET Go Java Python Ruby etc… Browsers iOS Android etc… MySQL MongoDB ES PostgreSQL Redis etc… HTTP WS HTML REST XML JSON etc… URL url-encoded form-data etc…
- 5. Intro5 Invoice Customer id name id customer_id amount 1* date Simple DB Schema Diagram Backend capabilities
- 6. Intro6 Drupal8 Schema (60 tables) SalesLogix Schema (168 tables) Wordpress 4.4.2 Schema (12 tables)
- 7. Intro7 … and even more Monster with 333 tables Magento: Commerce Solutions for Selling Online (333 tables)Hi-Res: http://anna.voelkl.at/wp-content/uploads/2016/12/ce2.1.3.png Order table (138 fields)
- 8. Intro8 How to create API for this db-schema HELL?
- 9. Intro9 Wait! I have a better plan!
- 10. GraphQL Basics10 Wikipedia MBT-70 schema This is GraphQL Schema
- 12. GraphQL Basics12 GraphQL – is a … query language for APIs query executor on Schema for Frontenders for Backenders + NodeJS C# .NET Go Python Ruby etc…
- 13. GraphQL Basics13 GraphQL Query Language GraphQL query Response in JSON
- 14. GraphQL Basics14 GraphQL Query Language GraphQL query Response in JSON
- 15. GraphQL Basics15 GraphQL Schema Query Mutation Subscription Type Single entrypoint READ (stateless) WRITE (stateless) EVENTS (stateful) GraphQL Schema Type Type
- 16. GraphQL Basics16 Type Field 1 Field N Invoice id customerId amount Type Field Field Field date Field ObjectType Name Name
- 17. GraphQL Basics17 Function with fetch logic from any data source Type Args Resolve Scalar or Object Type which returns resolve Set of input args for resolve function Description DeprecationReason Documentation Field hiding Type Field 1 Field N Field Config
- 18. GraphQL Basics18 Invoice Customer id name id customerId amount 1 * Type Type Field Field Field Field Field date Field Int Int Int String Decimal Date Relations between types id
- 19. GraphQL Basics19 Invoice Customer1* One does not simply draw a relation line in GraphQL!
- 20. GraphQL Basics20 Invoice Customer id name id customerId amount Type Type Field Field Field Field Field customer invoices Field date Field select * from customer where id = {invoice.customerId} select * from invoice where customer_id = {customer.id} Field Resolve Resolve Customer Array<Invoice> Relation is a new field in your Type
- 21. GraphQL Basics21 Invoice Customer id name id customerId amount Type Type Field Field Field Field Field invoices Field date Field select * from invoice where customer_id = {customer.id} limit {args.limit} Resolve Args Limit: 3 — Limit? Offset? Sort? Additional filtering? — No problem, add them to args and process in resolve function! Array<Invoice>
- 22. GraphQL Basics22 function // fetch data logic (from any mix of DBs) // access logic (check permissions) ANY PRIVATE BUSINESS LOGIC… // processing logic (operations, calcs) source, args, context, info( ) { } return data; Resolve function
- 23. GraphQL Basics23 ResolveJust remove and you get PUBLIC schema functions printSchema(schema); // txt output (SDL format) graphql(schema, introspectionQuery); // json output (AST) (private business logic) Schema Introspection
- 24. GraphQL Basics24 • types • fields • args • docs • resolve • directives • input types • enums • interfaces • unions type Customer { id: Int name: String # List of Invoices for current Customer invoices(limit: Int): [Invoice] } # Show me the money type Invoice { id: Int customerId: Int amount: Decimal # Customer data for current Invoice customer: Customer oldField: Int @deprecated(reason: "will be removed") } SDL format (txt) Schema Introspection example
- 25. GraphQL Basics25 an ability for awesome tooling: GraphiQL — graphical interactive in-browser GraphQL IDE Eslint-plugin-graphql — check queries in your editor, CI Relay-compiler — generates type definitions from queries • Autocompletion • Query validation • Documentation • Visualization • TypeDefs generation for static analysis (Flow, TypeScript) Schema Introspection provides
- 26. GraphQL Basics26 const QueryType = new GraphQLObjectType({ name: 'Query', fields: () => ({ films: { type: new GraphQLList(FilmType), args: { limit: { type: GraphQLInt, defaultValue: 5 }, }, resolve: async (source, args) => { const data = await loadData(`https://swapi.co/api/films/`); return data.slice(0, args.limit); }, }, ...otherFields, }), }); Type definition example
- 27. GraphQL Basics27 const QueryType = new GraphQLObjectType({ name: 'Query', fields: () => ({ films: { type: new GraphQLList(FilmType), args: { limit: { type: GraphQLInt, defaultValue: 5 }, }, resolve: async (source, args) => { const data = await loadData(`...`); return data.slice(0, args.limit); }, }, ...otherFields, }), }); Query Type type args resolve field FieldConfig Type Args Resolve Description DeprecationReason Type Field 1 Field N Type definition example
- 28. GraphQL Basics28 • input types • directives • enums • interfaces • unions • fragments Don’t forget to read about http://graphql.org/learn/
- 30. 30 REST API GraphQL Fetch sub-fetch 1 sub-fetch 2 sub-fetch N Network Delay Network Delay RESULT Query Network Delay RESULT - Sub-fetch logic on client side (increase bundle size) + Sub-fetch logic implemented on server side + No additional network round-trip (speed) - Over-fetching (redundant data transfer/parsing) + Exactly requested fields (speed)
- 31. Intro31 A copy from one of the previous slides… Client-server apps SERVER CLIENTS NodeJS C# .NET Go Java Python Ruby etc… Browsers iOS Android etc… MySQL MongoDB ES PostgreSQL Redis etc… HTTP WS HTML REST XML JSON etc… URL url-encoded form-data etc…
- 32. 32 GraphQL – is a query language for APIs NodeJS C# .NET Go Java PythonRuby etc… Browsers iOS Androidetc… MySQL MongoDB ES PostgreSQL Redis etc… HTTP WS etc… SERVER CLIENTS Specification for describing the capabilities and requirements of data models for client‐server apps SCHEMA INTROSPECTION Pretty QUERY Language
- 34. Static Analysis34 PRODUCTIVITY • Holy refactoring Static type checks 🚀 • Functions call checks • Types checks • Auto-suggestion Static program analysis is the analysis of computer software that is performed without actually executing programs
- 35. Static Analysis35 Let’s turbo-charge our client apps static analysis with GraphQL queries SERVER JS CLIENT File with GraphQL Query and Response processing GraphQL Schema
- 36. Static Analysis36 SERVER JS CLIENT File with GraphQL Query and Response processing Schema Introspection GraphQL Schema 1
- 37. Static Analysis37 Relay-compiler Apollo-codegen SERVER JS CLIENT File with GraphQL Query and Response processing Schema Introspection GraphQL Schema Watcher 1 2
- 38. Static Analysis38 Hey, you have a wrong Query SERVER JS CLIENT File with GraphQL Query and Response processing Schema Introspection GraphQL Schema Watcher File with Response Type Defs 1 2 3
- 39. Static Analysis39 SERVER JS CLIENT File with GraphQL Query and Response processing Schema Introspection GraphQL Schema Watcher File with Response Type Defs 1 2 3 4
- 40. Static Analysis SERVER JS CLIENT File with GraphQL Query and Response processing Schema Introspection GraphQL Schema Watcher Flowtype File with Response Type Defs 1 2 3 4 5 40 or TypeScript
- 41. Static Analysis41 SERVER JS CLIENT File with GraphQL Query and Response processing Schema Introspection GraphQL Schema Watcher Flowtype File with Response Type Defs 1 2 3 4 5 Houston, we have a Type Check problem at line 19287 col 5: possible undefined value 6
- 42. Static Analysis42 GraphQL Query Generated Response Type Def Flow error Crappy Code DEMO Flow typed Code
- 43. Static Analysis import { graphql } from 'react-relay'; const query = graphql` query BalanceQuery { viewer { cabinet { accountBalance } } }`; 43 GraphQL Query Balance.js JS CLIENT File with GraphQL Query and Response processing Watcher Flowtype File with Response Type Defs 3 4 5
- 44. Static Analysis /* @flow */ /*:: export type BalanceQueryResponse = {| +viewer: ?{| +cabinet: ?{| +accountBalance: ?number; |}; |}; |}; */ 44 Generated Response Type Def Writer time: 0.53s [0.37s compiling, …] Created: - BalanceQuery.graphql.js Unchanged: 291 files Written default in 0.61s __generated__/BalanceQuery.graphql.js JS CLIENT File with GraphQL Query and Response processing Watcher Flowtype File with Response Type Defs 3 4 5
- 45. Static Analysis45 Crappy Codeimport { graphql } from 'react-relay'; import * as React from 'react'; export default class Balance extends React.Component { render() { const { viewer } = this.props; return <div> Balance {viewer.cabinet.accountBalance} </div>; } } const query = graphql`query BalanceQuery { viewer { cabinet { accountBalance } } }`; Balance.js JS CLIENT File with GraphQL Query and Response processing Watcher Flowtype File with Response Type Defs 3 4 5
- 46. Static Analysis46 Flow typed Code import { graphql } from 'react-relay'; import * as React from 'react'; import type { BalanceQueryResponse } from './__generated__/BalanceQuery.graphql'; type Props = BalanceQueryResponse; export default class Balance extends React.Component<Props> { render() { const { viewer } = this.props; return <div>Balance {viewer.cabinet.accountBalance}</div>; } } const query = graphql`query BalanceQuery { viewer { cabinet { accountBalance } } }`; Balance.js JS CLIENT File with GraphQL Query and Response processing Watcher Flowtype File with Response Type Defs 3 4 5
- 47. Static Analysis47 Flow typed Code/* @flow */ import { graphql } from 'react-relay'; import * as React from 'react'; import type { BalanceQueryResponse } from './__generated__/BalanceQuery.graphql'; type Props = BalanceQueryResponse; export default class Balance extends React.Component<Props> { render() { const { viewer } = this.props; return <div>Balance {viewer.cabinet.accountBalance}</div>; } } const query = graphql`query BalanceQuery { viewer { cabinet { accountBalance } } }`; Balance.js JS CLIENT File with GraphQL Query and Response processing Watcher Flowtype File with Response Type Defs 3 4 5
- 48. Static Analysis48 Error: src/_demo/Balance.js:11 11: return <div>Your balance: {viewer.cabinet.accountBalance}</div>; ^^^^^^^ property `cabinet`. Property cannot be accessed on possibly null value 11: return <div>Your balance: {viewer.cabinet.accountBalance}</div>; ^^^^^^ null Error: src/_demo/Balance.js:11 11: return <div>Your balance: {viewer.cabinet.accountBalance}</div>; ^^^^^^^ property `cabinet`. Property cannot be accessed on possibly undefined value 11: return <div>Your balance: {viewer.cabinet.accountBalance}</div>; ^^^^^^ undefined Flow errors
- 49. Static Analysis49 type Props = BalanceQueryResponse; class Balance extends React.Component<Props> { render() { const { viewer } = this.props; return <div>{viewer.invoices}</div>; } } Flow errors for missing field
- 50. Static Analysis50 Error: src/_demo/Balance.js:11 11: return <div>{viewer.invoices}</div>; ^^^^^^^^ property `invoices`. Property not found in v- 13: +viewer: ?{| 14: +cabinet: ?{| 15: +accountBalance: ?number; 16: |}; 17: |}; -^ object type. See: src/_demo/__generated__/ BalanceQuery.graphql.js:13 Flow errors for missing field
- 52. GraphQL Query Problems52 Denial of Service attacks • pre-approve queries that the server can execute (persisted queries by unique ID) query HugeResponse { user { friends(limit: 1000) { friends(limit: 1000) { friends(limit: 1000) { ... } } } } } aka Resource exhaustion attaks • cost analysis on the query using by Facebook Solutions: • avoid nesting relations
- 53. GraphQL Query Problems53 query NestedQueryN1 { { productList { id categoryId category { id name } } } } N+1 query problem 1 query for ProductList N queries for fetching every Category by id Solution: DataLoader const CatLoader = new DataLoader( ids => Category.findByIds(ids) ); CatLoader.load(1); CatLoader.load(2); CatLoader.load(1); CatLoader.load(4); will do just one BATCH request on next tick to the Database
- 55. Problem #1: too much copy/paste55 const QueryType = new GraphQLObjectType({ name: 'Query', fields: () => ({ films: ..., persons: ..., planets: ..., species: ..., starships: ..., vehicles: ..., }), }); 6 fields and every FieldConfig consists from almost identical 12 ctrl+c/ctrl+v lines Query Type example https://swapi.co The Star Wars API
- 56. Problem #1: too much copy/paste56 films: { type: new GraphQLList(FilmType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: async (source, args) => { const data = await loadData(`https://swapi.co/api/films/`); if (args && args.limit > 0) { return data.slice(0, args.limit); } return data; }, FieldConfig example for films field
- 57. Problem #1: too much copy/paste { films: { type: new GraphQLList(FilmType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: async (source, args) => { const data = await loadData(`https://swapi.co/api/films/`); if (args && args.limit > 0) { return data.slice(0, args.limit); } return data; }, }, planets: { type: new GraphQLList(PlanetType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: async (source, args) => { const data = await loadData(`https://swapi.co/api/planets/`); if (args && args.limit > 0) { return data.slice(0, args.limit); } return data; }, }, } 57 differs only by url Comparison of two FieldConfigs
- 58. Problem #1: too much copy/paste58 function createListResolve(url) { return async (source, args) => { const data = await loadData(url); if (args && args.limit > 0) { return data.slice(0, args.limit); } return data; }; } Solution 1: you may generate your resolve functions create a function which returns a resolve function
- 59. Problem #1: too much copy/paste films: { type: new GraphQLList(FilmType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: createListResolve(`https://swapi.co/api/films/`), }, planets: { type: new GraphQLList(PlanetType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: createListResolve(`https://swapi.co/api/planets/`), }, { films: { type: new GraphQLList(FilmType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: async (source, args) => { const data = await loadData(`https://swapi.co/api/films/`); if (args && args.limit > 0) { return data.slice(0, args.limit); } return data; }, }, planets: { type: new GraphQLList(PlanetType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: async (source, args) => { const data = await loadData(`https://swapi.co/api/planets/`); if (args && args.limit > 0) { return data.slice(0, args.limit); } return data; }, }, } 59 Solution 1: you may generate your resolve functions reduce N times 7 LoC to 1 LoC
- 60. Problem #1: too much copy/paste films: { type: new GraphQLList(FilmType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: createListResolve(`https://swapi.co/api/films/`), }, planets: { type: new GraphQLList(PlanetType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: createListResolve(`https://swapi.co/api/planets/`), }, 60 Solution 2: you may generate your FieldConfigs differs only by `Type` and `url`
- 61. Problem #1: too much copy/paste61 function createFieldConfigForList(type, url) { return { type: new GraphQLList(type), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: createListResolve(url), }; } Solution 2: you may generate your FieldConfigs create a function which returns a FieldConfig
- 62. Problem #1: too much copy/paste62 films: { type: new GraphQLList(PlanetType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: createListResolve(`https://swapi.co/api/films/`), }, planets: { type: new GraphQLList(FilmType), args: { limit: { type: GraphQLInt, defaultValue: 5 } }, resolve: createListResolve(`https://swapi.co/api/planets/`), }, { films: createFieldConfigForList(FilmType, `https://swapi.co/api/films/`), planets: createFieldConfigForList(PlanetType, `https://swapi.co/api/planets/`), } 10 LoC reduced to 2 LoC Solution 2: you may generate your FieldConfigs
- 63. Problem #1: too much copy/paste63 DRY principle (don't repeat yourself) was reduced in 3 times 90 LoC 30 LoC Solution 1: you may generate your resolve functions Solution 2: you may generate your FieldConfigs
- 64. Problem #2: keep GraphQL types in sync with ORM/DB64 With time you may: • add new fields • change field types • remove fields • rename fields Model: User Type: User SYNC How to keep to Schemas in SYNC?
- 65. Problem #2: keep GraphQL types in sync with ORM/DB65 GENERATE • via some cli/script • on server boot load (better) Solution: generate GraphQL types from ORM models SSOT principle (single source of truth) Model: User Type: User
- 66. Problem #3: mess in types and resolve functions66 InvoiceType.js CustomerType.js id name id customerId amount customer invoices date select * from CUSTOMER where … select * from INVOICE where … Resolve Resolve InvoiceType.js contains CUSTOMER query CustomerType.js contains INVOICE query
- 67. Problem #3: mess in types and resolve functions67 select * from INVOICES where … CustomerType.js id name invoices transactions tickets events likes messages … select * from TRANSACTIONS where … select * from TICKETS where … select * from EVENTS where … select * from LIKES where … select * from MESSAGES where … select * from … CustomerType.js knows too much about queries of others types
- 68. Problem #3: mess in types and resolve functions68 AdminNoteType.js id msg Customer Product Invoice … Resolve Resolve Resolve Resolve What if you need to restrict access for some group of users? Modify resolvers in all places?
- 69. Problem #3: mess in types and resolve functions69 Solution: GraphQL Models* * “GraphQL Model” is not a part of GraphQL specification. It’s suggested additional layer of abstraction for more comfortable way to construct and maintain your schema and relations into it.
- 70. Problem #3: mess in types and resolve functions class CustomerGQLModel { type: CustomerGraphQLType; resolvers: { findById: { type: CustomerGraphQLType, args: { id: 'Int!' }, resolve: (_, args) => load(`select * from customer where id = ${args.id}`), }, findMany: { ... }, createOne: { ... }, updateOne: { ... }, removeOne: { ... }, ... }; inputType: CustomerGraphQLInputType; } 70 1. type definition Contains: 2. all possible ways to CRUD data 3. may have other helper methods and data Type MAP<FieldConfig> InputType 1 2 3 Solution: GraphQL Models
- 71. Problem #4: import { makeExecutableSchema } from ‘graphql-tools'; Writing Types via SDL and providing resolvers separately. 71 const schema = makeExecutableSchema({ typeDefs, resolvers }); const typeDefs = ` type Query { customer(id: Int!): Customer invoices(limit: Int): [Invoice] } type Customer { id: Int! firstName: String invoices: [Invoice] }`; It’s nice developer experience for small to medium sized schema BUT… const resolvers = { Query: { customer: (_, { id }) => Customer.find({ id: id }), invoices: (_, { limit }) => Invoice.findMany({ limit }), }, Customer: { invoices: (source) => Invoice.find({ customerId: source.id }), }, }; type args resolve
- 72. Problem #4: import { makeExecutableSchema } from ‘graphql-tools';72 • If one InputType used in several resolvers, then the complexity of refactoring increases dramatically. Hard to work with complex input args type Query { invoices(filter: FilterInput): [Invoice] } input FilterInput { num: Int dateRange: DateRangeInput status: InvoiceStatusEnum } input DateRangeInput { min: Date max: Date } enum InvoiceStatusEnum { unpaid paid declined } invoices: (_, { filter }) => { const { num, dateRange, status } = filter; const q = {}; if (num) q.num = num; if (dateRange) q['date.$inRange'] = dateRange; if (status) q.status = status; return Post.findMany(q); }, • If one InputType per resolver, then too much copy/paste almost similar types. All highlighted parts with red lines should be in sync * This example contains an error in the code, try to find it ;)
- 73. Problem #4: import { makeExecutableSchema } from ‘graphql-tools'; Solution: build the schema programmatically Generate FieldConfigs via your custom functions (Resolvers) … 73 class InvoiceGQLModel { findManyResolver(configOptions) { return { type: InvoiceType, args: { filter: { type: new GraphQLInputObjectType({ … })}, }, resolve: (_, args) => Invoice.findMany(args), } } findByIdResolver() { … } … … and then … type args resolve
- 74. Problem #4: import { makeExecutableSchema } from ‘graphql-tools';74 import { GraphQLSchema, GraphQLObjectType } from 'graphql'; import InvoiceResolvers from './InvoiceResolvers'; const schema = new GraphQLSchema({ query: new GraphQLObjectType({ name: 'Query', fields: { invoices: InvoiceResolvers.findManyResolver(), ... }, }), }); http://graphql.org/graphql-js/constructing-types/ Solution: build the schema programmatically …and then build your Schema from fields and your Resolvers
- 75. Problem #4: import { makeExecutableSchema } from ‘graphql-tools';75 type Query { invoices(filter: FilterInput): [Invoice] } invoices: (_, { filter }) => { … } { type: new GraphQLList(Invoice), args: { filter: { type: new GraphQLInputObjectType({ … })}, }, resolve: (_, { filter }) => { … }, } combine code from different places back to FieldConfig type args resolve type args resolve
- 76. Problem #4: import { makeExecutableSchema } from ‘graphql-tools';76 type Query { invoices(filter: FilterInput): [Invoice] } invoices: (_, { filter }) => { … } { type: [Invoice], args: { filter: `input FilterInput { … }`, }, resolve: (_, { filter }) => { … }, } my code with graphql-compose combine code from different places back to FieldConfig
- 78. graphql-compose packages78 Graphql-compose-* The main idea is to generate GraphQL Schema from your ORM/Mappings at the server startup with a small lines of code as possible. — OSS packages family for generating GraphQL Types MIT License Exposes Flowtype/Typescript declarations With awful docs all packages have more than 460 starts on GitHub Help wanted
- 79. graphql-compose packages Graphql-compose 79 It bundles your Schema webpackworks almost like a from different type sources
- 80. graphql-compose packages80 ORM Schema, Mapping TypeComposer with Resolvers GraphQL Schema Generate editable GraphQL Types with a set of CRUD Resolvers (FieldConfigs w/ args, type, resolve) Remove/add fields Wrap default Resolvers with custom business logic Create own Resolvers (FieldConfigs) Build relations between types Manually created TypeComposers or Vanilla GraphQL types 1 2 3 Schema creation workflow
- 81. graphql-compose packages81 const InvoiceItemTC = TypeComposer.create(` type InvoiceItem { description: String qty: Int price: Float } `); SDL syntax for simple types (schema definition language) Graphql-compose provides handy syntax for manual type creation
- 82. graphql-compose packages82 const InvoiceTC = TypeComposer.create({ name: 'Invoice', fields: { id: 'Int!', now: { type: 'Date', resolve: () => Date.now() }, items: () => [InvoiceItemTC], }, }); SDL syntax inside Type as function, [ ] as List Config Object Syntax for complex types Graphql-compose provides handy syntax for manual type creation
- 83. graphql-compose packages83 TC.hasField('lon'); // boolean TC.getFieldNames(); // ['lon', 'lat'] TC.getField('lon'); // FieldConfig TC.getField('lon'); // return FieldConfig TC.getFields(); // { lon: FieldConfig, lat: FieldConfig } TC.setFields({ ... }); // completely replace all fields TC.setField('lon', { ... }); // replace `lon` field with new FieldConfig TC.removeField('lon'); TC.removeOtherFields(['lon', 'lat']); // will remove all other fields TC.reorderFields(['lat', 'lon']); // reorder fields, lat becomes first TC.deprecateFields({ 'lat': 'deprecation reason' }); // mark field as deprecated TC.getFieldType('lat'); // GraphQLFloat TC.getFieldTC('complexField'); // TypeComposer TC.getFieldArgs('lat'); // returns map of args config or empty {} if no args TC.hasFieldArg('lat', 'arg1'); // false TC.getFieldArg('lat', 'arg1'); // returns arg config TC.addFields({ field1: …, field2: … }); TC.removeField(['field2', ‘field3']); TC.extendField('lat', { description: 'Latitude', resolve: () => {} }); TOP 3 commonly used methods Bunch of other useful methods Graphql-compose provides methods for modifying Types
- 84. graphql-compose packages84 InvoiceTC.addField('items', { type: () => ItemsTC, resolve: (source) => { return Items.find({ invoiceId: source.id }) }, }); Graphql-compose create relations between Types via FieldConfig Type as function solves hoisting problems
- 85. graphql-compose packages85 InvoiceTC.addRelation('items', { resolver: () => ItemsTC.getResolver('findMany'), prepareArgs: { filter: source => ({ invoiceId: source.id }), }, }); Graphql-compose create relations between Types via Resolvers Prepare args for Resolver
- 86. graphql-compose packages86 graphql-compose-mongoose graphql-compose-json graphql-compose-elasticsearch graphql-compose-pagination graphql-compose-connection graphql-compose-relay type generator resolver generator type/resolver modifier Graphql-compose is a great tool for writing your own type generators/plugins type generator resolver generator resolver generator type generator resolver generator http API wrapper graphql-compose-aws SDK API wrapper🌶
- 87. graphql-compose packages87 graphql-compose-aws ~700 lines of code, 2 days of work generates more than 10 000 GraphQL Types schema size ~2 Mb in SDL, ~9 Mb in json Huge GraphQL Schema example JUST IN 2 DAYS
- 88. graphql-compose packages88 125 Services 3857 Operations 6711 Input/Output params https://graphqlbin.com/plqhO AWS Cloud API in GraphQL Schema generation takes about ~1-2 seconds
- 89. graphql-compose packages89 https://github.com/nodkz/graphql-compose-examples https://github.com/lyskos97/graphql-compose-swapi Mongoose, Elastic, Northwind Wrapping REST API Graphql-compose schema demos https://graphql-compose.herokuapp.com https://graphql-compose-swapi.herokuapp.com
- 90. 90 Last words…
- 91. 91 GraphQL less network traffic less time on coding less errors less stress more success is awesome! 👍 PS. SOMETIMES A LOT LESS
- 93. 93 Take away! GraphQL is powerful query language with great tools GraphQL is typed so it helps with static analysis on clients Generate GraphQL Schemas on server
- 95. 95 GraphQL is a server and client apps for your