ReactFoo 2019

In this talk we’ll walk through our journey to GraphQL at Adobe, and highlight a few of our successes and failures along the way.

Use Case:
We at Adobe Experience Cloud, wanted to redefine our customer’s experience, and as part of this redesign we wanted to focus on surfacing more data (but not at the cost of a performance overhead). This new redesign now required a mix of data from different sources to be rendered on the screen and we began to face many problems around performance, documentation, and general ease-of-use. On many pages, we found ourselves making four or five round-trips to the server to fetch the data and nit picking it at the client side in order to render it.

Solving the problem with GraphQL:
After some investigation, we thought of integrating GraphQL to our architecture— we decided to add a GraphQL proxy layer on top of our REST APIs. This was a pretty easy process- we built some utilities around making downstream REST calls to fetch data in our resolver, and wrote up some rules around converting our existing models into GraphQL and within a matter of days were ready to call our GraphQL pilot a success.

But the real challenges begin now:
One of our REST API rolled back to a previous version and suddenly every GraphQL query started failing. And what about caching? The solution to these problems and others that came across as we switched to GraphQL are covered next.

Outline

I’ll start the talk by our motivation to switch to GraphQL and how it solved the two most important problems (multiple round trips to server and overfetching of gigantic data). But as we progressed on ur journey with GraphQL, we came across some unavoidable problems (from personal experience), the solution to which I will cover next. Then I will briefly explain the Apollo client and server wrapper around GraphQL and how to use it with React. While the road has certainly been bumpy at times, we’re really able to recognize the benefits that GraphQL provides.

Requirements

Laptop and internet connection

Speaker bio

I am a polyglot developer working with Adobe Experience Cloud. I currently look after the authentication and orchestration part of the stack with the broad goal of optimizing the performance and scalability of the system. I have tried my hands-on trending technologies and introduced the same in my projects. Over the past years, I have dabbled with multiple tech stacks and have worked on various innovative ideas within the team.

Links

• Short Demo: https://youtu.be/bWGVUSkVkhs

Slides

https://docs.google.com/presentation/d/1brXA6jXjGdjkg9chjYV2V8c5iaCu19lwF32uPLDXF9k/edit?usp=sharing