API Mashup: Combining APIs using GraphQL Schema Stitching

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

API Mashup Combining APIs using GraphQL Schema Stitching By Rouven Wessling