All you need to know about Apollo-Angular Queries

Daniel Osunkwo — Fri, 19 Jan 2024 07:25:20 +0000

Simplifying Data Fetching in Angular Applications

Introduction:
With Apollo Angular, you can build UI components that fetch data with GraphQL. It is a flexible, community-driven GraphQL client for Angular. You can get the most value out of Apollo Client by integrating it with one of its view layer integrations.
It is designed from the ground up to make it easy to build UI components that fetch data with GraphQL.

The Angular Toolbox
Apollo is designed to work with all this tools:
Angular Schematics: Apollo Angular supports

ng-add

and

ng-update

NativeScript: Apollo works well out of the box in NativeScript.
Angular Router:
Ionic

Installation:-

The best way to get Apollo Angular is by running this command on your terminal.

ng add apollo-angular

Another thing is to set the URL of your GraphQL Server, open src/app/graphql.module.ts and set uri variables-

src/app/graphql.module.ts

const uri = 'https://48p1r2roz4.sse.codesandbox.io';

You can also install without using Angular Schematics by using this commands on your terminal

npm i apollo-angular @apollo/client graphql

Queries
Query simply means retrieving data and or Information from the database
In Apollo Angular we simply need to parse our query into a GraphQL document using the gql tag from apollo-angular library using the Apollo.watchQuery method

Example:

import { Apollo, gql } from 'apollo-angular';
import { Subscription } from 'rxjs';
import { Component, OnDestroy, OnInit } from '@angular/core';

// We use the gql tag to parse our query string into a query document
const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

@Component({
  // ...
})
class PostsComponent implements OnInit, OnDestroy {
  loading: boolean;
  posts: any;

  private querySubscription: Subscription;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.querySubscription = this.apollo
      .watchQuery<any>({
        query: GET_POSTS,
      })
      .valueChanges.subscribe(({ data, loading }) => {
        this.loading = loading;
        this.posts = data.posts;
      });
  }

  ngOnDestroy() {
    this.querySubscription.unsubscribe();
  }
}

As a result of the watchQuery method, we get a QueryRef object with a valueChanges property.

DEV Community: Daniel Osunkwo

All you need to know about Apollo-Angular Queries