Headless CMS for Ember

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

Step #1 - Fetching data from a GraphQL API in Ember.js

To pull the data from a headless CMS you would use the graphql-request library. A GraphQLClient instance is created from graphql-request with an authorization header. Replace 'Bearer YOUR_HYGRAPH_TOKEN' with your actual authorization token. You can get the token by setting your projects' permissions and generating on in your Hygraph project settings..

By using the GraphQLClient instance with the authorization header, your GraphQL requests will now include the necessary authentication information.

services/graphql-service.js

import Service from '@ember/service';
import { request, GraphQLClient } from 'graphql-request';

export default class GraphqlService extends Service {
  async fetchData(query) {
    const endpoint = 'https://api-<region>.hygraph.com/v2/<some hash>/master';
    const graphQLClient = new GraphQLClient(endpoint, {
      headers: {
        authorization: 'Bearer YOUR_HYGRAPH_TOKEN',
      },
    });

    try {
      return await graphQLClient.request(query);
    } catch (error) {
      console.error('Error fetching GraphQL data:', error);
      throw error;
    }
  }
}

Step #2 - Using the fetched data in an Ember.js component

In the Ember.js component, data fetched from a GraphQL API is utilized to render content in the user interface. When the component initializes, it invokes the graphql-service to execute a predefined GraphQL query. This query specifies the data to be retrieved, like a list of items. The fetched data is then stored in a component property, such as this.data.

In the component's template, this data is used to dynamically generate the UI, displaying the retrieved information in a user-friendly format.

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class DataDisplayComponent extends Component {
  @service('graphql-service') graphqlService;
  @tracked data = null;

  @action
  async loadData() {
    const query = `{
      yourQuery {
        field1
        field2
      }
    }`;
    this.data = await this.graphqlService.fetchData(query);
  }
}

Start building with Ember.js

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

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Ember.js 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 Ember.js project

Utilizing a GraphQL-native headless CMS such as Hygraph in an Ember.js application streamlines the workflow for both developers and content editors. Developers benefit from GraphQL's efficient data querying, which minimizes unnecessary data transfer and enhances application performance. This efficiency complements Ember.js's modular architecture, allowing seamless integration and dynamic UI updates.

For content editors, the intuitive interface of a headless CMS simplifies content management, enabling them to focus on content quality without delving into technical details. This division of responsibilities boosts productivity, as content editors can dedicate themselves to content creation, while developers can focus on crafting a responsive and engaging user interface.

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