Headless CMS for Cordova

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

Step #1 - Construct your query and fetch the data from Hygraph

First, you'll need to define the query and send a request to Hygraph's API endpoint. The request includes a query string parameter that contains the structured GraphQL query, which specifies the data needed from the server. Once the request is sent, the code handles the promise returned by the Fetch API with .then() methods, which converts the response to JSON format, and then processes the data.

If errors occur during this request or processing stages, they are caught and handled by the .catch() method to ensure the application can manage or report the error appropriately.

const query = `
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

// Use fetch to send the GraphQL query to the server
fetch('https://api-<region>.hygraph.com/v2/<some hash>/master', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // Add your authorization token here if needed
    'Authorization': 'Bearer YOUR_AUTH_TOKEN'
  },
  body: JSON.stringify({ query })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Step #2 - Set up a container in HTML

In HTML all you need to do is set up a basic boilerplate with a container where the data will eventually be displayed.

In addition, also add the script where your JavaScript code is located.

<!DOCTYPE html>
<html>
<head>
  <title>GraphQL Data Display</title>
</head>
<body>
  <div id="data-container">
    <!-- Data from GraphQL will be displayed here -->
  </div>

  <script src="js/index.js"></script>
</body>
</html>

Step #3 -

In your index.js file (or wherever your JavaScript code resides), after fetching the data, you would process it and insert it into the container. Once the data is received from the GraphQL API, each item is looped over, and a new div element is created. This div contains a heading and a paragraph populated with the name and description of the item. This div is then appended to the data-container element in the HTML.

By manipulating the DOM like this, you integrate dynamic content fetched from the API into your application's static HTML, providing a seamless experience for the user.

// ... fetch request from the Step #1

.then(data => {
  // Get the container element
  const container = document.getElementById('data-container');
  
  // Clear previous content
  container.innerHTML = '';

  // Assuming data.data.items is the array of items you've received
  const items = data.data.items;

  // Create HTML for each item
  items.forEach(item => {
    // Create a new div element for each item
    const itemDiv = document.createElement('div');
    itemDiv.className = 'item';

    // Add content to the div
    itemDiv.innerHTML = `
      <h2>${item.name}</h2>
      <p>${item.description}</p>
    `;

    // Append the new div to the container
    container.appendChild(itemDiv);
  });
})
.catch(error => {
  // Handle any errors here
  console.error(error);
});

Start building with Cordova

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

Quickstart

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

Integrating a GraphQL-native headless CMS with a Cordova app empowers developers with a flexible and efficient means to query the data needed from the CMS, optimizing network performance and app responsiveness, which is especially crucial for mobile users.

For content editors, this setup offers the freedom to manage content centrally in a user-friendly environment, without worrying about the underlying platform specifics. This separation of concerns streamlines content updates and deployments across multiple platforms, as Cordova can wrap around the web content for various operating systems, ensuring a consistent content experience for end-users across all devices.

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