Học Integration of GraphQL with Angular và Drupal 9

There’s no denying that GraphQL is the latest addition for API development. For front end frameworks many GraphQL clients are available and Apollo is one of the most popular ones in Angular applications. In this article we are going to discuss about GraphQL and it’s integration with Angular. We will also take a closer look at the drawbacks of traditional GraphQL, and focus on Apollo integration and custom way of integrations.

What is Angular?

Angular is open source web application framework managed by Angular Team at Google. For client side; it uses MVC (model-view-controller) and MVVM (model-view-view-model) architecture. Angular uses two ways data binding and automatic synchronization of data between Model and View. Stable version of Angular was 10.1 and licensed under MIT License.

What is GraphQL?

GraphQL is open source data query and manipulation language. Facebook has developed it internally and released publicly in 2015. GraphQL provides an approach to develop web API compared to REST & other web architecture.It allows to define data structure as per the need and same structure can be used to manage the data returned from the server. Also, it consists of type system, query language and execution of semantic, static validation and type introspection.

What is Apollo Client?

Apollo client is management library which manage local data and remote data with GraphQL. It fetches, modify the application data and accordingly update the application UI. Apollo present all the data in such a way that you can easily browse the data and information and can join data across multiple resources to get the desired result.

Drawbacks – Traditional way of Integration

Struggling with eco-system

Apollo team is struggling with maintaining eco-system. Apollo team has abandoned Redux as their internal state management solution. Team has not opinionated about how Redux should be used along with new updates. Many users don’t have much idea about how to proceed further with Apollo 2.0.

Low Performance in Complex Queries

GraphQL encounters performance issue if client asks for too many fields in single instance so in this case – it might be worth using REST API to perform complex queries.

Under Development

Apollo is in very early stage and whole Apollo team is working on the system and built it around the GraphQL eco-system. Advanced level of caching and monitoring system still in development. There are infrequent changes that can challenge the current updates and development when you update GraphQL library. In distinction – some of the libraries in GraphQL might be more conservative than Apollo. Ability of developers constant learning and facing challenges is really required.

No File Uploading

As GraphQL is not understanding files, file uploading feature is not included into its specification. In case of REST API – you won’t deal with such type of scenario as you can just put POST and can set the functionality

Kill Small Applications

GraphQL is right solution for multiple microservices; but in case of small application – it’s better to adopt REST API architecture. REST can also be good approach when you connect resource driven apps which don’t need queries offered by GraphQL

Reason why we avoid using Apollo-client to integrate Angular with GraphQL

For GraphQL integration with Apollo-client following package needs to be import in angular application.

• apollo-angular
• apollo-angular-link-http
• apollo-client
• apollo-cache-inmemory
• graphql-tag
• graphql

apollo-client module to make Apollo-client feature available in angular project.

apollo-bridge between angular and Apollo-client

apollo-angular-link-http use http-client module internally.

apollo-cache-memory store data in cache-memory provided by Apollo.

We have implemented our customize cache-service to store data.

graphql-tag parses your query to graphql document.

install all dependency.

To start using Apollo Angular simply run:

ng add apollo-angular

npm install --save apollo-angular \
  apollo-angular-link-http \
  apollo-link \
  apollo-client \
  apollo-cache-inmemory \
  graphql-tag \
  graphql

import module to module file

add asynciterble to tsconfig.json file as apollo-client require AsyncIterable

basic GraphQL API call with apollo-client.

• Here with Apollo-client many dependency and module have to import which are unnecessary for project.
•     With all those module and dependency various issue can be occurs like security, Project size and memory consumption
•     Instead of Apollo-client we use GraphQL Query Builder package which convert to graphQL query with less dependency

Our way to integrate graphQL with Angular

install graphQLquery builder in project.

Create new service for graphQL query.

export graphQL query (fetchRaceList) to http service and send post request to server with graphQLAPI with GQL query and get response back from server.

Wrapping Up

Apollo Angular thus allows you to fetch data from GraphQL and use it in building reactive UIs through the Angular framework. GraphQL is maturing and we will see further adoption and support for it in the .NET ecosystem. We have just scratched the basic of Apollo client – it has much more to offer. Apollo offers extensive options for fine tuning the caches and loading mechanisms as well. Apollo client for Angular provides a simple yet strong library for integrating your app with any GraphQL server. If you are looking for consulting and development of an authenticated GraphQL app then get in touch with our experts at Bytes Technolab.