Quiz time: I’ll name three companies and you tell me what they have in common between them:

They’re completely different organizations: version control hosting, a payments processor, and professional soccer league. But not only are their Engineering teams starting to use 

and the tools within the GraphQL ecosystem

Below, I’ll share a couple of reasons as to 

 they’ve found success with GraphQL and it should help inform if 

 should try using GraphQL. But before we get to that, I want to remind you:

We released our Fullstack React Masterclass 

, where we explain how production-ready apps can be built with React, TypeScript, GraphQL, and Node. 

PayPal considered GraphQL “a complete game changer”

If you were wondering if GraphQL is “production ready” consider this: PayPal introduced GraphQL to products that were part of the PayPal checkout experience.

In the article published by PayPal Engineering, 

GraphQL: A success story for PayPal Checkout

At PayPal, GraphQL has been a complete game changer to the way we think about data, fetch data and build applications.

Coming from a purely RESTful API perspective, the PayPal Engineering team recognized that 

 round trip made for their small atomic REST APIs during the checkout experience slowed rendering time, frustrated users and lowered checkout conversions

Since a large effort was being made in attempting to construct performant and reliable REST APIs, the team also realized UI developers were spending less than 1/3 of their time building UI and most of their time figuring out where and how to fetch data, filtering/mapping over the data, and structuring API calls.

, the PayPal Engineering team managed to solve 

developer experience and performance problems

. They’ve recognized how GraphQL allows for 

 (clients only request the data they need!) and 

Major League Soccer deletes 5,000 lines of code

When the Major League Soccer (MLS) development team switch to Apollo in their React application, it helped them delete over 

The MLS Engineering team relied on Redux (the Flux state management library) to share data/state between application components and for data fetching. Though Redux is a great library, a lot of developers have noticed that Redux and data-fetching with Redux often requires a decent amount of boilerplate and can be difficult to get started with.

recognized a large number of steps need to be taken to have data just be fetched from React components

One of the things that’s often misunderstood about Apollo is that the 

 library. The common understanding of Apollo is as a 

 library – it’s very good at this, particularly because it will maintain a local cache and only fetch the data from the server that is neeed.

 provides an “internal state management” tool (like Redux, if you’re familiar). Meaning, you can use Apollo client 

By switching over to using Apollo Client for their data fetching needs, the MLS Engineering team cut away thousands of lines and greatly simplified their code.

Read the MLS Engineering article posted in the Apollo blog here - 

Reducing our Redux code with React Apollo

Similarly, the Engineering team in Circle shares a similar sentiment in their article - 

Move Over Redux: Apollo-Client as a State Management Solution

Github - GraphQL is a “massive leap forward”

Though Github’s original public REST API was a source of inspiration to other companies, Github was one of the earliest large organizations to release their 

Though Github’s REST API was structured in a sound manner, some of the issues the Github Engineering team had were around scalability concerns. The RESTful endpoints in the API were recognized to not be flexible and simultaneously were bloated by returning large amounts of “unnecessary” data.

The concluding paragraph in Github’s Engineering article, 

, summarizes the results the Github team has concluded with building their API with GraphQL.

“GraphQL represents a massive leap forward for API development. 

 benefit both the maintainers and consumers of our platform.”

and many, many other companies are seeing similar results.

One of the best implications of using GraphQL is that you can 

 in TypeScript from your API to give you 

strongly typed code from your API requests

. But we’ll save that lesson for another day.

So what’s the easiest way to learn React, GraphQL, Apollo, and TypeScript?

 want to learn React, GraphQL, Apollo, TypeScript, and Node but also 

work together to build production-ready apps

 Masterclass that walks you through building production-ready apps with 

this growing and powerful technology stack

TinyHouse is more detailed than any other course we’ve made before

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Who is Using GraphQL? </h1>Quiz time: I’ll name three companies and you tell me what they have in common between them:Github. PayPal. Major League Soccer.The answer?&nbsp;They all switched to GraphQL.They’re completely different organizations: version control hosting, a payments processor, and professional soccer league. But not only are their Engineering teams starting to use&nbsp;GraphQL, they’ve started to see&nbsp;significant success&nbsp;with GraphQL&nbsp;and the tools within the GraphQL ecosystem.Below, I’ll share a couple of reasons as to&nbsp;why&nbsp;they’ve found success with GraphQL and it should help inform if&nbsp;your organization&nbsp;should try using GraphQL. But before we get to that, I want to remind you:<blockquote class="">We released our Fullstack React Masterclass&nbsp;<a href="https://www.newline.co/tinyhouse" rel="noopener noreferrer nofollow">TinyHouse</a>, where we explain how production-ready apps can be built with React, TypeScript, GraphQL, and Node.&nbsp;</blockquote><h1><a name="paypal-considered-graphql-a-complete-game-changer" id="paypal-considered-graphql-a-complete-game-changer">PayPal considered GraphQL “a complete game changer”</a></h1><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201011225846586_s_781B252B6E7773C4B0570FB1A6626B3B1E5A49B16C4845BFFD63FADE7756CDF7_1573406790036_image.png" attachmentid="dfbb505b-791e-4f87-8636-e60e057d0e69" contenteditable="false" data-width="391" data-height="82"><div></div></figure>If you were wondering if GraphQL is “production ready” consider this: PayPal introduced GraphQL to products that were part of the PayPal checkout experience.In the article published by PayPal Engineering,&nbsp;<a href="https://medium.com/paypal-engineering/graphql-a-success-story-for-paypal-checkout-3482f724fb53" rel="noopener noreferrer nofollow">GraphQL: A success story for PayPal Checkout</a>, they say that:<blockquote class="">At PayPal, GraphQL has been a complete game changer to the way we think about data, fetch data and build applications.</blockquote>Coming from a purely RESTful API perspective, the PayPal Engineering team recognized that&nbsp;every&nbsp;round trip made for their small atomic REST APIs during the checkout experience slowed rendering time, frustrated users and lowered checkout conversionsSince a large effort was being made in attempting to construct performant and reliable REST APIs, the team also realized UI developers were spending less than 1/3 of their time building UI and most of their time figuring out where and how to fetch data, filtering/mapping over the data, and structuring API calls.Enter GraphQL…By going&nbsp;all in with GraphQL, the PayPal Engineering team managed to solve&nbsp;both their&nbsp;developer experience and performance problems. They’ve recognized how GraphQL allows for&nbsp;better performance&nbsp;(clients only request the data they need!) and&nbsp;better overall productivity.<blockquote class="">Read PayPal’s entire article here -&nbsp;<a href="https://medium.com/paypal-engineering/graphql-a-success-story-for-paypal-checkout-3482f724fb53" rel="noopener noreferrer nofollow">GraphQL: A success story for PayPal Checkout</a></blockquote><h1><a name="major-league-soccer-deletes-5,000-lines-of-code" id="major-league-soccer-deletes-5,000-lines-of-code">Major League Soccer deletes 5,000 lines of code</a></h1><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201011225913306_s_781B252B6E7773C4B0570FB1A6626B3B1E5A49B16C4845BFFD63FADE7756CDF7_1573352235775_image.png" attachmentid="8a7854c2-2d78-4270-add8-64174c0bea10" contenteditable="false" data-width="130" data-height="137"><div></div></figure>When the Major League Soccer (MLS) development team switch to Apollo in their React application, it helped them delete over&nbsp;<a href="https://blog.apollographql.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a#8675" rel="noopener noreferrer nofollow">5000 lines of code</a>.The MLS Engineering team relied on Redux (the Flux state management library) to share data/state between application components and for data fetching. Though Redux is a great library, a lot of developers have noticed that Redux and data-fetching with Redux often requires a decent amount of boilerplate and can be difficult to get started with.With Redux, the MLS team&nbsp;<a href="https://blog.apollographql.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a#ab59" rel="noopener noreferrer nofollow">recognized a large number of steps need to be taken to have data just be fetched from React components</a>.Enter GraphQL… and ApolloOne of the things that’s often misunderstood about Apollo is that the&nbsp;<a href="https://www.apollographql.com/docs/react/" rel="noopener noreferrer nofollow">Apollo Client</a>&nbsp;utility is a&nbsp;complete state management&nbsp;library. The common understanding of Apollo is as a&nbsp;data-fetching&nbsp;library – it’s very good at this, particularly because it will maintain a local cache and only fetch the data from the server that is neeed.However Apollo Client&nbsp;also&nbsp;provides an “internal state management” tool (like Redux, if you’re familiar). Meaning, you can use Apollo client&nbsp;instead&nbsp;of a state-management tool like Redux.By switching over to using Apollo Client for their data fetching needs, the MLS Engineering team cut away thousands of lines and greatly simplified their code.<blockquote class="">Read the MLS Engineering article posted in the Apollo blog here -&nbsp;<a href="https://blog.apollographql.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a" rel="noopener noreferrer nofollow">Reducing our Redux code with React Apollo</a>.&nbsp;Similarly, the Engineering team in Circle shares a similar sentiment in their article -&nbsp;<a href="https://engineering.circle.com/https-medium-com-mattdionis-move-over-redux-apollo-client-as-a-state-management-solution-1f9325f96cdd" rel="noopener noreferrer nofollow">Move Over Redux: Apollo-Client as a State Management Solution</a>.</blockquote><h1><a name="github-graphql-is-a-massive-leap-forward" id="github-graphql-is-a-massive-leap-forward">Github - GraphQL is a “massive leap forward”</a></h1><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201011225930519_s_781B252B6E7773C4B0570FB1A6626B3B1E5A49B16C4845BFFD63FADE7756CDF7_1573356720673_image.png" attachmentid="3a085a01-25d6-4a97-a671-09232e81fcd9" contenteditable="false" data-width="182" data-height="139"><div></div></figure>Though Github’s original public REST API was a source of inspiration to other companies, Github was one of the earliest large organizations to release their&nbsp;<a href="https://developer.github.com/v4/" rel="noopener noreferrer nofollow">public API in GraphQL</a>&nbsp;as well.Though Github’s REST API was structured in a sound manner, some of the issues the Github Engineering team had were around scalability concerns. The RESTful endpoints in the API were recognized to not be flexible and simultaneously were bloated by returning large amounts of “unnecessary” data.Enter GraphQL…The concluding paragraph in Github’s Engineering article,&nbsp;<a href="https://github.blog/2016-09-14-the-github-graphql-api/" rel="noopener noreferrer nofollow">The GitHub GraphQL API</a>, summarizes the results the Github team has concluded with building their API with GraphQL.<blockquote class="">“GraphQL represents a massive leap forward for API development.&nbsp;Type safety,&nbsp;introspection,&nbsp;generated documentation, and&nbsp;predictable responses&nbsp;benefit both the maintainers and consumers of our platform.”Read Github’s entire article here -&nbsp;<a href="https://github.blog/2016-09-14-the-github-graphql-api/" rel="noopener noreferrer nofollow">The GitHub GraphQL API</a></blockquote><h2><a name="the-graphql-ecosystem-is-exploding" id="the-graphql-ecosystem-is-exploding">The GraphQL ecosystem is exploding</a></h2>I could go on.<ul><li>The New York Times organization&nbsp;<a href="https://open.nytimes.com/react-relay-and-graphql-under-the-hood-of-the-times-website-redesign-22fb62ea9764" rel="noopener noreferrer nofollow">redesigned and rebuilt their website with GraphQL and React</a>.</li></ul><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201011230109389_s_781B252B6E7773C4B0570FB1A6626B3B1E5A49B16C4845BFFD63FADE7756CDF7_1573357702030_image.png" attachmentid="e2cf1fe9-a2ea-441e-8afc-be577529a19a" contenteditable="false" data-width="2016" data-height="1156"><div></div></figure><ul><li>The new facebook.com was&nbsp;<a href="https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/" rel="noopener noreferrer nofollow">built with GraphQL and React</a>.</li></ul><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201011230103706_s_781B252B6E7773C4B0570FB1A6626B3B1E5A49B16C4845BFFD63FADE7756CDF7_1573358216918_image.png" attachmentid="fa4e60f2-a8c1-47f5-b34b-61bb639283c5" contenteditable="false" data-width="1092" data-height="752"><div></div></figure><ul><li>Shopify utilizes&nbsp;<a href="https://www.youtube.com/watch?v=lo8BpB17jf0" rel="noopener noreferrer nofollow">React, GraphQL, and TypeScript to build their client applications</a>&nbsp;<a href="https://www.youtube.com/watch?v=lo8BpB17jf0" rel="noopener noreferrer nofollow">at scale</a>.</li><li>Airbnb moves&nbsp;<a href="https://medium.com/airbnb-engineering/how-airbnb-is-moving-10x-faster-at-scale-with-graphql-and-apollo-aa4ec92d69e2" rel="noopener noreferrer nofollow">10x faster</a>&nbsp;with GraphQL and Apollo.</li><li>Twitter uses&nbsp;<a href="https://is-tracking-link-api-prod.appspot.com/api/v1/click/4784641676673024/5979436493045760" rel="noopener noreferrer nofollow">GraphQL to power TweetDeck, TweetLite, and their mobile apps</a>.</li></ul>and many, many other companies are seeing similar results.<h2><a name="typescript-and-graphql-are-like-pbandj" id="typescript-and-graphql-are-like-pbandj">TypeScript and GraphQL are like PB&amp;J</a></h2>One of the best implications of using GraphQL is that you can&nbsp;generate types&nbsp;in TypeScript from your API to give you&nbsp;strongly typed code from your API requests. But we’ll save that lesson for another day.<h2><a name="so-whats-the-easiest-way-to-learn-react,-graphql,-apollo,-and-typescript?" id="so-whats-the-easiest-way-to-learn-react,-graphql,-apollo,-and-typescript?">So what’s the easiest way to learn React, GraphQL, Apollo, and TypeScript?</a></h2>If you not&nbsp;only&nbsp;want to learn React, GraphQL, Apollo, TypeScript, and Node but also&nbsp;how&nbsp;these technologies&nbsp;work together to build production-ready apps, then&nbsp;TinyHouse&nbsp;is your guide.TinyHouse is a&nbsp;hand’s on,&nbsp;project-based&nbsp;Masterclass that walks you through building production-ready apps with&nbsp;this growing and powerful technology stack.TinyHouse is more detailed than any other course we’ve made before&nbsp;and contains:<ul><li>Hours&nbsp;of lecture videos</li><li>Hundreds of pages&nbsp;of lesson manuscript</li><li>Numerous&nbsp;quiz questions (and solutions!)</li><li>Project challenges</li><li>and a lot more!</li></ul>You can read more about <a href="https://newline.co/tinyhouse" rel="noopener noreferrer nofollow">Tinyhouse over here</a>.

AUTHOR

Hassan Djirdeh

Nate Murray

Quiz time: I’ll name three companies and you tell me what they have in common between them: Github. PayPal. Major League Soccer. The answer? They all switched to GraphQL.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Who is Using GraphQL?

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript