Building tools for GraphQL

Adopting GraphQL can be fairly demanding and it takes some time to find the right tooling. What can we do to improve DX and supercharge our GraphQL development? Let's deep-dive into GraphQL tooling that help us building GraphQL at scale.

Transcript

1. Building tools for GraphQL @glnnrys Glenn Reyes
2. Glenn Reyes ! @glnnrys Freelance Front-End Engineer | React & GraphQL
4. We need to migrate to GraphQL
6. GraphQL all the things!
7. GraphQL all the things! (but not all at once )
8. Where to start?
9. Setup the server 1. Install GraphQL server 2. Configure server 3. Setup an IDE 4. Install build & type system 5. Configure build & type system 6. ...
14. I'm doing repetitive tasks
15. How to fix it?
16. Tools & Features GraphQL Server IDE (Playground, GraphiQL) GraphQL imports Live reloading Babel (Latest ES features)
17. graphql-yoga
18. const { GraphQLServer } = require('graphql-yoga'); const typeDefs = ` type Query { hello(name: String): String! } `; const resolvers = { Query: { hello: (_, { name }) => `Hello ${name || 'World'}`, }, }; const server = new GraphQLServer({ typeDefs, resolvers }); server.start(() => console.log('Server is running on localhost:4000'));
19. const { GraphQLServer } = require('graphql-yoga'); const typeDefs = ` type Query { hello(name: String): String! } `; const resolvers = { Query: { hello: (_, { name }) => `Hello ${name || 'World'}`, }, }; const server = new GraphQLServer({ typeDefs, resolvers }); server.start(() => console.log('Server is running on localhost:4000')); const { GraphQLServer } = require('graphql-yoga');
20. const { GraphQLServer } = require('graphql-yoga'); const typeDefs = ` type Query { hello(name: String): String! } `; const resolvers = { Query: { hello: (_, { name }) => `Hello ${name || 'World'}`, }, }; const server = new GraphQLServer({ typeDefs, resolvers }); server.start(() => console.log('Server is running on localhost:4000')); 
 
 const typeDefs = ` type Query { hello(name: String): String! } `;
21. const { GraphQLServer } = require('graphql-yoga'); const typeDefs = ` type Query { hello(name: String): String! } `; const resolvers = { Query: { hello: (_, { name }) => `Hello ${name || 'World'}`, }, }; const server = new GraphQLServer({ typeDefs, resolvers }); server.start(() => console.log('Server is running on localhost:4000')); 
 
 
 
 
 
 
 const resolvers = { Query: { hello: (_, { name }) => `Hello ${name || 'World'}`, }, };
22. const { GraphQLServer } = require('graphql-yoga'); const typeDefs = ` type Query { hello(name: String): String! } `; const resolvers = { Query: { hello: (_, { name }) => `Hello ${name || 'World'}`, }, }; const server = new GraphQLServer({ typeDefs, resolvers }); server.start(() => console.log('Server is running on localhost:4000')); 
 
 
 
 
 
 
 
 
 
 
 
 
 const server = new GraphQLServer({ typeDefs, resolvers }); server.start(() => console.log('Server is running on localhost:4000'));
23. graphql-yoga ✅ GraphQL Server ✅ IDE (Playground) ❌ GraphQL imports ❌ Live reloading ❌ Babel (Latest ES features)
24. apollo-server
25. const { ApolloServer, gql } = require('apollo-server'); const typeDefs = gql` type Query { "A simple type for getting started!" hello: String } `; const resolvers = { Query: { hello: () => 'world', }, }; const server = new ApolloServer({ typeDefs, resolvers, }); server.listen().then(({ url }) => { console.log(` Server ready at ${url}`); });
26. const { ApolloServer, gql } = require('apollo-server'); const typeDefs = gql` type Query { "A simple type for getting started!" hello: String } `; const resolvers = { Query: { hello: () => 'world', }, }; const server = new ApolloServer({ typeDefs, resolvers, }); server.listen().then(({ url }) => { console.log(` Server ready at ${url}`); }); const { ApolloServer, gql } = require('apollo-server');
27. const { ApolloServer, gql } = require('apollo-server'); const typeDefs = gql` type Query { "A simple type for getting started!" hello: String } `; const resolvers = { Query: { hello: () => 'world', }, }; const server = new ApolloServer({ typeDefs, resolvers, }); server.listen().then(({ url }) => { console.log(` Server ready at ${url}`); }); 
 
 const typeDefs = gql` type Query { "A simple type for getting started!" hello: String } `;
28. const { ApolloServer, gql } = require('apollo-server'); const typeDefs = gql` type Query { "A simple type for getting started!" hello: String } `; const resolvers = { Query: { hello: () => 'world', }, }; const server = new ApolloServer({ typeDefs, resolvers, }); server.listen().then(({ url }) => { console.log(` Server ready at ${url}`); }); 
 
 
 
 
 
 
 
 const resolvers = { Query: { hello: () => 'world', }, };
29. const { ApolloServer, gql } = require('apollo-server'); const typeDefs = gql` type Query { "A simple type for getting started!" hello: String } `; const resolvers = { Query: { hello: () => 'world', }, }; const server = new ApolloServer({ typeDefs, resolvers, }); server.listen().then(({ url }) => { console.log(` Server ready at ${url}`); }); 
 
 
 
 
 
 
 
 
 
 
 
 
 
 const server = new ApolloServer({ typeDefs, resolvers, }); server.listen().then(({ url }) => { console.log(` Server ready at ${url}`); });
30. apollo-server ✅ GraphQL Server ✅ IDE (Playground) ❌ GraphQL imports ❌ Live reloading ❌ Babel (Latest ES features)
31. apollo-server backpack ✅ GraphQL Server ✅ IDE (GraphiQL, Playground) ❌ GraphQL imports ✅ Live reloading ✅ Babel (Latest ES features) ✅ Live reloading ✅ Babel (Latest ES features)
32. apollo-server
 backpack graphql-tag/loader ✅ GraphQL Server ✅ IDE (GraphiQL, Playground) ✅ GraphQL imports ✅ Live reloading ✅ Babel (Latest ES features)
33. Look up what we need & install Write down all the boilerplate code Set up and configure build system Check if everything works as expected
34. We can do better!
35. What if ...
36. Setup the server 1. Install GraphQL server 2. Configure server 3. Setup an IDE 4. Install build & type system 5. Configure build & type system 6. ...
37. Setup the server 1. Install GraphQL server 2. Configure server 3. Setup an IDE 4. Install build & type system 5. Configure build & type system 6. ...
38. What if we can focus building the actual GraphQL code?
39. graphpack
40. graphpack ⚡ Zero config ⚡ Run server by single command ⚡ Hide boilerplate
41. src "## resolvers.js $## schema.graphql
42. Focus on writing GraphQL
43. CLI $ graphpack # start dev $ graphpack build # create build
44. "scripts": { "start": "graphpack"
 "build": "graphpack build" }, package.json
46. What's inside?
47. #!/usr/bin/env node const nodemon = require('nodemon'); const webpack = require('webpack'); const config = require('../webpack.config'); const compiler = webpack(config); const serverPaths = Object.keys(compiler.options.entry).map(entry => path.join(compiler.options.output.path, `${entry}.js`), ); compiler.watch( config.watchOptions, once((error, stats) => { if (error || stats.hasErrors()) { throw Error(error || stats.toJson().errors); } nodemon({ script: serverPaths[0], watch: serverPaths }).on( 'quit', process.exit, ); }), );
48. #!/usr/bin/env node const nodemon = require('nodemon'); const webpack = require('webpack'); const config = require('../webpack.config'); const compiler = webpack(config); const serverPaths = Object.keys(compiler.options.entry).map(entry => path.join(compiler.options.output.path, `${entry}.js`), ); compiler.watch( config.watchOptions, once((error, stats) => { if (error || stats.hasErrors()) { throw Error(error || stats.toJson().errors); } nodemon({ script: serverPaths[0], watch: serverPaths }).on( 'quit', process.exit, ); }), ); 
 
 
 
 const compiler = webpack(config); 
 
 
 compiler.watch( 
 
 
 
 nodemon( 
 ); }), ); webpack
49. Entry file: server.js import { ApolloServer } from 'apollo-server'; import { resolvers, typeDefs } from './srcFiles'; const server = new ApolloServer({ typeDefs, resolvers }); server .listen({ port: 4000 }) .then(({ url }) => console.log(` Server ready at ${url}`)); export default server;
50. Entry file: server.js import { ApolloServer } from 'apollo-server'; import { resolvers, typeDefs } from './srcFiles'; const server = new ApolloServer({ typeDefs, resolvers }); server .listen({ port: 4000 }) .then(({ url }) => console.log(` Server ready at ${url}`)); export default server; import { resolvers, typeDefs } from './srcFiles';
51. Importing typeDefs & resolvers const importFirst = req => req.keys().map(mod => req(mod).default || req(mod))[0]; export const resolvers = importFirst( require.context( process.env.GRAPHPACK_SRC_DIR, true, /^\.\/(resolvers|resolvers\/index)\.(js|ts)$/, ), );
 export const typeDefs = importFirst( require.context( process.env.GRAPHPACK_SRC_DIR, true, /^\.\/(schema|schema\/index)\.(graphql|js|ts)$/, ), );
52. Importing typeDefs & resolvers const importFirst = req => req.keys().map(mod => req(mod).default || req(mod))[0]; export const resolvers = importFirst( require.context( process.env.GRAPHPACK_SRC_DIR, true, /^\.\/(resolvers|resolvers\/index)\.(js|ts)$/, ), );
 export const typeDefs = importFirst( require.context( process.env.GRAPHPACK_SRC_DIR, true, /^\.\/(schema|schema\/index)\.(graphql|js|ts)$/, ), ); 
 
 
 
 require.context(
 
 
 
 )
 
 
 
 require.context(
 
 
 
 )
53. Wrap up ⭐ Start with zero configuration ⭐ Run the server by a single command ⭐ Hide all the boilerplate code ⭐ Focus on writing GraphQL
54. Can I use it now?
55. github.com/glennreyes/graphpack
56. Installation $ yarn add graphpack --dev $ npm install graphpack --save-dev
57. github.com/glennreyes/graphpack
58. github.com/glennreyes/graphpack
59. What about tools
 on the client?
60. react-apollo
61. import gql from 'graphql-tag'; import { Query } from 'react-apollo'; const getTalks = gql` query getTalks { talks { title speaker { name } } } `; const Talks = () => ( <Query query={getTalks}> {({ loading, error, data }) => { if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return data.talks.map(talk => ( <article> <h4>{talk.title}</h4> <p>By {talk.speaker.name}</p> </article> )); }} </Query> );
62. import gql from 'graphql-tag'; import { Query } from 'react-apollo'; const getTalks = gql` query getTalks { talks { title speaker { name } } } `; const Talks = () => ( <Query query={getTalks}> {({ loading, error, data }) => { if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return data.talks.map(talk => ( <article> <h4>{talk.title}</h4> <p>By {talk.speaker.name}</p> </article> )); }} </Query> ); import gql from 'graphql-tag'; import { Query } from 'react-apollo';
63. import gql from 'graphql-tag'; import { Query } from 'react-apollo'; const getTalks = gql` query getTalks { talks { title speaker { name } } } `; const Talks = () => ( <Query query={getTalks}> {({ loading, error, data }) => { if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return data.talks.map(talk => ( <article> <h4>{talk.title}</h4> <p>By {talk.speaker.name}</p> </article> )); }} </Query> ); 
 
 const getTalks = gql` query getTalks { talks { title speaker { name } } } `;
64. import gql from 'graphql-tag'; import { Query } from 'react-apollo'; const getTalks = gql` query getTalks { talks { title speaker { name } } } `; const Talks = () => ( <Query query={getTalks}> {({ loading, error, data }) => { if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return data.talks.map(talk => ( <article> <h4>{talk.title}</h4> <p>By {talk.speaker.name}</p> </article> )); }} </Query> ); 
 
 
 
 
 
 
 
 
 
 
 
 
 const Talks = () => ( <Query query={getTalks}> {({ loading, error, data }) => { if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return data.talks.map(talk => ( <article> <h4>{talk.title}</h4> <p>By {talk.speaker.name}</p> </article> )); }} </Query> );
65. const Talks = () => ( <Query query={getTalks}> {({ loading, error, data }) => { if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return data.talks.map(talk => ( <article> <h4>{talk.title}</h4> <p>By {talk.speaker.name}</p> </article> )); }} </Query> ); 
 query={getTalks}
66. import gql from 'graphql-tag';
 
 const TalksQuery = gql` query getTalks { talks { title speaker { name } } } `;
67. import TalksQuery from './getTalks.graphql'
68. Less code
69. Less bugs
70. github.com/glennreyes/graphql-components
71. Takeaways ⚡ Automate repetitive tasks ⚡ Build tools to reduce boilerplate code ⚡ Make them open source ⚡ Focus on writing GraphQL code ⚡ Less code === less bugs
72. Thank You! @glnnrys Glenn Reyes