Forem: likayeltsova

Hooking-up a headless CMS to React apps

likayeltsova — Fri, 02 Feb 2024 08:31:54 +0000

Info
This article shows how to hook up the React version of classical TodoMVC app to a Content Management System and use it to store data. After completing this tutorial, you will have a basic Todo application using React, which will sync its data into a cloud-based Content Management System.

Intro

When we’re building web applications, we always hit the problem of storing data somewhere - should it be a database or a file on a cloud storage or something else? Frontend developers, in particular, don’t usually like to play around with setting up servers or AWS services to support their apps. Using a headless CMS is a perfect option in that case. In this short tutorial we will go through setting up Flotiq headless CMS to make it super easy to connect our React application and use it as a permanent data store.

Prerequisites

Basic JavaScript knowledge
Interest in React :)
Headless CMS account, we will use Flotiq headless CMS for React (a free account will be just fine)

TodoMVC

TodoMVC is one of the most popular projects on GitHub and has been used by thousands of developers as an introduction to different frontend frameworks.

Let’s start with getting this up and running, and it’s straightforward.

Clone the repo

git clone --depth=1 https://github.com/tastejs/todomvc.git

Navigate to the React example

cd todomvc/examples/react

Install the dependencies

yarn

Start the project!

yarn run dev

Your browser should now open and display the TodoMVC app, and you can start adding tasks:

Code

Let’s now have a look at the files of this project. It’s really simple, and you can start by looking at the app.jsx file, which will help you understand what’s going on in the application:

The app uses the useReducer hook to manage the state. It’s a simple yet elegant way of dealing with an application state through events. It forces us to structure our code in a cleaner way without directly accessing the state with each user interaction. All state-handling logic is centralised and stored in a component called the reducer.

If you check the reducer.js file, you will see that it follows the best practices for writing reducers :

it’s restricted to a bare minimum
it doesn’t call any external entities
it replaces the state instead of mutating it
it uses a switch over the action.type field

We will keep that in mind when connecting to the CMS.

Data model & a headless CMS

Items are the only model in the TodoMVC app, and their model is quite simple:

id - a unique identifier of the item,
title - a text field containing the title,
completed - a boolean flag stating if the item is completed or not.

Before we connect the React application with our backend - we need to set up the data model in Flotiq. Let’s do it now.

Login to Flotiq, you can register a free Flotiq account
Once logged in - create a new Content Type Definition, follow this link or click on
Definition builder in the left sidebar menu
Add definition type in the top right corner
Design the model:
Set the Label to Item
Make sure the API Name is set to item
Add a new text property title

Add a checkbox called completed

Click on the Save button in the top right corner to add the Content Type to the system.

The end result should look like this:

Good job! At this point, your Flotiq account is ready to accept data from the application!

Tip
Please note, that we did not explicitly create an id field in the system. Flotiq creates that for us automatically. When we create new objects we will have 2 options:

submit them with an ID that we define, or

let Flotiq fill-in the id field with autogenerate values.

Connecting React with Flotiq

Now, let’s finally make our todo items persistent! We will implement the following connections between the React TodoMVC app and Flotiq:

creating new items in TodoMVC should create objects in the CMS
toggling the item’s completion state should also be reflected in the CMS.

Disclaimer - there are many other ways to achieve the same result! Please let us know in the comments if you can come up with other interesting ideas!

Adding new items

The simplest way to achieve that, without breaking the reducer, is to add an API call to Flotiq before a state update event is dispatched. Let’s make these simple changes in app.jsx:

Install node-fetch

npm install --save node-fetch@2

Add the useCallback import in the first line of app.jsx:

import { useReducer, useCallback } from "react";

Import node-fetch

import fetch from "node-fetch";

Add the FLOTIQ_API_KEY const right after the imports (Check this documentation on how to obtain a Flotiq API key).

const FLOTIQ_API_KEY = 'PUT YOUR READ-WRITE KEY HERE';

Finally, add the preDispatch function in app.jsx

// Find this in app.jsx:

export function App() {
const [todos, dispatch] = useReducer(todoReducer, []);

// Add this:
const preDispatch = useCallback( async (action) => {

        if(action.type == 'ADD_ITEM'){

            const options = {
                method: 'POST',
                headers: {'content-type': 'application/json', 'X-AUTH-TOKEN': FLOTIQ_API_KEY},
                body: JSON.stringify({title: action.payload.title, completed: false}),
            };

            // Create the object in Flotiq
            const res = await fetch('https://api.flotiq.com/api/v1/content/item', options);
            // Retrieve the response to get the object ID
            const data = await res.json();
            // Add the ID as part of payload for the reducer            
            action.payload.id = data.id;           

        }

        dispatch(action);

    }, []);

Success

Did you know that Flotiq automatically publishes a set of OpenAPI-compliant endpoints for the content model you define? On top of that there is more - Postman collection, SDKs and API docs, where you can find code snippets that you can simply copy from Flotiq directly into your project!

Click on the API Docs Link in your Flotiq dashboard:

Find the endpoint that you need and copy the code. That’s what I did to build this tutorial :-)

Pass preDispatch instead of dispatch to the Header and Main components:

   return (
        <>
            <Header dispatch={preDispatch} />
            <Main todos={todos} dispatch={preDispatch} />
            <Footer todos={todos} dispatch={dispatch} />
        </>
    );

Last thing - we need to update the existing reducer to support IDs that are generated outside of the reducer itself:

    switch (action.type) {
        case ADD_ITEM:
            return state.concat({ id: action.payload.id === undefined ? nanoid() : action.payload.id, title: action.payload.title, completed: false });

With this, you should now see new items appear in Flotiq while you add them in your TodoMVC!

Toggling item state

We will need to add a couple more changes to synchronise the completion state. The preDispatch function will have to handle another type of action: TOGGLE_ITEM, and we will also have to fetch the current state of the toggle so we can send it to Flotiq. Here’s the complete updated preDispatch:

    const preDispatch = useCallback( async (action) => {

        if(action.type == 'ADD_ITEM'){

            const options = {
                method: 'POST',
                headers: {'content-type': 'application/json', 'X-AUTH-TOKEN': RW_AUTH_TOKEN},
                body: JSON.stringify({title: action.payload.title, completed: false}),
            };

            const res = await fetch('https://api.flotiq.com/api/v1/content/item', options);
            const data = await res.json();
            action.payload.id = data.id;           

        } else if (action.type == 'TOGGLE_ITEM'){

            // Find the toggled item, so we know its state
            const item = todos.find( (item)=>{
                return item.id == action.payload.id
            });


            const options = {
                method: 'PATCH',
                headers: {'content-type': 'application/json', 'X-AUTH-TOKEN': RW_AUTH_TOKEN},
                body: JSON.stringify({id: action.payload.id, completed: !item.completed}), // negate current value of completed
            };

            const res = await fetch('https://api.flotiq.com/api/v1/content/item/' + action.payload.id, options);
            const data = await res.json();

        }


        dispatch(action);        

    }, [todos]);

That’s it! You will now see the state of the completed checkbox change in the CMS every time you make an update in your app:

Summary

In this short walkthrough, we demonstrated how to run the React version of the classic TodoMVC project. We then integrated it with a cloud-hosted CMS, where the data is persisted and can be accessed whenever we want.

Next steps? Fetch the list of todo items from Flotiq when the application starts!

📣 Exciting Update: Introducing the version of the "Equals" Filter in Flotiq Headless CMS! 🚀

likayeltsova — Fri, 23 Jun 2023 05:38:41 +0000

We're thrilled to announce a powerful new feature in Flotiq headless CMS that will revolutionize your content filtering experience. Introducing the possibility where you can pass multiple items in the "Equals" filter, designed to provide even greater flexibility and control when querying your data.

🔎 What is the "Equals" Filter?
The "Equals" filter allows you to pass multiple elements as a filter, ensuring that the results match any of the specified values. This means you can now easily retrieve content that corresponds to a specific set of criteria in a single API request.

🌟 How Does it Work?
Let's dive into an example to illustrate the capabilities of the "Equals" filter:

Suppose you have a "name" field in your content type, and you want to fetch all the products with names "product-1" or "product-2." With the "Equals" filter, you can simply use the following API query.

Before:

{"name":{"type":"equals", "filter":"product-1"}}

Now:

{"name":{"type":"equals", "filter":["product-1", "product-2"]}}
By leveraging this new filter, you can effortlessly retrieve the desired results without making multiple requests or complex workarounds.

📚 Want to Learn More?
To explore the full potential of the "Equals" filter and its usage scenarios, we encourage you to check out our comprehensive documentation. You'll find detailed information, code examples, and practical insights on incorporating this feature into your Flotiq headless CMS workflow.

👉 Learn More about the "Equals" Filter

✨ If you have any questions, need assistance, or want to share your feedback, our dedicated team is here to help you every step of the way.

Thank you for choosing Flotiq headless CMS as your trusted content management solution. We're excited to see how the "Equals" filter simplifies and empowers your content querying!

Happy Filtering! 🎉

Use data from Flotiq in React and Typescript projects

likayeltsova — Thu, 04 May 2023 10:33:24 +0000

This article demonstrates a TypeScript-based approach to React components hydrated with data coming from Flotiq

Introduction

In this short article, we will show how to set up a Flotiq content type and use your OpenAPI schema to generate a Typescript-compatible API client that will integrate seamlessly with your Next.js project. As a result, you will be able to consume any data you store in Flotiq in Next.js with benefits like code completion in your IDE.

Prerequisites

Flotiq account
basic Typescript and React knowledge.

Create a content type in Flotiq

Start with a simple content type, for example, one that represents a Hero section in your website.

once you create the content type definition — go ahead and add some objects too.

Create NextJS project

Next, use the create-next-app to setup a fresh Next.js project

npx create-next-app@latest flotiq-component-demo --typescript --eslint
cd flotiq-component-demo

Export Flotiq API and build the API package

When the Next.js project is already up and running you will now connect it to your Flotiq API. Start by exporting the API definition into a file. You will need your read-only API key to do this — here’s how to get it.

export FLOTIQ_RO_API_KEY=<YOUR_RO_API_KEY_HERE>
curl -X GET "https://api.flotiq.com/api/v1/open-api-schema.json?hydrate=1" -H "X-Auth-Token: ${FLOTIQ_RO_API_KEY}" > oas.json

This command will save your OpenAPI definition into a file called oas.json in your current directory. Next - you will process that file with openapi-generator to build the API client:

docker run --rm -it -v "${PWD}:/tmp" \
       --workdir /tmp openapitools/openapi-generator-cli \
       generate -i /tmp/oas.json -g typescript-node -o /tmp/flotiq-api \
       --additional-properties=modelPropertyNaming=original,paramNaming=original,withNodeImports=true,supportsES6=true,npmName=component-api,npmVersion=0.1.0

This will save the API in flotiq-api directory, so you now have to move the built API into its proper location (note that the target path will change if you are not using NextJS src and app directories):

mv flotiq-api ./src/app/flotiq

Use the API

We’re almost done! Now you have to edit 2 files in the NextJS repo: 1. src/app/page.tsx and 2. src/app/components/hero.tsx (new file) to start using the API.

Let’s start with page.tsx. First, we need to connect to Flotiq API, add the following lines to your file

// add this at the beginning of the file, with other imports
import { ContentHeroApi, ContentHeroApiApiKeys, HeroList } from './flotiq/api'

const FLOTIQ_API_URL = "https://api.flotiq.com";
const FLOTIQ_API_KEY = "<YOUR_RO_API_KEY_HERE>"; // RO

async function getData() : HeroList {
  const heroApi = new ContentHeroApi(FLOTIQ_API_URL);
  heroApi.setApiKey(ContentHeroApiApiKeys.HeaderApiKeyAuth, FLOTIQ_API_KEY);
  // let's fetch all sections and make sure we hydrate them 
  const {body: list} = await heroApi.listHero(undefined, undefined, undefined, undefined, 1)
  return list;
}

next, let’s update the Home() component to display all the sections found:

export default async function Home() {
  const list = await getData();
  return (
    <main>
      <div className="bg-white py-24 sm:py-32">
          {list.data?.map(function(section, index){

              return <HeroComponent hero={section}></HeroComponent>
            })
          }
          </div>
    </main>
  )
}

now, let’s create that HeroComponent in the src/app/components/hero.tsx file:

import { Hero } from "../flotiq/api";
interface HeroProps {
  hero: Hero
}
export default function HeroComponent({hero} : HeroProps){
    return (
            <div>
             <h3>
                 {hero.lead_text}
             </h3>
            </div>
    );
}

That’s it! Start using TypeScript with Flotiq data. By now you probably noticed how convenient it is to have explicit typing and code completion in your editor:

How to design headless component

likayeltsova — Mon, 03 Apr 2023 12:45:58 +0000

Headless CMS can store raw data about products, stock, people, books or whatever else. But it can also hold information about the structure of pages on a website. Without sacrificing the benefits of a headless approach - we can also provide users with familiar and easy-to-use tools to control the appearance of their content and foster the reuse of existing material. In this article, we will look at an approach to how to structure headless CMS-based websites and design the content model to support these goals.

Information Architecture

What comes first in every headless CMS-based project is the information architecture. This means - your data model. There are 2 common patterns for designing the model:

Model built around raw data, e.g. products and stock
Model that also represents concepts like pages and their content.

While the first approach is absolutely correct, the second can easily become an anti-pattern of a headless CMS application. Let’s look a bit deeper into the pros & cons of both.

Raw data pattern
In the raw data pattern, we make great efforts to eliminate (or at least greatly reduce) any signs of the presentation layer in our data model. Some models we might see in a project would be:

product

id: number
price: number
name: text
description: text
image: URL

invoice

id: number
date: date
amount: number
customer: object

This is done for a good purpose - the more sauté our data, the easier it will be to repurpose for different channels. What you display in a web browser today might end up on your smartwatch tomorrow. Reusing that content on a different device becomes relatively easy once we get rid of HTML or other forms describing how the content should be displayed. That’s, in fact, one of the main selling points of headless CMSs. Drawbacks? The headless Content Management System in reality, becomes a very thin frontend to a database. Is it bad? Not necessarily. Does it help content editors work with the content? To some extent - yes. But in this case, 100% of the description of how this content is displayed on a website (for example) has to be defined in code. This, in turn, means that any change to what is displayed on the website requires a developer to change that code and redeploy the application. This isn’t what customers used to platforms like Wix, WordPress or Adobe Experience Manager want to see. They expect at least some level of control and the ability to perform changes on a website without constantly engaging development teams.

Visual model

Quite the opposite approach, one which tries to address the need to easily perform changes on the website, is to include a description of the visual representation of our content in the headless data model. What we might find in a project that follows this path is, for example:

page

title: text
URL: text
keywords: text
header: rich text
mainContent: rich text
footer: rich text.

Depending on the features provided by the headless CMS - content editors may have quite a bit of control over how the content is structured and rendered on a page. For example, Flotiq [link do flotiq.com] offers a block editor that allows authoring page sections using structured content blocks.

This approach, unfortunately, is very close to a headless CMS anti-pattern. Content stored in pages structured this way will likely be unusable in any channel except a website. Let’s look at an example page object represented in JSON:

{
  "title": "About us",
  "url": "/about-us",
  "keywords": "company information",
  "header": "<h1>ACME company information page</h1>",
  "mainContent": "<h2>Company history</h2><img src=\"/media/team-photo.jpg\" alt=\"Our team in 2022 has grown to 20 people!\"/><p>Our company has been founded in 1999, just before Y2K.</p>",
  "footer": "<span style=\"font-size:8pt\">Call us at +1 (123) 456-789</span>"
}

Now - this will be easily rendered in a web browser, but what about a watch? Or what if you would like to send the company history information to a mobile phone in a text message? You will have to strip all the HTML, possibly removing some important information (like the contents of the alt attribute in the example above). Actually, you won’t even be able to reuse the information about company history on another page of your website - you would have to copy the entire page and only then start making adjustments. You will end up with a similar situation when using visual website builders.

Headless visual pattern

A sweet spot can be found between the 2 models above. A way to keep both - the editors wanting some flexibility and influence on the presentation layer and orthodox headless purists - happy. Let’s consider a specific example of a website selling tea. The basic data type, in this case, would be:

product

id: number
name: text
description: text
kind: {green, black}
price: number
image: url

order

id: number
date: date
customerAddress: text
orderedProductId: number
quantity: number
totalPaid: number
shipmentStatus: text

and providing this to content editors via a Headless CMS will allow them to easily add and update products and track orders. A very simple product detail page might look similar to the following (the code examples below are incomplete but are inspired by Next.js components):

export default function Product({ product }) {
  return (
    <div style="background-color: green">
      <h1>{product.name}</h1>
      <img src="{product.image}"/>
      <span><b>Price</b>{product.price}</span>
      <button>Buy</button>
    </div>
  )
}

That’s really straightforward. But will a content editor happily clone a Git repo, open up an IDE and change the background color of this page? Nope. So can we do anything about it?

Defining the architecture

In some cases, this might be an iterative process, but it usually starts with a simple question - what do you expect to update on the site, and how frequently will you do it? Based on the answers to these questions, you will end up creating more or less complex content architecture. To address the situation in the example above - one might include in their content model (on top of the product and order content types) a productCard the model defined like this:

productCard

id: number
productId: number
cardBackground: text
and the component would instantly become:

export default function Product({ product, productCard }) {
  return (
    <div style="background-color: {productCard.cardBackground}">
      <h1>{product.name}</h1>
      <img src="{product.image}"/>
      <span><b>Price</b>{product.price}</span>
      <button>Buy</button>
    </div>
  )
}

This mix of content types originating from the raw data model and ones more related to the visual representation is really powerful if you think about it. Let’s consider that on our website, we also have a number of informational pages which describe the process of growing tea, packaging it and brewing it. Our UI designer created a modern minimalistic design based on 2 kinds of sections:

Content in these sections is text and a related image, but we already know there will be situations when the editors might want to visually emphasise some of these descriptions. How could we organize this in a headless CMS? Let’s look at an example:

order

id: number
name: text
variant: {leftTextRightImage, leftImageRightText}
heading: text
content: text
image: URL
backgroundColor: text

page

id: number
URL: text
title: text
content: array of linked section objects. In the section content type we’ve identified several important patterns:

a) sections can have the image on either side but otherwise are the same,

b) background color should be changeable by the editors,

c) heading text should be split from the rest to simplify the presentation.

For the page content - we chose to compose the content of links to existing section objects (Flotiq supports relations/linking between objects of different content types). This way, sections can be used on different pages, and editors can even decide what goes on which page and in what order.

export default function Section({ props } ) {
  return (
    <div style="background-color:{props.backgroundColor}; display:flex">
      <div style="order: {props.variant == "leftTextRighImage" ? 1 : 2}">
        <h1>{props.heading}</h1>
        <span>{props.content}</span>
      </div>
      <div style="order: {props.variant == "leftTextRighImage" ? 2 : 1}">
        <img src="{props.image}"/>
      </div>
    </div>
  )
}
 export default function Page({ page }) {
  return (
    {page.sections.map((section) => (
        <Section section={section}/>
      ))}
  )
}

Data in Flotiq

The example above can be implemented in Flotiq very quickly. Here are our content type definitions first.

Section

Objects

Once the CTDS are in place, we can start creating content. Here’s an example section:

and a page could be like this:

Summary

The main selling point of headless CMS systems is the separation of data and the description of its presentation. Unfortunately, this split can hurt the authoring flow and create bottlenecks for the development team. At the same time - focusing on the presentation side can result in a data model that makes content reuse almost impossible. Fortunately, following the headless visual pattern, we are able to logically structure our content, map it onto code (i.e. React components) and equip content editors with tools to influence the presentation layer without making code changes.

Top 10 Benefits of creating portfolio with Flotiq headless CMS in 2023

likayeltsova — Wed, 01 Feb 2023 08:14:00 +0000

Creating a portfolio can be a valuable tool for anyone looking to advance their career or establish themselves as a professional in their field. With the help of headless CMS like Flotiq, creating and maintaining an online portfolio can be done efficiently and effectively.

Creating a portfolio online with a headless CMS can be easy and important. We want to provide you with several benefits of creating an online portfolio with Flotiq headless CMS and having a portfolio overall.

Flexibility: With a headless CMS, the content and presentation are decoupled, which means that you can easily change how your portfolio looks without affecting the content. You can also use different frontend frameworks or platforms to display your portfolio. Remember to check our starters for Gatbys and NextJS framework.
Scalability: Flotiq headless CMS allows for easy scalability, as it does not rely on a specific presentation layer. As your portfolio grows, you can easily add new features or functionalities without affecting the existing content.
Simplicity: Flotiq headless CMS provides a simple and user-friendly interface for managing your portfolio's content. It also comes with a wide range of pre-built templates and tools that make it easy to create, update and organize your portfolio. We are working on creating a new interface. Check the progress on our roadmap.
Security: Flotiq has built-in security features that allow you to control access to your content, ensuring that your portfolio's data remains safe and secure.
Cross-platform compatibility: Headless CMS is built to be platform-agnostic, so you can easily share your portfolio across different platforms and devices.
Speed and Performance: Flotiq headless CMS allows you to serve your content quickly and efficiently, as you can host your frontend and backend separately on different servers.
Networking: An online portfolio can help you to connect with other professionals in your field and expand your network, which can lead to new opportunities and collaborations.
Credibility: An online portfolio can help establish credibility and trustworthiness by visually representing your work and the results you have achieved.
Showcasing your skills: An online portfolio allows you to showcase your skills and qualifications clearly, concisely and effectively, which can be a powerful tool for differentiating you from other candidates for a job or clients for service.
Keeping your work up-to-date: An online portfolio allows you to easily update and add new projects to your portfolio, keeping it current and showcasing your most recent work.
Using Flotiq headless CMS for creating your portfolio can provide you with a flexible, scalable, and easy-to-use platform for managing your content, saving you time and effort in the long run.

While creating a portfolio with Flotiq headless CMS, you can use Next.js integration by providing an API that you can use to fetch your content from Flotiq and display it on your website or use Gatsby by providing a source plugin that you can use to fetch your content from Flotiq.

So here are simple steps on how to create an online portfolio with Flotiq headless CMS:

Sign up for a Flotiq account and create a new project.
You can use one of our starters created for the portfolio use cases, or you can define the content models for your portfolio. Our starters were created with content models for different types of content, such as projects, client testimonials, and personal information.
Add your content to Flotiq. You can add content to your portfolio by creating new content entries in the Flotiq interface.
Customize the design and layout of your portfolio, or use one of our starters.
Publish your portfolio. Once you have completed the steps above, you can publish your portfolio to a hosting platform of your choice.
In Flotiq, we have detailed documentation and tutorials to help you create your portfolio, including information on how to customize your content models, retrieve content from the API and customize the look of your portfolio.
Additionally, Flotiq provides a pre-built starter and set of blocks that allow you to create a portfolio easily and quickly.

Remember, having an online portfolio can be an essential tool for any professional looking to advance their career or grow their business. Using Flotiq headless CMS, creating and maintaining an online portfolio becomes an easy task that can be done efficiently and effectively.

Why build an ecommerce store with Flotiq Headless CMS

likayeltsova — Wed, 01 Feb 2023 07:57:56 +0000

An e-commerce store built with Flotiq Headless CMS is a smart choice for businesses looking to increase their online presence and sales. With the ability to reach customers anywhere with an internet connection, you have the opportunity to expand your customer base beyond traditional physical locations. The convenience of shopping at any time, even outside of regular business hours, makes it easier for customers to make purchases, boosting your chances of making a sale. Choose Flotiq for a fast, secure, and scalable solution to your e-commerce needs

Creating an online store allows businesses to reach a wider audience, as customers can access the store from anywhere with an internet connection. This can help businesses expand their customer base and increase sales. In addition, an online store can be accessible to customers 24 hours a day, 7 days a week, this can increase the chances of making a sale, as customers can shop at their own convenience, even outside of regular business hours.

Advantages of Building an Online Store with a Headless CMS

Online stores can also be relatively cost-effective to set up and operate, as they do not require the expenses associated with maintaining a physical storefront. Personalization options, such as product recommendations based on browsing history and more detailed information about products, can also be offered. Furthermore, an online store can be a powerful tool for marketing, as it allows the use of various online marketing channels, such as email campaigns, social media, and SEO.

Building an online store with a headless CMS can vary in terms of ease, depending on the specific CMS being used and the level of technical expertise of the person building the store.

Flotiq as a Headless CMS for E-commerce

Flotiq, as a headless CMS, provides an intuitive and user-friendly interface for creating and managing content models, which makes it relatively easy for non-technical users to set up an online store. Additionally, it offers pre-built e-commerce integrations with popular e-commerce platforms, which can speed up the process of building an online store.

However, building the frontend of an online store can require some technical expertise, as it will involve using programming languages and frameworks to create the design and user interface of the store. This can be more challenging for those without prior experience in web development.

In general, building an online store with a headless CMS such as Flotiq can be relatively easy for those with some technical knowledge, as it offers a user-friendly interface for managing content and integrations with popular e-commerce platforms. However, building the frontend of the online store may require more technical expertise.

Building an ecommerce store with Flotiq headless CMS allows for greater flexibility and scalability in managing and displaying product information. As a headless CMS, Flotiq allows for easy integration with a variety of ecommerce platforms, and offers a user-friendly interface for managing and organizing product data. Additionally, using a headless CMS allows for more efficient and effective use of resources, as the frontend and backend can be developed and managed separately. Overall, using Flotiq as the CMS for an ecommerce store can provide benefits such as increased efficiency, flexibility and scalability in managing and displaying product information.

There are several benefits of having an online store built with a headless CMS

Flexibility: A headless CMS allows for greater flexibility in terms of the frontend technology used to display product information, as the backend and frontend can be decoupled. This means that the online store can be built using any frontend technology, such as React, Vue, or Angular.
Scalability: A headless CMS allows for easy scalability, as the frontend and backend can be developed and managed separately. This means that the online store can be easily scaled to accommodate a larger volume of products or a larger number of users.
Improved performance: A headless CMS allows for more efficient use of resources, as the frontend and backend can be developed and managed separately. This means that the online store can be optimized for performance and can load faster for users.
Better User Experience: With the decoupling of frontend and backend, the frontend developers can have more control over the design and user experience of the online store, leading to a more seamless and enjoyable experience for the users.

Steps to Build an Online Store with Flotiq Headless CMS

To build an online store with Flotiq headless CMS, you can follow these general steps:

Sign up for an account on Flotiq and create a new project for your online store.
Define the content models for your online store, such as products, categories, and orders. You can use Flotiq's product starters and save time by customizing them and not creating them from scratch.
Add your product data to Flotiq using the content models you have defined. You can do this by manually creating new content or by importing data from a CSV file.
Create a frontend for your online store if you decide to start from zero, or leave it for us, we have Gatbsy and NextJS simple and professional starters.
Use Flotiq's API to retrieve the product data from the CMS and display it on the frontend of your online store. You can also use the API to handle order and checkout functionality.
Test your online store and make any necessary adjustments. Once you are satisfied with the final product, launch your online store. You can use one of our YouTube tutorial with detailed instruction:

New update on Flotiq and Gatsby Starters

likayeltsova — Wed, 04 Jan 2023 11:41:57 +0000

You can use Flotiq to manage and update your content and use Gatsby to build and serve your website or app. This separation of concerns can make managing and maintaining your website or app easier over time. Check our new updated starters to version 5 of Gatbsy.

Flotiq is a headless content management system that allows developers to easily create, manage, and publish content using a simple and flexible API. Flotiq is designed to be easy to use and integrate with a variety of frameworks and tools, including static site generators like Gatsby. With Flotiq, you can create custom content models and fields and use the Flotiq API to access and manage your content. Flotiq also includes features like version history, user roles and permissions, and integrations with popular tools.

Gatsby version 5 was released in November 2022, and it includes a number of new features and improvements, including:

Gatsby amplified the speed of Incremental Builds and Incremental Deploys by introducing the Slice API.
Partial Hydration (Beta)
Script Component For more detailed updates you can read on their blog.

In Flotiq, we provide a number of starter templates and examples that you can use to quickly get started with Gatsby and Flotiq. Here are a few examples.

With the new version of Gatsby, we also updated our starters, so you can enjoy new features and improve your products with Flotiq.

Our starters include a pre-configured Gatsby project with the:
gatsby-source-flotiq
plugin installed and configured. You can use all four starters to quickly set up a blog, store, and portfolio website with Gatsby and Flotiq, with support for categories, tags, and featured images. You can find more information and the source code for many starters at our GitHub profile.

I hope this information was helpful! If you have any specific questions about using our starters or if you need further assistance, please don't hesitate to ask. We are here to help.

Flotiq Data Migrator

likayeltsova — Mon, 12 Dec 2022 08:41:01 +0000

Lately, we have shared a few of our new Flotiq features that allow you to work more efficiently and improve your products.
Let's talk in more detail about this one. This is a Data migrator from Contentful to Flotiq.

If you have a Contentful account, you could try to use Flotiq without a painless migration. To check how your Contentful data looks like in Flotiq, use the flotiq contenful-import command
https://github.com/flotiq/flotiq-cli/pull/55

A new feature that allows for data migration from Contentful space to Flotiq.
It imports three types of data: content types, assets and content objects.

The results of migration are displayed in three different tables. Each displays the import's total success and error counts and detailed information about the errors in the Warningsection.

Flotiq Data migrator allows you to try new headless CMS and check all its benefits.

Let us know if you have more questions at hello@flotiq.com

Join our discord community - https://discord.gg/pYC9NPyS
Leave your feature requests in our roadmap - https://flotiq.productlift.dev/t/roadmap

🌟 Let's simplify content reuse together.

Working with Content Objects in Flotiq headless CMS

likayeltsova — Mon, 14 Nov 2022 15:53:00 +0000

Updating content through the API

There are two ways to update the content of an object:
PUT: When updating the object (PUT requests), all properties must be present in the request body, as the object data are replaced with the request body. The id property inside the object is ignored in PUT requests. Validation of update request works the same as in saving requests.
PATCH: When updating an object (a PATCH request), it is not necessary to specify all the properties of the object. The id property inside the object is ignored in PATCH requests. Validating the update request works the same as it does when saving requests.

Note
You will need to use your Application Read and write API KEY to perform this action or User API KEY scoped to accept update on the Content Type you wish to update. Read more about API keys and scoped API keys.

Updating Content Objects through the API

For a Content-Type defined according to the create Content Type example, a very simple PUT the payload can be sent to the supporting endpoint https://api.flotiq.com/api/v1/content/{name}/{id} to update Content Object:

  "title": "Object with changed title",
  "postContent": "This will be the new <b>content</b>"
}

name is the name of the content type definition
id is the ID of the object to update

Example
CURL

curl --location --request PUT 'https://api.flotiq.com/api/v1/content/blogposts/blogposts-456712' \
--header 'X-AUTH-TOKEN: YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--header 'Accept: */*' \
--data-raw '{
    "title": "Object with changed title",
    "postContent": "This will be the new <b>content</b>"
}'

Responses
200 OK
Returned when data has been correct, and the object was saved

    "id": "blogposts-456712",
    "internal": {
        "contentType": "blogposts",
        "createdAt": "2021-04-09T13:30:48+00:00",
        "updatedAt": "2021-04-09T13:30:48+00:00",
        "deletedAt": ""
    },
    "title": "Object with changed title",
    "postContent": "This will be the new <b>content</b>"
}

Possible validation errors
Possible validation errors are the same as in creating Content Object; you can find the list here.

Batch update Content Objects through API

Updating up to 100 objects at once is described here, as batch creating and updating are done on the same API endpoint.

Flotiq GraphQL

likayeltsova — Wed, 26 Oct 2022 06:11:53 +0000

The Flotiq API supports a GraphQL queries. It is an alternative way to REST API to get your data. We provide the complete, always up-to-date GraphQL description of your data and the endpoint which understands GraphQL queries for your Content Objects.

What is a GraphQL?

GraphQL is a query language for APIs. It is designed to make API more flexible than REST API - it is all about giving clients precisely the data they request. The developers can pull various data, in the desired shape, with a single API call.

Graphql in Flotiq

The system supports GraphQL queries for Content Objects. Endpoints that allow you to interact with the system in a GraphqQL way are:

GET /api/graphql/schema - get GraphQL schema,
POST /api/graphql - execute GraphQL query.

Authentication

To authenticate the GraphQL query, you need to use one of the Application API Keys available in your Flotiq Dashboard.

As in the whole Flotiq API, you can pass your API Key in the following way:

X-AUTH-TOKEN header
auth_token query parameter

Note
If you need more information on how to get your API Key and how to use it - go to the API access & scoped keys page.

GraphQL API endpoints are unavailable for the User Defined (scoped) API keys.

Get GraphQL Schema

To get the full GraphQL schema that describes your data you have to call the GET endpoint. It describes the shape of your current Content Type Definitions, including attribute types, required fields and relations.

Request

curl -X GET 'https://api.flotiq.com/api/graphql/schema' --header 'X-AUTH-TOKEN: YOUR_API_TOKEN'

Responses

200 OK

Returned when the request was correctly formatted

type Query {
    category(id: String!): category
    categoryList(page: Int, limit: Int, order_by: String, order_direction: String, filter: String): [category]
    product(id: String!): product
    productList(page: Int, limit: Int, order_by: String, order_direction: String, filter: String): [product]
    _media(id: String!): _media
    _mediaList(page: Int, limit: Int, order_by: String, order_direction: String, filter: String): [_media]
}

"""Auto generated Headless CMS type: _media"""
type _media {
    id: String
    url: String
    size: Float
    type: String
    width: Float
    height: Float
    source: String
    fileName: String
    mimeType: String
    extension: String
    externalId: String
}

"""Auto generated Headless CMS type: category"""
type category {
    id: String
    name: String
    description: String
}

"""Auto generated Headless CMS type: product"""
type product {
    id: String
    name: String
    slug: String
    price: Float
    categories: [category]
    description: String
    productImage: [_media]
    productGallery: [_media]
}

Execute GraphQL Query

To make a query for your objects, you need to call POST /api/graphql GraphQL endpoint. We can specify two types of queries - responsible for retrieving a single object and listing objects.

Query single object

To a get single object, you need to pass the object identifier and fields you want to receive in the response. Example Query in GraphQL language to get id and title for the product with id product-1 looks like:

Graphql

query {
    products(id:"product-1") {
        id
        title
    }
}

To pass this query to the Flotiq, you need to call:

Request

curl -X POST 'https://api.flotiq.com/api/graphql' \
    --header 'X-AUTH-TOKEN: YOUR_API_TOKEN' \
    --header 'Content-Type: application/json' \
    --data-raw '{"query":"query{products(id:\"product-1\"){id,title,}}"}'
Response

200 OK

{
    "data": {
        "products": {
            "id": "product-1",
            "title": "Green Tea"
        }
    }
}

List objects
While listing objects, you can use the optional parameters page, limit,order_by, order_direction, or filter.

Graphql

query {
    productsList(limit: 2, order_by: "title", order_direction: "asc") {
        id
        title
    }
}

To pass this query to the Flotiq, you need to call:

Request

curl -X POST 'https://api.flotiq.com/api/graphql' \
    --header 'X-AUTH-TOKEN: YOUR_API_TOKEN' \
    --header 'Content-Type: application/json' \
    --data-raw '{"query":"query {productsList(limit: 2, order_by: \"title\", order_direction: \"desc\") {id, title}}"}'

Response
200 OK

{
  "data": {
    "productsList": [
      {
        "id": "product-3",
        "title": "Rooibos"
      },
      {
        "id": "product-2",
        "title": "Earl Grey"
      }
    ]
  }
}

Relation resolving (hydration)

GraphQLs flexibility also covers object relations (e.g. product has category). In Flotiq, the related objects are resolved automatically based on the type of DataSource.

For example, when we have a product object:

{
   "id":"product-1",
   "categories":[
      {
         "dataUrl":"/api/v1/content/categories/",
         "type":"internal"
      }
   ]
}

and category:

{
   "id": "category-1",
   "name": "Tea"
}

The GraphQL query for listing objects including categories will look like:

Graphql

query {
    productsList(limit: 1) {
        id
        title
        categories {
            id
            name
        }
    }   
}

Request

curl --request POST \
    --url 'https://api.flotiq.com/api/graphql?auth_token=__YOUR_AUTH_TOKEN__' \
    --header 'content-type: application/json' \
    --data '{"query":"query{productsList(limit:1){id,title,categories{id,name}}}"}'

Response
200 OK
Will return automatically resolved relation:

{
    "data": {
        "productsList": [
            {
                "id": "product-3",
                "title": "Rooibos",
                "categories": [
                    {
                        "id": "category-1",
                        "name": "Tea"
                    }
                ]
            }
        ]
    }
}

As you can see, the related element, category, was fetched, including its properties.

Explore using Insomnia client

GraphQL queries can be complex. To efficiently interact with Flotiq GraphQL API, we suggest you use apps like Insomnia. It helps to create queries with autocomplete, based on your current schema, validate your input and display a preview of the response.

An example query using Insomnia REST Client with endpoint https://api.flotiq.com/api/graphql?auth_token=YOUR_AUTH_TOKEN:

Flotiq SDK NodeJS

likayeltsova — Wed, 12 Oct 2022 07:48:48 +0000

SDK NodeJS

Download a package

On your Flotiq dashboard, you can find link to download client library SDK NodeJS.

These package is automatically generated every time you modify your Content Type definitions, just like your API documentation.

1. Installation

To use SDK in your project follow below steps:

Unzip and move this package to [projectDirectory]/flotiq-javascript-sdk/
In your [projectDirectory]/flotiq-javascript-sdk/ run npm i && npm run build
In your [projectDirectory] run npm i ./flotiq-javascript-sdk --save Other installation methods are described in #Additional usage methods section.

2. Configure your SDK

To initialize SDK we will use FlotiqUserApi.ApiClient.init method, which requires to provide the API_KEY value.

Your Flotiq API_KEY is located in the Flotiq Dashboard. If you need more directions go to the docs.

const FlotiqUserApi = require("flotiq_user_api");
FlotiqUserApi.ApiClient.init("API_KEY");

3. Make requests to the Flotiq

let api = new FlotiqUserApi.ContentBlogAuthorApi();
let opts = {
  page: "1", // {Number} Listing page number, 1-based
  limit: "20", // {Number} Page limit
  orderBy: "internal.updatedAt", // {String} Order by field
  orderDirection: "asc", // {String} Order direction
  hydrate: "0", // {Number} Should hydrate relations of object, for now only one level of hydration is possible
  filters:
    '{"slug":{"type":"contains","filter":"test"},"title":{"type":"contains","filter":"test"}}', // {String} List filters
  ids: '["null"]', // {[String]} Ids of objects to return.
};
api.listFlotiqblogauthor(opts).then(
  function (data) {
    console.log("API called successfully. Returned data: " + data);
  },
  function (error) {
    console.error(error);
  }
);

4. SDK NodeJS common use cases

The Main concept of Flotiq is that your API Specification represents your set of content definitions literally.

Can be used:

SearchApi: The Flotiq API provides a powerful search engine, which is a wrapper for ElasticSearch queries.
MediaApi: Endpoint for upload or get media files.
InternalApi: Returns, delete or create an user-defined Content Definitions
GraphQlApi: Endpoint for GraphQL Queries for Headless Types
Content...Api: Endpoints for automatically generated Content Type definitions

Additional usage methods

Local development

You can also use this package as local dependency. To use the library locally without publishing to a remote npm registry or committing to the repository, first install the dependencies by changing into the directory containing package.json (and this README). Let's call this JAVASCRIPT_CLIENT_DIR. Then run:

npm install

Next, link it globally in npm with the following, also from JAVASCRIPT_CLIENT_DIR:

npm link

To use the link you just defined in your project, switch to the directory you want to use your flotiq_user_api from, and run:

npm link /path/to/<JAVASCRIPT_CLIENT_DIR>

Finally, you need to build the module:

npm run build

Flotiq Updates

likayeltsova — Tue, 04 Oct 2022 13:30:04 +0000

Over the last few weeks, we have been working on a few updates to the user experience in Flotiq.

So check what we prepared for you :)

User guide onboarding on the dashboard

You can be guided on the Fltoiq dashboard, and in case of any questions, you can always get back to us with the help button on the bottom right corner.

Media library

We are trying to improve your experience with Flotiq Media Library, so here are some of the updates:

Media library - add, edit, remove media tag
Media library - filter by tag
Media library - multiple select and delete

An option to buy an extra plan File Quota on the Plan&Usage page

This is only part of the changes we are working on. Stay tuned to see more updates!

And let us know what you think at hello@flotiq.com
We will be happy to get feedback from you.
✨ Let's simplify content reuse together!