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 Glenn Reyes @glnnrys
2. { REST }
3. query { REST { in {
 peace } } }
4. { REST }
5. /api/me /api/me/posts /api/user/1 /api/user/1/posts
6. Can we use GraphQL?
7. Should we use GraphQL?
8. How will GraphQL help?
12. Where should I start?
14. swapi-graphql relay-starter-kit simple-relay-starter
16. Better stick on your plan
18. graphql-js express-graphql
 apollo-server
19. graphql-js express-graphql graphql-tools graphql-yoga
 apollo-server
20. apollo-server
21. yarn add graphql apollo-server
22. server.js > node server.js const { ApolloServer, gql } = require('apollo-server'); // The GraphQL schema const typeDefs = gql` type Query { "A simple type for getting started!" hello: String } `; // A map of functions which return data for the schema. const resolvers = { Query: { hello: () => 'world', }, }; const server = new ApolloServer({ typeDefs, resolvers, }); server.listen().then(({ url }) => { console.log(` Server ready at ${url}`); });
27. dev/watch mode?
28. nodemon
29. nodemon
31. ES6 imports Nice error messages Live reload Zero config / single dependency
32. > yarn add backpack-core
 > yarn dev
 > yarn build package.json
34. How can we reduce the boilerplate?
35. > yarn add backpack-core
 > yarn dev
 > yarn build package.json
37. > yarn add backpack-core
 > yarn dev
 > yarn build package.json
38. > yarn add graphpack 
 > yarn dev
 > yarn build package.json "scripts": { "dev": "graphpack", "build": "graphpack build" }
39. #!/usr/bin/env node const nodemon = require('nodemon'); const path = require('path'); const { once } = require('ramda'); const webpack = require('webpack'); const paths = require('../config/paths'); const webpackConfig = require('../config/webpack.config'); const compiler = webpack(webpackConfig); const serverPaths = Object.keys(compiler.options.entry).map(entry => path.join(compiler.options.output.path, `${entry}.js`), ); compiler.watch( webpackConfig.watchOptions, once(error => { if (error) return; nodemon({ script: serverPaths[0], watch: serverPaths }).on( 'quit', process.exit, ); }), ); ./bin/graphpack
40. ./bin/graphpack webpack + nodemon
41. ./bin/graphpack webpack + nodemon =
42. glennreyes/graphpack
44. const typeDefs = gql` type Author { id: Int name: String posts: [Posts!]! } type Post { id: Int title: String comments: [Comment!]! } type Query { mainAuthor: Author } `; const resolvers = { Query: { mainAuthor: () => ({ id: 1 name: 'Glenn', posts: [{ id: 1, title: 'Hello World' }], }), }, Author: { posts: async (parent) => { const comments = await fetchPostCommentsFromAuthor(parent.id); return { ...parent.posts, comments }; } }, };
45. { mainAuthor { id name posts { id title } } } Query
46. { mainAuthor { id name posts { id title } } } Comments are still fetched by the `posts` resolver Query const resolvers = { Query: { mainAuthor: () => ({ id: 1 name: 'Glenn', posts: [{ id: 1, title: 'Hello World' }], }), }, Author: { posts: async (parent) => { const comments = await fetchPostCommentsFromAuthor(parent.id); return { ...parent.posts, comments }; } }, };
47. fieldName(obj, args, context, info) { result }
48. fieldName(obj, args, context, info) { result }
49. –Apollo Docs “This argument should only be used in advanced cases, but it contains information about the execution state of the query, including the field name, path to the field from the root, and more. It’s only documented in the GraphQL.js source code” `info`
51. Prisma Blog
 GraphQL Server Basics: Demystifying the `info` Argument in GraphQL Resolvers
52. const resolver = { Author: { posts: parent => getPostsbyAuthor(parent.id), }, }; API … into const resolver = { Author: { posts: resolveable(parent => getPostsbyAuthor(parent.id)), }, };
53. const resolvable = (resolver) => { }; //
54. const resolvable = (resolver) => (parent, args, context, info) => { // TODO return resolver(parent, args, context, info) };
55. – Max Stoiber Can you make it open-source?
56. glennreyes/graphql-resolvable
57. What about IDE’s?
63. What else do I need?
64. What else do I need? Analytics Data bindings Visualizing Batched requests Automatic Persisted Queries
65. Maybe none of them
66. What tools is the industry building?
67. Integrated type system
68. End-to-end type safety
69. apollographql/apollo-cli
73. react-apollo
74. react-apollo v2
75. What if …
76. const GET_DOGS = gql` query GetDogs { dogs { id name } } `; const GoodDogsBrent = () => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (error) return <Error /> if (loading || !data) return <Fetching /> return <DogList dogs={data.dogs} /> }} </Query> )
77. const GET_DOGS = gql` query GetDogs { dogs { id name } } `; const GoodDogsBrent = () => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (error) return <Error /> if (loading || !data) return <Fetching /> return <DogList dogs={data.dogs} /> }} </Query> ) What if … const GetDogsQuery = gql` query GetDogs { dogs { id name } } `; const GoodDogsBrent = () => ( <GetDogsQuery> {({ loading, error, data }) => { if (error) return <Error /> if (loading || !data) return <Fetching /> return <DogList dogs={data.dogs} /> }} </GetDogsQuery> )
78. and even … const GetDogsQuery = gql` query GetDogs { dogs { id name } } `; const GoodDogsBrent = () => ( <GetDogsQuery> {({ loading, error, data }) => { if (error) return <Error /> if (loading || !data) return <Fetching /> return <DogList dogs={data.dogs} /> }} </GetDogsQuery> ) import GetDogsQuery from './dogsQuery.graphql' const GoodDogsBrent = () => ( <GetDogsQuery> {({ loading, error, data }) => { if (error) return <Error /> if (loading || !data) return <Fetching /> return <DogList dogs={data.dogs} /> }} </GetDogsQuery> )
79. glennreyes/graphql-components
80. TLDR;
81. Does it solve my problem?
82. If not, build it
83. … and open-source it.
84. You don’t need everything
88. Automate repetitive tasks
89. Reduce boilerplate
90. Thanks! @glnnrys