►
Description
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. Get Started Here: https://graphql.org/
The Future of GraphQL IDEs - Thomas Heyenbrock & Tim Suchanek, GraphCDN
JW Marriott Austin, Room 402/403
Speakers: Thomas Heyenbrock, Tim Suchanek
Every developer that has ever used GraphQL has written a query in GraphiQL and it's become one of the most widely used tools in the GraphQL ecosystem. However, alternative implementations like the GraphQL Playground have popped up and shown that one can go even further with a dedicated GraphQL IDE than the original GraphiQL.
In 2020, the GraphQL Playground was handed over to the GraphQL Foundation, and the work on combining the best of both worlds started. Let's explore the brand new GraphiQL!
A
A
A
A
At
the
same
time,
graphical
was
announced,
and
lee
actually
told
me
that
graphical
the
graphical
that
we
know
today
that
also
has
been
released
in
215
is
not
the
first
graphical.
It's
actually
version
4
already
there
have
been
a
bunch
of
iterations
internally
at
facebook
and
actually
graphical
was
by
the
way
one
of
the
first
projects
ever
to
use
react.js
in
2017
we
built
a
fork
of
graphical
at
a
company
called
graphql.
A
A
I
know
the
names
can
be
confusing.
This
has
been
handed
over
to
the
foundation
and
today
both
the
graphql
playground,
but
also
graphical
there
in
the
official
graphql
foundation
repository,
and
so
a
lot
has
happened.
In
the
meantime,
a
lot
of
foundational
building
blocks
has
have
been
put
in
place
and
now
we're
in
year
2022,
and
we
want
to
take
graphical
to
the
next
level
and
not
only
to
a
version
2,
but
also
to
a
version
three.
A
So
we
want
to
have
two
major
version
bumps,
and
I
will
explain
in
a
second
why
that
is
but
before
we
dive
into
that,
let's
first
understand:
why
do
people
use
graphical?
What
are
actually
the
user
needs
when
we
took
the
lead
on
the
project?
A
few
months
ago,
we
had
a
look
at
all
the
issues,
but
also
had
a
bunch
of
conversations
with
community
members,
and
so
what
we
found
is
that
there
are
quite
different
needs,
depending
on
when
you
want
to
use
the
project
on
day
one
I
just
want
to
try
out
graphql.
A
I
want
to
find
out
what
is
this
thing?
How
does
a
query
actually
relate
to
response
and
play
around
with
it
build
up
my
mental
model,
and
this
already
needs
to
be
accessible
for
everyone,
including
people
using
a
screen
reader
once
I'm
actually
in
the
middle
of
building
my
api,
I
again
have
new
needs.
A
I
want
to
have
fast
local
development
flows,
maybe
even
some
keyboard
shortcuts
and
I
want
to
be
probably
be
able
to
reload
my
schema
because
I'm
I'm
iterating
on
my
schema
once
I'm
building
this
api
out
and
I
have
a
team
now
again,
I
have
new
needs.
I
might
have
a
really
big
schema
at
facebook.
They
have
thousands
of
types
in
the
schema.
I
want
to
maybe
be
able
to
customize
it
and
customization
by
the
way
is
one
of
the
most
requested
features
in
the
graphical
vaporware.
A
A
So
that's
like
that's
the
problem
space
and
now
how
can
solution
space
look
like,
and
for
that
we
actually
have
a
few
guiding
principles
that
I
want
to
share
with
you.
The
first
one
is
user
focus.
When
I
come
into
the
tool,
the
tool
should
only
show
me
the
absolute
minimum
stuff
that
I
need
to
get
the
job
done.
What
is
the
job
that
I
want
to
get
done?
I
want
to
explore
an
api
and
I
want
to
probably
send
some
queries
aesthetics.
It's
also
important
to
us.
A
We
believe
that
good
user
experience
is
not
just
having
good
keyboard
shortcuts
and
fast
workflows.
It
actually
should
be
delightful
to
look
at
discoverability.
Graphql,
as
we
know,
is
a
graph.
You
have
fields
related
to
each
other
types
related
to
each
other,
and
that
is
something
we
need
to
explore.
A
We
need
to
find
out
what
are
the
relations
to
be
to
be
able
to
build
up
our
mental
model,
and
so
tools
like
autocompletion
go
to
definition
and
the
docs
and
explorer
is
important
here
and
last
but
not
least
again,
even
if
I
have
a
really
big
schema,
I
need
to
be
able
to
quickly
work
with
this
tool.
It
still
needs
to
be
responsible
and
responsive,
and
I
actually
heard
from
the
meta
team
that
the
the
current
schema
takes
a
lot
like
multiple
minutes
to
load,
and
that
is
something
we
want
to
improve.
A
So
with
all
of
that
in
mind,
how
could
the
solution
now
look
like
if
you
just
go?
A
few
years
ago,
a
startup
called
one
graph
created
a
extension
to
graphical
called
the
graph
graphical
explorer
and
the
ideas
I
can
basically
in
a
visual
manner,
create
a
query.
Why
is
this
interesting
for
us?
It
helps
us
with
discoverability,
and
more
and
more
people
in
the
community
have
been
embedding
this
in
their
graphical
instances,
and
we
have
observed
that
that
at
the
same
time
looks
quite
similar
to
the
dogs.
A
A
The
idea
is
that
the
need
of
having
documentation
but
also
being
able
to
construct
queries
is
merged
into
one.
I
also
want
to
say
this
is
an
experiment.
We
will
see
how
how
good
this
actually
works
out
in
reality.
Now
you
might
ask
okay
in
the
old
docs
I
can.
I
could
click
on
a
specific
type
and
see
details.
How
does
this
work
here?
A
So
if
you
want
to
see
type
details,
you
can
click
on,
for
example,
the
starship
type
or
the
person
type,
and
now
you
see
again
the
details,
so
we
are
again
solving
the
the
documentation,
but
also
the
discoverability
here,
and
this
is
actually
how
the
new
graphical
looks
like
everything
put
together.
This
is
the
new
design.
A
Now
you
might
think.
Okay,
we
talked
about
user
focus
and
there's
a
lot
of
stuff
on
the
on
the
screen,
and
how
does
this
work
when
I
want
to
embed
it
somewhere
and
that's
why
we
have
a
minimal
version
as
well
that
you
can
embed,
for
example,
in
a
blog
post,
you
don't
need
the
sidebar,
you
don't
need
all
the
icons.
This
is
the
absolute
minimum
version
to
just
have
a
query
and
a
response,
and
then,
on
the
other
hand,
we
talked
about
customizability.
A
A
We
start
on
the
left
side,
with
a
similar
setup
actually
to
vs
code,
where
you
have
the
icons
that
show
you
like
different
parts
of
the
sidebar
that
are
activated
here,
and
I
can
basically
change
what
is
happening
in
the
sidebar
based
on
those
icons
in
vs
code.
That's
the
same
behavior,
you
don't
change
the
whole
editor
setup,
but
just
the
sidebar,
and
with
that,
the
two
plugins
that
are
shipping
outside
of
out
of
the
box
are
the
documentation
and
the
history.
A
A
Another
feature
that
has
been
widely
requested
is
something
like
an
ast
explorer
so
where
the
query
part
is
basically
the
same,
but
now
I
want
to
have
a
different
result.
I
want
to
have
something
different
in
the
result
view,
and
for
that
we
are
also
allowing
a
switch
here,
so
you
can
have
your
own
customizations.
A
We
all
know
that
we
have
the
variables
and
the
header
input
usually
here.
That
is
also
something
you
can
customize
again.
Your
creativity
can
go
wild
and,
last
but
not
least,
we
have
seen
a
lot
in
graphql
ides
that
you
we
have
been
customizing.
What
the,
how
the
response
looks
like
maybe
some
headers
or
some
performance
information
and
here's
actually
a
concrete
design,
how
that
could
look
like
so
with
this
we
have
the
basics
for
the
new
graphical
tool
design.
B
So
tim
now
went
through
like
the
vision
that
we
have
for
graphical.
What
I
want
to
get
a
bit
into
now
is
tell
you
a
bit
okay.
How
do
we
want
to
make
this
happen?
And
what
are
we
doing
at
the
moment
for
those
of
you
who
maybe
followed
along
with
graphical
for
some
time
you
might
notice
it's
not
the
first
effort
around
pushing
graphical
forward.
B
B
Sadly,
it
never
saw
the
light
of
day
never
got
published
because
it
took
quite
some
time
to
implement,
given
the
the
huge
scope
and,
at
some
point
it
blocked
further
improvements
for
the
existing
version
one,
so
you
couldn't
publish
any
bug
fixes
anymore
and
at
some
point
the
efforts
that
have
been
done
were
moved
like
out
of
into
a
different
folder
and
the
original
version
one
code
was
restored
and
after
that
pandemic
didn't
help
with
that.
Like
a
couple
of
years,
there
wasn't
really
anything
moving
forward
anymore
with
graphical.
B
I
also
want
to
quickly
like
highlight
the
the
vision
in
terms
of
the
architecture
that
we
have
for
graphical
and
the
repository
structure
at
the
bottom.
There's
the
lspd
language
server
protocol,
which
basically
is
about
communicating
between
the
ide
and
graphql,
which
is
also
used,
for
example,
for
the
vs
code
extension,
and
we
also
have
already
in
a
implementation
for
monaco.
B
Basically,
the
vs
code
editor-
and
this
is
one
of
the
building
blocks
for
that
makes
up
graphical.
The
other
two
that
I
want
to
highlight
is
a
toolkit
package
which
contains
basically
utilities
that
are
commonly
used
and
necessary
to
build
a
graphical
ide
and
the
other
one
is
a
graphical
react
package
which
will
basically
contain
all
the
building
blocks
that
you
need
to
create
a
graphql
ide,
and
this
means
context.
B
B
B
B
It
actually
contains
no
breaking
changes
yet
so
for
everybody
who's
using
graphical
in
their
project
as
a
dependency,
you
should
be
good
to
upgrade
and
hopefully,
don't
have
to
change
anything
in
your
implementation
step.
Two
will
be
the
actual
ui
refresh
like
implementing
this
awesome
new
design.
That
tim
just
showed,
and
this
is
work
in
progress.
B
B
I've
just
talked
about
work
in
progress,
so
I
think
it's
about
time.
I
show
you
what
that
actually
means
and
let
me
switch
over
to
the
next
tab
here.
You
can
actually,
lo
and
behold,
see
the
working
version
of
the
new
graphical
design
that
jim
just
showed,
and
it's
like
working
as
you
know,
can
resize
stuff.
Here
I
can
type
my
query
run
the
query
get
a
response.
B
B
B
You
may
be
mentioning
since
we're
talking
about
the
dock
explorer.
You
can
see
the
positioning
changed
from
the
right
side
to
the
left
side,
like
tim,
showed
where
all
the
plugins
will
live.
Apart
from
that,
not
really
a
lot
has
changed.
The
ux
is
still
the
same.
It
just
has
a
fresh
coat
of
paint
on
it.
B
B
I
just
want
to
quickly
show
you
the
the
discussion
on
github,
where
tim
posted
the
new
design
and
give
you
a
quick
scroll
through
here
so
yeah
it's
been.
It's
been
a
lot
of
great
feedback,
a
lot
of
a
lot
of
discussions,
a
lot
of
excitement
and
even
more
like
some
people
got
so
excited
that
they
already
started
hacking
on
the
new
design
and
especially
the
new
dock
explorer.
B
So
in
fact,
we
have
at
the
moment,
like
two
proof
of
concept
versions
already
for
the
new
dock
explorer
when
I
quickly
also
show
you
one
of
them
from
jonathan
who,
just
like
came
into
our
working
group
meeting,
unannounced
and
dropped
this
in
front
of
tim
and
me
and
we
were
like
this-
is
awesome
like
it's.
Actually,
it
is
fully
functional,
so
I
can
click
here.
My
query
is
constructed
and
can
even
run
it.
B
B
B
B
We
in
fact
have
two
channels,
one
graphical
channel,
which
is
more
about
general
chatting
about
graphical
questions
or
whatever,
and
we
have
a
graphical
development
channel,
which
is
specifically
for
the
efforts
that
we
are
like
talking
about
today.
So
keep
an
eye
out
for
that.
We'll
post
updates
in
there,
hopefully
more
frequently
in
the
future.
Also
the
qr
code
is
a
link
for
an
invite
to
the
graphical
discord
server
if
you're
not
already
part
of
it.