Headless CMS for Meteor

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

Step #1 - Fetching content from the headless CMS

To retrieve the data from Hygraph's GraphQL API you can use the fetch function to send a POST request. The request includes a JSON body containing the GraphQL query. This method is asynchronous and returns the JSON response once the data is received.

Additionally, on the client side, this method is called using Meteor.call, and the result is stored in a Session variable (graphqlData). This approach allows the fetched data to be reactively used across the client-side of the Meteor application.

import { Meteor } from 'meteor/meteor';

Meteor.call('fetchGraphqlData', (error, result) => {
  if (error) {
    console.error('Error fetching GraphQL data:', error);
  } else {
    Session.set('graphqlData', result.data);
  }
});

Meteor.methods({
  async fetchGraphqlData() {
    const response = await fetch('https://api-<region>.hygraph.com/v2/<some hash>/master', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query: '{ yourQuery { field1 field2 } }' }),
    });

    return await response.json();
  }
});

Step #2 - Set up a template

To display the data you would use the templates in Meteor. MeteorJS templates are a core feature for building dynamic, reactive user interfaces. Written in HTML with the <template> tag, they automatically update to reflect changes in data, thanks to Meteor's reactive data system.

You can enhance these templates with JavaScript, adding helpers for data and logic, and event handlers for user interactions. Their ability to be nested and dynamically rendered offers great flexibility, allowing you to create complex interfaces with reusable components.

<template name="displayData">
  {{#if Template.subscriptionsReady}}
    {{#with graphqlData}}
      <div>
        <h1>{{field1}}</h1>
        <p>{{field2}}</p>
      </div>
    {{/with}}
  {{else}}
    <p>Loading...</p>
  {{/if}}
</template>

Step #3 - Import the template and display the content

Finally, you can integrate the fetched GraphQL data into a MeteorJS template. In this example, a Meteor template named PostList is defined, and it utilizes the posts helper function to access the data fetched from the GraphQL API.

This data is then iteratively displayed using the built-in #each directive of Blaze, Meteor's front-end rendering library. Each post's title and content are rendered within the template.

import { Template } from 'meteor/templating';
import './displayData.html';

Template.displayData.helpers({
  graphqlData() {
    return Session.get('graphqlData');
  }
});

Start building with Meteor and Hygraph

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

Quickstart

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

Using a GraphQL-native headless CMS such as Hygraph with a MeteorJS app provides clear advantages for both developers and content editors. Developers benefit from GraphQL's efficient data queries, which mesh well with MeteorJS's reactive data handling, resulting in enhanced app performance.

For content editors, the headless CMS offers an intuitive interface for straightforward content management. This combination supports a decoupled architecture, allowing for independent content updates and streamlined frontend development, leading to faster content delivery and a more agile workflow.

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