API Mashup: Combining APIs using GraphQL Schema Stitching
A presentation at GitHub Universe 2018 in in San Francisco, CA, USA by Rouven Weßling
API Mashup Combining APIs using GraphQL Schema Stitching By Rouven Wessling
Hi, I’m Rouven Developer Evangelist, lover of APIs and cake @RouvenWessling
Don’t let a CMS get in the way of shipping software. Contentful provides a content infrastructure that enables teams to power content in any digital product.
5 Let’s talk about APIs
I like to call APIs “Lego for Developers” Image by Arto Alanenpää CC-BY-SA 4.0 https://commons.wikimedia.org/wiki/File:Lego_dublo_arto_alanenpaa_5.JPG
Developers ❤ APIs @RouvenWessling
GraphQL A short introduction @RouvenWessling
GraphQL Advantages • • • • • • Strongly typed schema Introspectable Get just the data you want Get all the data you want Frontend-driven data selection Composable @RouvenWessling
GraphQL https://medium.com/airbnb-engineering/reconciling-graphql-and-thrift-at-airbnb-a97e8d290712 @RouvenWessling
GraphQL https://medium.com/airbnb-engineering/reconciling-graphql-and-thrift-at-airbnb-a97e8d290712 @RouvenWessling
GraphQL https://medium.com/airbnb-engineering/reconciling-graphql-and-thrift-at-airbnb-a97e8d290712 @RouvenWessling
GraphQL https://medium.com/airbnb-engineering/reconciling-graphql-and-thrift-at-airbnb-a97e8d290712 @RouvenWessling
Who uses GraphQL? @RouvenWessling
Who uses GraphQL? @RouvenWessling
GraphQL Example Schema @RouvenWessling
GraphQL Example Schema @RouvenWessling Query
GraphQL Example Schema @RouvenWessling Query Result
Hello World @RouvenWessling
Hello World @RouvenWessling
Hello World @RouvenWessling
Hello World @RouvenWessling
Hello World Schema @RouvenWessling
Hello World Schema @RouvenWessling Query
Hello World Schema @RouvenWessling Query Result
Back to the Legos APIs Image by Arto Alanenpää CC-BY-SA 4.0 https://commons.wikimedia.org/wiki/File:Lego_dublo_arto_alanenpaa_5.JPG
Developers ❤ APIs @RouvenWessling
50% of apps use 2-5 APIs
9% use more than 25 APIs* *Global Development Survey Vol. 1 © 2017 Evans Data Corp
That’s a lot of Legos Image by Arto Alanenpää CC-BY-SA 4.0 https://commons.wikimedia.org/wiki/File:Lego_dublo_arto_alanenpaa_5.JPG
You need to know… • …which API holds which data • …how to authenticate against each API • …which fields indicate a reference to another API @RouvenWessling
A herculean task
What if we could have everything in one API?
What if APIs aren’t just legos?
What if APIs are like music?
A mashup is a song that’s created by blending two existing songs together.
A great mashup is a good song in itself, but also leaves it sources recognizable .
Say you have two songs Some indie rock @RouvenWessling
Say you have two songs Some indie rock and an electronic track @RouvenWessling
Say you have two songs Some indie rock and an electronic track can make for a great mashup @RouvenWessling
An Example
We got a lot of Open Source projects And it’s getting hard to keep track of them. @RouvenWessling
We need a dashboard • Pull information from GitHub • Store metadata in Contentful • Pull information from other services, e.g. TravisCI @RouvenWessling
Content model @RouvenWessling
Setup GitHub Contentful Stitching Proxy @RouvenWessling
t ’t s e k a Photo by Lindsay Henwood on Unsplash e L ti t s p e y b t s p e
Step 1 A remote schema Photo by freestocks.org on Unsplash
A remote schema @RouvenWessling
A remote schema @RouvenWessling
A remote schema @RouvenWessling
A remote schema @RouvenWessling
¿Por qué no los dos? Step 2 Photo by Priscilla Du Preez on Unsplash
¿Por qué no los dos? @RouvenWessling
¿Por qué no los dos? @RouvenWessling
¿Por qué no los dos? @RouvenWessling
¿Por qué no los dos? @RouvenWessling
Schemas GitHub @RouvenWessling Contentful
Problem Photo by Joao Tzanno on Unsplash
Our schemas conflict GitHub @RouvenWessling Contentful
Step 3 Schema transformation Photo by Suzanne D. Williams on Unsplash
Schema transformation @RouvenWessling
Schema transformation @RouvenWessling
Schema transformation @RouvenWessling
Schemas transformed GitHub @RouvenWessling Contentful
Step 4 Snitches get stitches
Snitches get stitches @RouvenWessling
Snitches get stitches @RouvenWessling
Snitches get stitches @RouvenWessling
Snitches get stitches @RouvenWessling
Too Easy? Photo by Alain d'Alché on Unsplash
Snitches get stitches - part 2 @RouvenWessling
Snitches get stitches - part 2 @RouvenWessling
Snitches get stitches - part 2 @RouvenWessling
Snitches get stitches - part 2 @RouvenWessling
Snitches get stitches - part 2 @RouvenWessling
Schemas stitched GitHub @RouvenWessling Contentful
Bonus Enrich data Photo by Boudewijn Huysmans on Unsplash
Enrich data @RouvenWessling
Enrich data @RouvenWessling
Demo
Stop treating your APIs like silos. Photo by David Pennington on Unsplash
Use schema stitching to allow developers to seamlessly access data across APIs.
And make some music.
ROUVEN WEßLING Twitter: @RouvenWessling Email: rouven@contentful.com
Come work with me West Coast Evangelist based in the SF Bay Area Email: rouven@contentful.com
ROUVEN WEßLING Twitter: @RouvenWessling Email: rouven@contentful.com
In music, a mashup is a song created by blending two or more existing songs into a whole new piece. The best mashups are seamless and natural. They’re just good songs.
In today’s golden age of APIs, nobody would be surprised if you used more than six APIs in a project. But, like songs, they all work slightly differently. You also have to remember which data is located in which API and what fields indicate a foreign key to another API.
What we need are API mashups. By stitching together multiple GraphQL schemas we can take away the overhead of having to remember where data is located and how to resolve references between them. In this talk, you’ll learn how to use schema stitching to annotate the GitHub API with metadata about the repositories and users in an organization, resulting in a more powerful API that’s ready to build great tooling with less effort.
for free. You
can too.
Video
Resources
The following resources were mentioned during the presentation or are useful additional information.
