![GraphQL SDL - Schema
Definition Language
type Project {
id: ID! //"!" denotes a required field
name: String
tagline: String
contributors: [User]
}
type User {
id: ID!
name: String
age: Int
}
A schema is a collection of types, interfaces, enums, and unions that make up your API’s data model
Schema is strongly typed and self-documenting](https://image.slidesharecdn.com/graphql-usage-180412095316/85/Graphql-usage-10-320.jpg)
![Core Concepts: Type System
• Scalar Types: Int, Float, String, Boolean, ID
• Object Types: User, Project
• Entry points: Query, Mutation, Subscription
type Query {
projects: [Project]
project(id: ID!): Project
user(id: ID!): User
users: [User]
}
type Mutation {
addUser(user: UserInput): User
addProject(name: String!): Project
}](https://image.slidesharecdn.com/graphql-usage-180412095316/85/Graphql-usage-11-320.jpg)
![Apollo Graphql Server
const express = require('express');
const bodyParser = require('body-parser');
const { graphqlExpress, graphiqlExpress } = require('apollo-server-express');
const { makeExecutableSchema } = require('graphql-tools');
// Some fake data
const books = [ … ]
// The GraphQL schema in string form
const typeDefs = `
type Query { books: [Book] }
type Book { title: String, author: String }
`;
// The resolvers
const resolvers = {
Query: { books: () => books },
};
// Put together a schema
const schema = makeExecutableSchema({
typeDefs,
resolvers,
});
// Initialize the app
const app = express();
// The GraphQL endpoint
app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
// GraphiQL, a visual editor for queries
app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));
// Start the server
app.listen(3000, () => {
console.log('Go to http://localhost:3000/graphiql to run queries!');
});](https://image.slidesharecdn.com/graphql-usage-180412095316/85/Graphql-usage-19-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Graphql usage (20)
Ad
Recently uploaded (20)
Ad
Graphql usage
- 4. GraphQL History • 2012 - GraphQL created at Facebook • 2015 - GraphQL is open sourced, Relay Classic is open sourced (React tools) • 2016 - GitHub announces GraphQL API, New GraphQL website graphql.org, First GraphQL Summit (apollographql.com) • 2017 - Relay Modern 1.0, Apollo Client 2.0, Angular v5
- 5. GraphQL vs Rest • extra roundtrip with REST API, endpoint for each kind of data, keep a huge number of endpoints and maintain them. • Documentation that needs to be updated, won’t be updated • Support Different versions (/v1, /v2 etc)
- 6. latest GET /latest(.:format) list# category_latest GET /c/:category/l/latest(.:format) list# category_none_latest GET /c/:category/none/l/latest(.:format) list# parent_category_category_latest GET /c/:parent_category/:category/l/latest(.:format) list# unread GET /unread(.:format) list# category_unread GET /c/:category/l/unread(.:format) list# category_none_unread GET /c/:category/none/l/unread(.:format) list# parent_category_category_unread GET /c/:parent_category/:category/l/unread(.:format) list# new GET /new(.:format) list# category_new GET /c/:category/l/new(.:format) list# category_none_new GET /c/:category/none/l/new(.:format) list# parent_category_category_new GET /c/:parent_category/:category/l/new(.:format) list# read GET /read(.:format) list# category_read GET /c/:category/l/read(.:format) list# category_none_read GET /c/:category/none/l/read(.:format) list# parent_category_category_read GET /c/:parent_category/:category/l/read(.:format) list# posted GET /posted(.:format) list# category_posted GET /c/:category/l/posted(.:format) list# category_none_posted GET /c/:category/none/l/posted(.:format) list# parent_category_category_posted GET /c/:parent_category/:category/l/posted(.:format) list# bookmarks GET /bookmarks(.:format) list# category_bookmarks GET /c/:category/l/bookmarks(.:format) list# category_none_bookmarks GET /c/:category/none/l/bookmarks(.:format) list# parent_category_category_bookmarks GET /c/:parent_category/:category/l/bookmarks(.:format) list# B A C K E N D F O R F R O N T - Exploding number of specific “feature” APIs Generic APIs that over-fetch data
- 7. 1. With graphQL you only get data which you exactly need, not more, not less 2. Multiple resources in single request 3. Validation and autocompletion GraphQL: No more Over- and Underfetching
- 8. GraphQL Use Cases • GraphQL server with a connected database • GraphQL layer that integrates existing systems
- 9. Hybrid approach with connected database and integration of existing system
- 10. GraphQL SDL - Schema Definition Language type Project { id: ID! //"!" denotes a required field name: String tagline: String contributors: [User] } type User { id: ID! name: String age: Int } A schema is a collection of types, interfaces, enums, and unions that make up your API’s data model Schema is strongly typed and self-documenting
- 11. Core Concepts: Type System • Scalar Types: Int, Float, String, Boolean, ID • Object Types: User, Project • Entry points: Query, Mutation, Subscription type Query { projects: [Project] project(id: ID!): Project user(id: ID!): User users: [User] } type Mutation { addUser(user: UserInput): User addProject(name: String!): Project }
- 12. Schema Types • Scalar types • Enumeration types • Interfaces • Union types • Input types • Fragments http://graphql.org/learn/schema/ scalar Date enum Episode { NEWHOPE EMPIRE JEDI } type Human implements Character { ….. } union SearchResult = Human | Droid | Starship
- 13. Resolvers A function on a GraphQL server that's responsible for fetching the data for a single field, takes 4 arguments: Glue between schema types and actual data 1. parent : The result of the previous resolver call (more info). 2. args : The arguments of the resolver’s field. 3. context : A custom object each resolver can read from/write to 4. info : An AST representation of the query or mutation.
- 14. Entry Points
- 15. Execution Flow
- 16. Graphql Server Libraries • express-graphql: Bare minimum server for express • apollo-server: Works with multiply web frameworks but requires some of boilerplate • graphql-yoga: Simple setup, lots of tooling support e.g. realtime subscriptions, Graphql Playground. Uses apollo under hood.
- 17. GraphQL-JS Hello-World var express = require('express'); var express_graphql = require('express-graphql'); var { buildSchema } = require('graphql'); // GraphQL schema var schema = buildSchema(` type Query { message: String } `); // Root resolver var root = { message: () => 'Hello World!' }; // Create an express server and a GraphQL endpoint var app = express(); app.use('/graphql', express_graphql({ schema: schema, rootValue: root, graphiql: true })); app.listen(4000, () => console.log('Express GraphQL Server Now Running On localhost:4000/graphql'));
- 18. What is Apollo? Client-side tooling ● Apollo Client ● Apollo iOS ● Apollo Android ● Dev tools ● apollo-codegen ● eslint-plugin-graphq Server-side tooling ● Apollo Server ● Graphql-tools ○ Schema creation ○ Mocking ○ Stitching ● Apollo Optics A set of projects designed to leverage GraphQL and work together to create a great workflow.
- 19. Apollo Graphql Server const express = require('express'); const bodyParser = require('body-parser'); const { graphqlExpress, graphiqlExpress } = require('apollo-server-express'); const { makeExecutableSchema } = require('graphql-tools'); // Some fake data const books = [ … ] // The GraphQL schema in string form const typeDefs = ` type Query { books: [Book] } type Book { title: String, author: String } `; // The resolvers const resolvers = { Query: { books: () => books }, }; // Put together a schema const schema = makeExecutableSchema({ typeDefs, resolvers, }); // Initialize the app const app = express(); // The GraphQL endpoint app.use('/graphql', bodyParser.json(), graphqlExpress({ schema })); // GraphiQL, a visual editor for queries app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' })); // Start the server app.listen(3000, () => { console.log('Go to http://localhost:3000/graphiql to run queries!'); });
- 20. A GraphQL API in just a few lines of code link
- 21. Bootstrap GraphQL Server $ npm install -g graphql-cli $ graphql create your-cool-project --boilerplate typescript-advanced graphql-yoga + • GraphQL spec-compliant • File upload • GraphQL Subscriptions • TypeScript typings • GraphQL Playground • Extensible via Express middlewares • Apollo Tracing • Hosting (local or cloud) • control over your database schema • Extra stuff like authentication, email, etc
- 22. GraphQL server architecture with Prisma Database GraphQL web server Prisma service Prisma is a GraphQL database proxy turning your database into a GraphQL API
- 24. Main Module Authentification • express-jwt middleware + auth0 • pass encoded user in global context (which is available for all resolvers) • use @UseGuard to secure query or mutations (works like for routes)
- 29. Apollo Client v2.0 • construct and send HTTP request (e.g. with fetch in Javascript) • receive and parse server response • store data locally (either simply in memory or persistent) npm install apollo-client apollo-angular apollo-cache-inmemory apollo-angular-link-http graphql graphql-tag --save
- 31. Graphql JS IDE Plugin • Schema setup • completion • error highlighting • schema viewer, structure view • documentation Need to create graphql.config.json https://github.com/jimkyndemeyer/js-graphql-intellij-plugin
- 32. Code Generation • Apollo-codegen apollo-codegen introspect-schema / http://localhost:8080/graphql / —output ./src/app/graphql/schema.json apollo-codegen generate ./src/app/**/*.ts / —tag-name gql --schema ./src/app/graphql/ schema.json / —target typescript / —output ./src/app/graphql/operation-result- types.ts
- 33. Querying Data
- 34. Apollo DevTools
- 36. Conclusions • GraphQL APIs have a strongly typed schema • No more overfetching and underfetching • GraphQL enables rapid product development • Composing GraphQL APIs • Rich open-source ecosystem and an amazing community
- 37. Useful Links • https://blog.graph.cool/graphql-server-basics-the-schema-ac5e2950214e • https://medium.com/@weblab_tech/graphql-everything-you-need-to-know-58756ff253d8 • https://blog.graph.cool/introducing-prisma-1ff423fd629e • https://blog.graph.cool/how-to-wrap-a-rest-api-with-graphql-8bf3fb17547d • https://blog.graph.cool/tutorial-how-to-build-a-graphql-server-with-graphql-yoga-6da86f346e68 • https://www.howtographql.com/graphql-js/1-getting-started/ • https://www.howtographql.com/advanced/0-clients/ • https://github.com/howtographql/angular-apollo • https://github.com/gsans/todo-apollo-v2