This document discusses using static types with GraphQL applications. It begins with an introduction from James Baxley. It then covers describing data with GraphQL's robust type system, using Apollo Client and React Apollo to manage data loading from a GraphQL server, and bringing the server types into the application. It discusses type systems like Flow and TypeScript that can be used, advantages of static types like reduced bugs, and tools that integrate types like Apollo Codegen, Flow Coverage, and VSCode. It emphasizes that GraphQL is strongly typed and tools like the Relay compiler and Apollo Codegen can generate types for GraphQL queries.

2. Hello!
I am James Baxley
Open Source Engineer at
Meteor Development Group.
@jbaxleyiii

4. Statically Typing
your GraphQL App

5. Describing
your data in
one place
GraphQL Server
Building with GraphQL lets you
describe your data with a robust type
system. As your application grows and
changes, these types will always
reflect the latest shape of your app
We will take a look at how GraphQL
works, how you can take advantage of
its type system in your app, and why
Apollo makes it easy!
React Apollo
Using Apollo with React makes it easy to
manage and load data from your
GraphQL server.
With the built in type support of both
Apollo Client and React Apollo, along
with the power of Apollo Codegen,
bringing the types from your server to
your app has never been easier.

6. 1
State of
JavaScript
client, server, cli…
oh my!

7. Where does
your
JavaScript
run?
⊙ Browsers
⊙ Native
⊙ Server
⊙ Serverless
⊙ CLI
⊙ IOT
⊙ Crossbows

8. How do you
write
JavaScript?
⊙ ES5, ES6, ES7
⊙ Flow
⊙ TypeScript
⊙ Reason
⊙ Scala
⊙ Elm
⊙ Literally 100+ more

9. 2
Why Static
Types?
Bug reduction,
development gains

10. “
Flow and TypeScript are
pretty good, and
conservatively either of them
can prevent about 15% of the
bugs that end up in
committed code.
http://ttendency.cs.ucl.ac.uk/projects/type_study/documents/type_study.pdf

11. “
Messenger used to receive
bugs reports on a daily basis;
since the introduction of
Reason, there have been a
total of 10 bugs (that's during
the whole year, not per
week)!
https://reasonml.github.io/community/blog/#messengercom-now-50-converted-to-reason

12. VSCode
A free editor from
Microsoft with
incredible
support for
TypeScript out of
the box.
Developer
Tools
Flow Coverage
A reporter to
showcase how
much of your
app is typed with
Flow
IntelliSense
Both Flow and
TypeScript offer
typeahead
definitions,
warning, and
build failures for
improperly used
code

13. VSCode TypeScript support

14. npm i --save flow-coverage-report

15. IntelliSense for your app

16. Build time errors

17. VSCode Reason integration

18. “ Improving how your team
works while lowering the
number of shipped bugs is a
win for everyone!

19. 3
Which Static
Types?
Flow vs TypeScript

21. TypeScript Superset of JavaScript
TypeScript is a superset
of JavaScript that
compiles to runnable js.
It requires a compilation
step and produces
shareable type
definitions.
Custom Extension
Instead of writing .js files,
you write .ts or .tsx (for
react) which are
compiled into javascript.

22. Adding
TypeScript
Collection of Libraries
TypeScript requires (for
the most part) that your
entire app is written in it.
It has an incredibly large
library of third party
typings to make it easy to
adapt.
Writing Types
Since TypeScript is a
compiler, you write types
in the file using the type
definition syntax. These
are removed at build
time.

23. Why
TypeScript
Development Ready, Production Safe
TypeScript is fully featured for development teams right
away. With amazing editor integration, helpful
documentation and error codes, and a strong
community, getting started with TypeScript is incredibly
easy!
Its type system provides low inference but does a great
job at preventing bugs from being shipped.

25. Flow Static additions
Flow is just a way to add
static type definitions to
your existing javascript
code. It is most
commonly used with
babel to remove when
compiling to plain
javascript.
Comment or additions
Flow supports directly
adding types to your
application code as well
as adding types through
comments. This can
remove a build step if
desired.

26. Adding Flow Incremental Adoption
Since Flow is used with
javascript files, it can very
easily be used to convert
a non typed code base
slowly.
Flow Typed
Flow has its own
repository of types which
are decently well
maintained but can be
out of date. It will
generate type stubs if
needed.

27. Why Flow
Powerful Inference, Easy Adoption
Flow has a very powerful type inference system which
helps to catch bugs before they ever happen. It is great
for complex types as well.
Since it can be used with plain javascript, adding Flow to
a project can be quickly done to start getting benefits
right away.

28. 4
GraphQL and
Types
Strongly Typed =>
Statically Typed

29. “
GraphQL is strongly-typed.
Given a query, tooling can
ensure that the query is both
syntactically correct and
valid within the GraphQL type
system before execution
https://reactjs.org/blog/2015/05/01/graphql-introduction.html

30. Relay
Compiler
Flow Definitions
With the launch of Relay Modern, the relay-compiler will
inspect the queries of your application and create flow
definitions based on the schema the app will be used
with. This is done mostly automatically during build
time.

31. Apollo
Codegen
Multilanguage
Apollo Codegen converts a schema into an intermediate
representation of the possible types. This allows it to
generate types for multiple type systems. It currently
supports both TypeScript and Flow as well as a few
others!
Run as a cli or npm run script, this can be used to keep
your types up to date as your schema changes.

32. ESLint
GraphQL
Query Linter
An ESLint plugin that checks tagged query strings inside
JavaScript, or queries inside .graphql files, against a
GraphQL schema.

33. 5
GraphQL and
(typed) React
Apollo Client and
React Apollo

40. Using
GraphQL
and Types
Better Development, Better Products
Using tools like Apollo Codegen along with libraries like
Apollo Client and React Apollo can make working with
GraphQL both easy and sound through the designed
type interfaces the libraries provide.
Thanks to GraphQL’s strongly typed nature, as your
application evolves, your app can evolve to match the
new structure easily

41. “

42. Thanks!
Any questions?
Find me at @jbaxleyiii or
james@meteor.com