Consume APIs with the Modyo SDK in your JavaScript app

If you are developing an application in React, Vue or Angular, you probably already consume data from APIs to populate your front-end. Using APIs allows you to separate the presentation logic from the back-end, make your application more dynamic and improve the user experience without reloading the page. But what happens when you need to integrate a CMS without losing control over content management?

Modyo not only offers a headless API to manage content, but also gives you governance and control over the roles and permissions of those who manage the information. And the best part: it has an SDK that makes it even easier to integrate into your code.

In this article you will learn how to consume content from Modyo in your JavaScript application using its SDK. Let's go step by step so that you can integrate it easily and quickly.

Step 1: Install the Modyo SDK

To get started, you need to install the SDK with npm. Simply run the following command in your project's terminal:

npm install @modyo/sdk

Step 2: Import the Modyo client

Once installed, import it into the file where you are going to consume the API.

import { Client } from “@modyo/sdk”;

Step 3: Initialize the client

To connect to your Modyo account, you must initialize the client with your account URL and the language in which you want to get the content. Modyo supports multilingual content, so you should always specify the language.

const modyoAccount = new Client(“https://my-account.modyo.com”, “en”);

Step 4: Get a content type

Now that you have the client set up, the next step is to get a content type within a specific space. To do this, use the getContentType() method passing the UID of the space and the content type:

const typePost = modyoAccount.getContentType(“space_uid”, “type_uid”);

Step 5: Get the content entries

Finally, to get the entries within that content type, call the getEntries() method, which will return an array with the available data.

const entries = await typePost.getEntries();

The result will be an array that you can browse and display in your application.

Practical example: Integrating Modyo content in React

To show you how to implement all this in a real application, here is an example of a component in React that gets content from Modyo and displays it in a list:

import React, { useEffect, useState } from "react";
import { Client } from "@modyo/sdk";
const ModyoContent = () => {
  const [entries, setEntries] = useState([]);
  useEffect(() => {
    const fetchEntries = async () => {
      const modyoAccount = new Client("https://mi-cuenta.modyo.com", "es");
      const typePost = modyoAccount.getContentType("uid_del_espacio", "uid_del_tipo");
      const response = await typePost.getEntries();
      setEntries(response.entries);
    };
    fetchEntries();
  }, []);
  return (
    <div>
      <h1>Modyo Entries</h1>
      <ul>
        {entries.map((entry) => (
          <li key={entry.meta.uid}>{entry.meta.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default ModyoContent;

This component is responsible for:

• Initialize the Modyo SDK with the configured account and language.
• Get the content type from a specific space.
• Fetch the available entries in that content type.
• Render the entries in a list inside the JSX.

If you work with Modyo, its SDK makes it easy for you to consume content within your JavaScript application. By using it, you can integrate structured data efficiently, maintain centralized control over content management and ensure better organization with well-defined roles and permissions.

Photo by 𝓴𝓘𝓡𝓚 𝕝𝔸𝕀 on Unsplash