GraphQL in Angular with Apollo

Last time I touched a bit on the combined benefits of using Vue with GraphQL via Apollo. It shouldn't come as a surprise that Vue isn't the exception here and the other big frameworks also let you do the same. So this time let’s take a look at Angular which also uses Apollo to combine its own features with those of GraphQL to make development even smoother and easier.

The Angular angle

I’ve already touched on the benefits of using GraphQL previously, so let’s get a bit into Angular. As we know GraphQL is primarily a server-side technology, well Angular is the reverse its primarily client side (though it has had server side rendering for a while now through Angular Universal) This means a typical Angular application executes in the browser, rendering pages in the DOM in response to the user’s actions. Aside from the technicalities the key features paint a clear picture why using the framework is beneficial:

• cross-platform: Angular has a lot of focus on flexibility and is a cross-platform framework. It's not limited by the browser and the only thing required to run it is a JavaScript engine. It can work client side or server side via Angular Universal and third party libraries let you use it across different environments.
• performance and speed: Angular also puts a lot of emphasis on working quickly and efficiently. It turns your templates into highly optimized JavaScript code and provides automatic code splitting via the Component Router. The template syntax and Angular’s CLI are also a big help making development much faster and easier.
• complete package: Angular’s strongest point in comparison to the other frameworks is that it provides you with a complete set of tools out of the box. It has a ton of features and its API will let you create even complex things like animations and choreographies with ease. Testing and fixing broken code is also made easy with Karma and Jasmine and will likely save you a ton of time.

Apollo, the greek god everything?

You might be thinking since its client side doesn't that mean it can’t be used with GraphQL to build web APIs? That’s where Apollo comes in, it lets you fetch data from your GraphQL server and use it for building apps using Angular. It's not just a bridge between the technologies and provides lots of additional features:

• quality of life improvements: Apollo Client provides caching and normalization as well as error management, support for pagination and data prefetching.
• versatility: Apollo provides lots of useful libraries which help effectively implement a GraphQL stack for JavaScript apps, such as Apollo Link.
• modern state management: you can manage local data with GraphQL operations via the Apollo Link State library. This means you basically don't need anything else for state management and everything is handled by Apollo itself.
• community driven: you’ll find tons of other tools made by the community which will help you even further. For example the Apollo Boost library makes the Apollo Client require almost no configuration to be set up for GraphQL and client-side apps.

Source: undraw.co

Don't get left in the dust

As always it's worth pointing out that while this can be a catch all solution for development it obviously will not fit everyone's tastes or needs. Angular by itself has a steep learning curve and if you throw GraphQL, Apollo and its libraries on top of that it can be quite a hassle to get a hang of. While it may not be the best solution for simple stuff it really shines when it comes to more complex projects which make use of the whole variety of available features. Both Apollo and especially GraphQL are cutting edge technologies that are currently gaining popularity in the dev community, so even if it's not the best solution for your current project it might be prudent to get a hang of them for the future.