Headless CMS for Ionic

Hygraph is the ideal Headless CMS for Ionic websites and applications. Read further to learn how our API-first CMS allows you to add components to your Ionic apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Set up Apollo Client

First, we set up the Apollo client within an Angular module for an Ionic application. We import necessary modules and configure the Apollo provider with an HTTP link that includes an authorization header. The authorization token is added to the headers of the HTTP requests made by Apollo client, ensuring that each GraphQL request is authenticated.

The Apollo client is initialized with this link and an in-memory cache for efficient data management.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpClientModule, HttpHeaders } from '@angular/common/http';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from '@apollo/client/core';

// Your GraphQL endpoint and authorization token
const graphqlUri = 'https://api.yourdomain.com/graphql';
const auth_token = 'Bearer your-auth-token';

export function createApollo(httpLink: HttpLink) {
  const http = httpLink.create({
    uri: graphqlUri,
    headers: new HttpHeaders({
      'Authorization': auth_token,
    })
  });

  return {
    link: http,
    cache: new InMemoryCache(),
  };
}

@NgModule({
  imports: [
    BrowserModule,
    ApolloModule,
    HttpClientModule,
    HttpLinkModule
  ],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step #2 - Create a GraphQL Query

After that, you need to create a GraphQL query using the gql template literal provided by Apollo. This particular service, DataService, is injectable across the Angular application and provides a method getData that sets up a query watcher.

The watchQuery method is used to execute a query and obtain a stream of data changes over time, which can be subscribed to within components.

import { Injectable } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';

const GET_DATA_QUERY = gql`
  query GetData {
    someData {
      id
      value
    }
  }
`;

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private apollo: Apollo) {}

  public getData() {
    return this.apollo.watchQuery({
      query: GET_DATA_QUERY
    }).valueChanges;
  }
}

Step #3 - Fetch Data and Use in Component

The last thing is to fetch the data and use it in the Angular component. The component's template uses Angular's structural directive *ngFor to iterate over and display each item fetched.

Upon initialization, the component subscribes to the data stream provided by the DataService, assigning the fetched data to a local array which is then used to render the UI.

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data-fetcher',
  template: `
    <div *ngFor="let item of data">
      {{ item.value }}
    </div>
  `,
})
export class DataFetcherComponent implements OnInit {
  public data: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(result => {
      this.data = result.data.someData;
    });
  }
}

Start building with Ionic

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Ionic project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Ionic website or app.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Ionic project

Integrating a GraphQL-native headless CMS with an Ionic app streamlines the development process and enhances the content management experience. Developers benefit from GraphQL's efficient data fetching, which allows precise queries and reduces the need for multiple requests, leading to faster, more responsive apps.

Content editors gain from a headless CMS's flexibility to manage content across different platforms without worrying about the underlying technology, fostering a more dynamic content delivery to mobile platforms where Ionic apps excel. This synergy between GraphQL and a headless CMS encapsulates a modern development ethos that values efficiency, flexibility, and cross-platform compatibility.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started