Weitere ähnliche Inhalte Ähnlich wie Michelle Garrett - Build the API you want to see in the world (with GraphQL) - Codemotion Berlin 2018 (20) Kürzlich hochgeladen (20) Michelle Garrett - Build the API you want to see in the world (with GraphQL) - Codemotion Berlin 20183. This is not a serious
deep dive into how
GraphQL works.
4. This is a talk about the
problems GraphQL can
solve in the real world.
6. A story of LIBERATING
an application from the
grips of a 3rd party API
8. I am a Software Engineer at
Condé Nast International in London.
I organise Node Girls.
I GraphQL.
@msmichellegar
13. GraphQL is a syntax for
asking for information
from a server.
15. With REST you have
multiple endpoints.
eg. /articles /galleries
19. There is a “schema” that
tells you all the fields
you can request (and
their types).
27. API
An API for the
content
management
system (CMS)
that our editors
use to write
content.
30. 1. A lot of our
components were tied
very specifically to the
API response.
31. const Title = ({ apiResponse }) => (
<div>
<h1>{apiResponse.title}</h1>
</div>
);
33. If the API changes, you
have to update your
components.
34. const Title = ({ apiResponse }) => (
<div>
<h1>{apiResponse.title}</h1>
</div>
);
35. const Title = ({ apiResponse }) => (
<div>
<h1>{apiResponse.head}</h1>
</div>
);
37. const Title = ({ apiResponse }) => (
<div>
<h1>{apiResponse.title}</h1>
</div>
);
41. PRESENTATIONAL CONTAINER
const Title = ({
text
}) => (
<div>
<h1>{text}</h1>
</div>
);
const Article = (data) => (
<article>
<Title text={data.title} />
</article>
);
export default compose(
withArticleData
)(Article);
43. const Title = ({ text }) => (
<div>
<h1>{text}</h1>
</div>
);
45. const Article = (data) => (
<article>
<Title text={data.title} />
<Byline author={data.author} />
</article>
);
export withArticleData(Article);
46. We did not enforce this
strictly enough! Our
components knew too
much :(
49. 2. We sent a lot of data
we weren’t using to the
client.
54. It can be a security risk.
What if the API
developer introduces a
sensitive field?
55. Moral of the story: we
should not be sending
all this data to the
client!
56. 3. If we switched data
sources, we’d have to
completely rewrite our
entire application.
58. If we switched CMS,
we’d have to throw
away our app and
rewrite it.
61. It is a business risk to
couple your application
to a third party service.
63. 4. The API was difficult
to work with: it had
some quirks that we
didn’t understand.
65. It was not built with
our specific use case in
mind (can you believe?)
75. But we needed to work
better with the API in
our application.
76. 5. We were fetching
data in complicated
ways from deep trees in
the API every time.
82. We had to navigate
complex relationships
between objects.
83. We had to make
multiple requests in our
main application to get
the data we wanted.
84. If you make multiple
requests client-side,
it’s not performant.
90. We had a spike, and
prototyped different
solutions to our
problems.
91. One was a refactor
based purely on domain
driven design.
107. We now know for sure
what data we can
request for our client
side application.
108. 2. We no longer have to
fetch data with multiple
requests in our main
application.
112. (We still have to make
the same requests, but
they now happen in the
GraphQL layer).
114. Our lives are much
easier now that we only
have to think about one
query.
117. We stripped all business
logic out of our
components
(separation of concerns)
118. We used field names that
made sense, instead of
using what the API gave
us.
126. 4. We have the insurance
that if we ever need to
change our data source,
most of our app will not be
affected.
131. The impact is limited to
updating the functions
that resolve data for
each field in the schema.
132. The API we use might
completely be
rewritten but we are
resilient
133. We can now react more
easily to technology
changes. Our application
won’t be devastated.
135. 1. You have a set of data
that needs to serve
multiple applications.
138. It has a lower barrier to
entry for new
consumers to the API.
144. It does not enforce a
specific way to
consume an API.
152. You can build a
GraphQL layer to fetch
data from all your
sources.
155. You can get data from
lots of places (including
REST APIs) and smoosh
it all together.
165. You can design and use
a modern interface that
you actually like.
168. 4. You want to enforce
structure in your code
base.
171. It will encourage you to
remove logic specific to
3rd party APIs from
your client application.
173. Do you have endpoints
that fetch fields based
a query param?
178. 6. Because it’s fun and
everyone else is doing
it* :)
*This isn’t the only reason you should choose a tool
180. - It gives you instant documentation.
- It’ll stop you having to make multiple
requests for data.
- It’ll help you to better structure your
code base.
- It shields your app from changing data
sources with a consistent interface.
WHY GRAPHQL IS NICE
181. - You have a set of data that needs to serve
multiple applications.
- You’re building an application that uses
multiple data sources.
- You’re stuck with a legacy API.
- You want to enforce better structure in your
code base.
- Your REST API already fetches fields based
on a query param.
REASONS TO USE GRAPHQL