►
Description
When building with GraphQL you define the schema up front and this can be really handy go use when it comes to writing the queries, resolvers, etc., especially if it’s in TypeScript. So, how do you go about doing the type generation? We’ll take a look at a tool that can generate you the TypeScript types, then implement our backend using them before looking at how they can plug into the front end with React Hooks. We’ll cap off by learning how to model our storage platform effectively using its own types and combine them with the GraphQL schema types.
A
A
Over
the
last
15
or
so
years,
I've
been
doing
web
development,
starting
with
languages
like
classic
asp
and
php
through
to.net
compiled
languages
on
the
server
and
then
eventually
to
javascript
on
the
server
and
javascript
in
the
client.
In
my
time,
I've
been
building
web
applications.
I've
seen
all
sorts
of
different
ways.
We
can
do
data
access,
whether
it's
just
normal
page
refreshes,
and
getting
more
data
on
requests
to
custom
built
apis
to
serve
out.
A
You
know
kind
of
like
ajaxis
sort
of
endpoints
for
an
application
through
to
really
strict
rest
implementations,
but
today
I
want
to
talk
about
specifically
graphql,
which
is
another
way
which
we
can
do.
Data
access
if
you
want
to
get
in
touch
with
me
after
the
session
you'll
find
all
my
details
here
on
the
slides
and
do
feel
free
to
reach
out.
If
you've
got
any
questions
that
I
don't
get
a
chance
to
cover
off
in
the
q,
a
I'll
do
my
best
to
answer
them
after
the
session.
A
If
I,
or
at
least
help
you
along
the
way
of
finding
the
answers,
if
I
don't
know
them
myself,
but
that's
enough
about
me-
you're
here
not
to
learn
about
me
and
my
background-
my
history
you're
here
to
learn
about
graphql
and
typescript
and
how
we
can
work
with
those
together.
A
But
before
we
get
into
looking
at
how
we
can
build
an
application.
I
want
to
talk
a
bit
about
what
graphql
is
and
why
it's
interesting
graphql
was
originally
created
by
facebook
as
a
query
language
for
doing
client
and
server
in
your
actions.
It's
not
how
you
implement
a
server
or
it's
not
a
client
implementation,
but
it's
more
a
specification
of
how
those
two
can
talk
to
each
other.
So
you
still
build
a
server
implementation,
whether
it's
in
javascript,
net,
node,
python,
etc.
A
A
So
what
makes
graphical
different
to
rest,
because
rest
is
the
most
common
way
that
people
have
built
apis
in
at
least
in
the
past.
Well,
the
main
difference
is
that
rest
is
very
centered
around
the
way
the
server
visualizes
its
data
and
wants
to
expose
that
out.
Let's
say
we're:
building
a
trivia
application
and
inside
of
that
we're
going
to
have
made
three
primary
model
types.
A
We've
got
our
game,
we've
got
players
and
we've
got
questions
now
in
a
rest
scenario,
at
least
in
a
very
strict
approach
to
doing
rest
probably
have
a
game
endpoint,
so
slash
api,
slash
game,
and
then
from
that
we
can
get
back
an
ap,
a
game
based
off
its
id,
and
then
from
that
we
would
have
an
array
of
ids
of
questions
and
players
that
we
then
have
to
follow
through
and
then
do
additional
requests
to
get
all
that
information.
A
Now.
This
might
be
a
little
bit
over
complex
for
some
scenarios,
where
you
are
fetching
data,
but
it's
also
going
to
be
ideal
for
others.
A
I'm
not
here
to
tell
you
that
you
should
be
using
graphql
or
rest
in
for
your
kind
of
applications.
You've
got
to
work
out
that
one
on
yourself
on
your
own,
depending
on
the
kinds
of
applications
you're
building
graphql,
though,
is
a
kind
of
the
flipped
model
for
compared
to
rest.
So,
where
rest
is
all
about
what
the
server
defines,
how
you
do
your
data
access
graphql
is
more
about
how
the
client
wants
to
be
able
to
get
data.
A
Well,
maybe
you
don't
need
all
the
questions,
but
you
unfortunately
might
have
to
get
those
if
the
depending
on
how
the
rest
model
is
set
up
in
graphql.
You
can
be
a
lot
more
selective
about
that
and
only
get
the
data
that
you
need,
but,
as
I
said,
I'm
not
here
to
tell
you
exactly
when
to
use
rest
versus
graphql,
I'm
here
to
look
at
the
specific
scenarios
of
how
we
can
do
type
safety
with
graphql.
A
A
We
then
define
strongly
types,
the
queries
and
mutations
so
how
we
can
get
data
and
how
we
can
change
data
that
are
available
inside
of
our
our
server
and
for
our
clients
to
communicate
on
so
having
this
type
information
originally
to
start
with,
is
a
good
building
block
for
building
a
type
safe
application,
but
with
javascript.
Well,
we
can
lose
a
lot
of
that
type
safety
anyway,
because
javascript
is
an
inherently
untyped
language,
that's
where
typescript
can
come
to
play.
A
So
what
are
we
going
to
be
building
today?
Well,
we're
going
to
be
building
an
application
with
two
components:
we're
going
to
start
with
the
server
and
for
that
server
I'm
going
to
be
using
the
apollo
graphql
framework.
So
this
is
a
server
implementation
of
graphql
that
can
run
in
a
variety
of
different
manners,
whether
it's
on
a
web
server
platform
like
express
or
cover,
or
you
can
run
it
in
a
serverless
model
which
I'm
going
to
be
using
azure
functions.
A
To
do
I
just
like
the
serverless
model,
but
it's
the
same
approach,
whether
you're
doing
a
a
server
or
a
serverless
model,
or
whether
you're
using
any
of
the
different
underlying
providers
that
apollo
supports
and
then
from
a
client
standpoint.
Well
we're
going
to
need
a
client,
that's
going
to
connect
to
that,
and
I'm
going
to
be
building
a
react
based
web
application.
A
A
I
just
prefer
react
because
it's
the
one
that
I've
had
the
most
experience
with,
and
it's
kind
of
my
my
go-to
approach
with
doing
web
applications.
But,
like
I
said
it's
entirely
up
to
you,
how
you
want
to
do
the
client
and
the
stuff
I
will
be
showing
you
is
applicable
to
pretty
much
every
javascript
framework,
but
I
said
we
want
to
do
end-to-end
type
safety.
So
that's
where
typescript's
going
to
come
into
play,
I'm
going
to
be
using
typescript
as
a
way
to
model
out
our
backend
and
also
do
strongly
type
front-ends.
A
So,
let's
jump
out
of
the
slides
and
have
a
look
at
how
we
can
do
that
with
a
bit
of
a
demo,
I'm
going
to
go
through
a
subset
of
a
larger
workshop
that
I've
got
share
the
link
to
that
at
the
end.
If
you're
interested
and
we're
going
to
be
building
out
a
couple
of
different
pieces
that
look
at
the
specific
type
safe
aspects
of
building
a
graphql
server.
A
A
As
we
can
see,
I've
got
a
number
of
types
that
are
available.
I
have
a
question
type,
a
game.
That
game
has
questions
available
to
it,
so
we've
got
types
that
reference
other
types
that
we
have.
I
have
some
enums
and
if
we
scroll
down
a
little
bit
further,
we'll
see
that
we
have
a
query.
So
this
is
the
entry
point
when
someone
is
doing
a
request
against
their
fql
server,
and
these
are
the
things
that
you're
able
to
do
against
it.
A
A
What
we're
going
to
need
to
do
is
we're
going
to
need
to
implement
some
resolvers
that
work
with
these.
So
resolvers
are
functions
that
handle
the
queries
or
handle
the
graphql
objects
as
they're
being
parsed
through.
So
let's
pop
over
to
another
file
called
resolvers.ts,
I'm
going
to
put
the
schema
on
the
side
here
so
inside
of
resolvers,
I'm
going
to
start
building
out
those
queries
that
I've
got
here
on
the
side
and
functions
that
handle
those.
A
So
in
my
resolver
I
have
query,
which
is
a
type
name,
that
matches
the
same
type
that
I
had
inside
of
my
schema
and
let's
start
with
the
easiest
one,
which
is
game
so
sorry
games,
because
we
just
want
to
get
all
the
games
and
well.
I
need
to
return
something,
but
this
is
just
an
object
that
I've
created
it
doesn't
understand
any
type
of
information.
A
It's
got
no
correlation
to
the
type
of
information
that
we
have
with
inside
of
our
schema,
but
because
I've
worked
with
apollo
before
I
know
that
the
first
argument
is
going
to
be
the
parent
of
this
in
the
object
graph.
But
this
is
a
root
entry
point
for
a
graphql
schema.
So
I
don't
have
a
parent
at
this
point.
A
Any
arguments
that
could
be
provided
to
this
operation-
I
don't
have
any
arguments
at
this
point
in
time,
because
games
doesn't
take
any
arguments
and
then
finally,
I
have
a
context
where
I
can
provide
something.
Oh,
I
can
get
access
to
like
services
that
have
been
injected
and
other
stuff
that
are
available
for
the
lifetime
of
this
request.
A
One
of
those
things
is
data
sources
and
that's
going
to
give
me
access
to
my
underlying
database
now.
I
know
that
that's
there,
because
I've
implemented
this
application
and
I've.
I
know
the
code
base,
so
I
know
what's
there,
but
I
don't
have
any
type
information.
I
don't
know
that
if
I
do
data
sources
that
there
are
any
fields
of
this,
I
could
access.
A
Similarly,
if
I
want
to
implement
the
games,
the
the
the
gauge
resolver,
so
I
do
game
and
then
again
we
don't
have
a
parent.
I
know
that
the
second
argument
will
have
objects,
an
object,
which
is
the
arguments
that
are
provided
by
the
query,
and
I
can
decompose
this
with
the
id.
And
finally,
I
can
get
data
sources
again,
and
I
know
that
I
can
return
data
sources
game.getgame
and
provided
with
the
id.
A
A
I
also
have
my
player
results,
so
this
is
how
I
can
get
back
the
results
that
a
player
has
submitted
so
their
answers
and
we'll
see
again
we're
decomposing
a
couple
of
fields
out
of
there
and
without
having
the
schema
side
by
side.
Do
I
know
that
it's
game
id
and
player
id?
I
I'm
going
to
assume
they
are
because
that's
what
I
I
wrote
previously
in
in
the
demo
before
I
started,
but
yeah.
If
you
didn't
have
that
scheme
like
immediately
available,
it's
it's
a
little
bit
opaque.
A
We
don't
know
what's
there
well,
so
this
is
an
async
function,
so
we're
awaiting
on
the
get
game
method
on
our
game
data
source.
But
did
we
realize
that
that
was
something
that
returned
a
promise
by
looking
at
it
previously?
No,
we
didn't.
We
know
that
because
we
know
this
code
base
and
we
can
dig
through
it.
So
this
is
where
we
want
to
start
looking
at
how
we
can
get
that
type
safe
information,
I'm
going
to
install
a
new
package
install
there.
It
is,
I
called
graphql
code,
gen
cli,
so
graphql
code.
A
Gen
is
a
series
of
packages
for
generating
code
from
graphql,
and
this
is
a
command
line
tool
that
will
then
allow
me
to
generate
out
the
the
typescript
definitions
that
I
need.
So,
let's
run
npx
graphql
code
gen
in
it,
and
it's
going
to
prompt
us
through
a
bit
of
a
wizard
on
what
we
want.
We
want
to
build
a
back
end
or
api
server.
A
The
schema
is
at
slash:
graphql
schema,
dot,
graphql
graph
ql.
There
we
go.
We
want
to
generate
the
typescript
model
definitions
and
we
also
want
to
generate
the
typescript
resolver
definitions,
so
we
can
strongly
type
our
resolvers.
A
We
want
to
output
this
to
say
graph
dot,
slash
graph,
ql,
slash
generated
dot
ts,
we
generate
an
introspection
file,
so
that's
just
some
debugging
information,
we'll
leave
the
default
yaml
file
name
and
we're
going
to
add
a
npm
run.
Script
called
gen
that
will
be
so
that
we
can
just
run
the
code
generator
without
having
to
do
npx
every
single
time.
So
this
is
now
going
to
go
ahead
and
it's
going
to
create
us
our
yaml
file
for
our
config.
A
It's
going
to
then
update
our
package.
Json
with
that
new
run
script
and
with
some
additional
dependencies
that
we're
going
to
need
and
basically
get
our
environment
ready
so
that
we
can
go
ahead
and
build
our
graphql.
Our
strongly
typed
information
from
our
graphql
schema
file,
all
right.
So
if
we
do
npm
npm
run
gen,
we'll
see
that
that's
gone
ahead
and
done
it.
Oh
and
it
looks
like
I
have
got
an
error
in
something
that
I've
added
and.
A
I
forgot
to
install
my
dependencies
oops
npm,
install
because
it
added
some
new
things
to
my
package
json
and
I
completely
forgot
to
do
an
npm
install
to
make
sure
that
they
are
installed
as
well.
So
that's
just
a
the
joys
of
live
demo
is
you've
got
to
remember
all
the
steps
that
you
meant
to
run
npm
run
gen
we'll
do
that
again.
A
A
We'll
see
that
we've
got
our
our
question
correct
answer
and
answers
which
are
strings
or
arrays
of
strings,
we'll
see
a
bit
further
down.
We
have
game
which
has
scalar
types,
and
then
it's
got
some
like
some
optional
type.
So
the
game
state
is
an
optional
value
or
we've
got
arrays
which
have
got
player
and
questions
so
on
and
so
forth.
You
kind
of
get
the
idea
of
where
I'm
going
here,
one
to
one
mapping
between
what
our
schema
had.
A
What
that
does
mean
is
that
I
can
come
into
my
resolver
function,
a
file
here
and
then
I
can
say
that
I
want
to
strongly
type
this
as
resolvers
resolvers
resolvers
there
we
go
and
that's
going
to
come
from
api
graphql
generated,
so
this
will
import
that
in
and
now
we'll
see
that
say,
the
id
is
stronger
type
to
string
fantastic
because
we
know
that
that
is
of
our
schema
coming
in
as
a
string
id.
We
know
that
that's
correct
excellent,
so
we
can.
We
know
that
that's
there.
We
know
that
same
with
player.
A
A
We
still
don't
know
what
our
data
source
is,
though,
which
is
a
little
bit
of
a
problem,
because
well
is
it
game
or
is
it
games?
I
I'd
have
to
dig
through
my
own
code
base
to
remember.
You
know
it's
the
kind
of
thing
that
you
don't
hit
to
run
time,
but
let's
just
do
an
npm
start,
kick
off
our
api
and
have
a
look
at
what's
actually
up
and
running
now.
We'll
give
this
a
moment
it's
going
to
compile
our
typescript
and
there
we
go.
A
That's
all
up
and
running
we'll
start
our
local
web
server.
Here
we
go:
here's
our
graphql
endpoint
and
we'll
zoom
that
in
once
it
loads
excellent.
This
will
load
up
the
graphql
playground
and
we'll
see
that
excellent.
We
can
perform
a
query
and
here's
a
query
that
I've
previously
done.
So
it's
just
going
to
dump
out
all
the
games,
the
state
of
the
game,
its
id
and
the
questions
that
were
asked.
A
So
if
you
hit
run
on
this,
it
turns
out
that
we
get
another
error
and
you
think
that
even
if
you're
doing
a
pre-recorded
talk,
you
wouldn't
have
runtime
errors
and
stuff
like
that.
You
should
get
those
in
anything,
but
no.
This
is
actually
an
area
that
I
expect
what
it's
saying
is
it
can't
return
null
from
a
non-null
field?
A
So
let's
open
up
our
cogen
yaml
and
we're
going
to
add
some
model
mappers,
actually
we'll
jump
across
and
I'll
show
this
in
a
completed
version,
rather
than
rather
than
potentially
running
doing
some
more
runtime
errors
we're
running
out
of
time
for
today.
So
let's
try
and
get
things
working
as
much
as
we
can.
A
A
If
we
do
npm
run
gen
here,
oh
npm,
l,
I
am
in
the
wrong
folder.
Where
are
we?
Where
are
we
going?
We
are
going
to
completed
api
there
we
go
and
npm
run
gen,
so
we'll
just
generate
out
our
typescript
file.
Excellent
that'll
be
ready
in
just
a
minute.
A
There
we
go
and
if
we
have
a
graphql
generated
now
we
have
a
bit
of
additional
information,
that's
mapping
between
our
our
questions
and
our
players,
because
what
it's
doing
is
it's
detecting
that
whenever
it
finds
a
question,
it's
going
to
return
a
question
model.
So
how
does
this
work
with
inside
of
our
resolver?
A
A
Similarly
with
a
correct
answer:
we're
just
going
to
return
the
correct
underscore
answer
field
from
the
question
model.
So
now,
if
I
change
my
underlying
data
structure,
so
inside
of
my
database,
it's
only
called
correct
answer.
I
change
it
to
correct
answer
with
you
know
with
a
pascal
case.
Well,
then,
this
will
start
being
a
compilation
error,
because
this
field
no
longer
exists,
and
then
I
know
that
I
can
remove
this
bit
of
code
because
I
no
longer
need
to
do
that
custom
mapping.
A
A
A
So
if
I
come
down
into
my
touchscreen
application,
I
have
say
a
page
where
we're
going
to
create
a
new
game,
so
this
is
going
to
need
to
perform
a
mutation
against
our
graphql
server,
so
it's
going
to
need
to
create
a
new
game.
So
what
I've
done?
Is
I've
created
a
reusable
little
bit
of
graphql
a
little
graphql
career?
That's
really
useful
called
great
game.
That
is
just
the
mutation
great
game,
and
this
is
what
it's
going
to
do,
and
it's
going
to
return
me
the
game
id.
I
don't
need
all
the
other
fields.
A
I
don't
need
the
questions
at
this
point
in
time,
because
I
only
need
the
id
to
go
through
to
the
next
screen
inside
of
my
concrete
yaml
file.
For
so
my
code,
gen
yaml
file
for
graphql
code
generator.
I've
also
said
that
I've
got
to
generate
a
tsx
file
which
is
going
to
contain
some
react
hooks
and
it's
going
to
use
the
typescript
plugin
as
a
type
operations
plugin.
So
it's
going
to
load
these
files,
these
operation
files
here.
A
So
these
are
those
pre-written
queries
and
mutations,
and
then
it's
going
to
generate
me
a
typed
document
node,
so
this
is
going
to
so
this
could
generate
me
specific
react
hooks
if
I
wanted
them
as
react,
hooks
or
pyrolytic
components,
and
things
like
that.
But
I've
told
it
that
I'm
not
going
to
use
those
plugins
at
this
point
in
time.
Instead,
I'm
just
going
to
return
typed
document
nodes,
so
these
document
nodes
can
be
loaded
by
anything,
that's
going
to
be
consuming
graphql,
whether
it's
react
or
angular
or
felt
et
cetera.
A
A
I
also
have
just
some
state
some
normal,
like
react
state,
that's
available
to
me
as
well
that
I'm
putting
some
type
information
in
that
I'm
putting
some
objects
in
and
these
I'm
combining
together
to
create
a
strongly
typed
version
of
a
query
against
our
graphql
server.
So
I
have
my
create
game
operation.
That's
here
that,
when
executed
so
depending
on
when
an
effect
is
traded,
so
someone
has
clicked
the
button
to
actually
create
the
game.
A
So
this
might
seem
kind
of
a
lot
of
parts
that
are
all
connected
together,
but
it
all
comes
down
to
relying
on
the
code
that
I'm
generating
out
of
here,
looking
at
a
schema
that
I've
got
here,
combining
that
with
some
pre-written
commands
and
operations
that
I've
got
with
inside
of
my
graphql
application.
So
the
client
has
some
pre-written
operations
working
with
a
schema
that
I've
got
elsewhere
and
we're
using
the
types
end-to-end
across
those
so
that
I
can
generate
out
type
safe
resolvers.
A
So
these
are
the
resolvers
that
are
going
to
be
returning
custom
model
mappers
so
that
I
can
map
the
underlying
data
structures
of
my
database
through
to
the
types
that
my
schema
says
are
available
to
the
clients
and
eventually
have
a
client
that
is
capable
of
using
these
operations
generating
some
type
information
of
them.
And
then,
when
say,
a
mutation
is
called.
I
get
the
data
back
and
I
get
that
data
back
in
a
tight
way
that
I
can
have
that
field
available
to
me,
and
I
know
what
it
is
and
I
can.
A
A
We
looked
at
a
subset
of
a
workshop
that
I've
got
there's
about
eight
different
modules
in
that
workshop
that
cover
off
how
to
build
a
graphql
application
with
typescript
all
the
way
from
the
first
setting
up
of
the
server
through
to
how
we
do
that.
End-To-End
type
safety
with
a
react
application
talking
through
to
the
graphql
server
back
end,
so
the
link's
there
on
the
slide.
A
A
Oh
sorry,
my
graphql
servers,
so
I
tend
to
generate
a
graphql
schema
file
and
then
want
to
export
that
as
type
information.
But
there
are
other
ways
if
you
wanted
to
do
more
of
use.
The
typescript
objects
that
you're
creating
so
like
classes
and
things
like
that
and
then
use
that
to
generate
a
graphql
schema
from
it,
so
kind
of
go
the
other
way
or,
and
so
there's
there
are
projects
out
there.
A
That
will
do
that
that
I
haven't
played
around
with
much
but
yeah
if
you
prefer
to
do
more
of
a
a
code
first
approach,
rather
than
a
schema
first
approach.
You
can
definitely
tackle
it
in
that
regards.
A
If
you're
wanting
to
learn
a
bit
more
about
how
you
can
run
graphql
on
azure,
there's
a
link
to
a
blog
series
that
I've
been
writing.
That
looks
at
all
the
different
aspects
of
how
we
can
do
things
like
well,
actually,
taking
this
workshop
that
I've
got
here,
how
you
can
run
that
kind
of
a
code
base
inside
of
azure,
as
well
as
how
you
can
run
things
on
a
server
infrastructure
rather
than
a
service
approach.
A
But
that's
all
that
I
had
time
for
today
and
all
I
wanted
to
cover
off.
Thank
you
for
sticking
around
for
the
session.
Thank
you
for
letting
me
present
some
of
my
learnings
that
I've
had
when
building
strongly
typed
graphql
applications.
I
hope
this
has
been
interesting.
I
hope
you've
learned
something,
and
I
hope
that
it
shows
you
that
it
is
definitely
possible
to
use
the
type
of
information
we've
got
in
graphql
with
a
server
and
a
client
all
together.
So
we
can
do
end-to-end
type
safety
bye
for
now.