Headless CMS for Flask

Hygraph is the ideal Headless CMS for Flask websites and applications. Read further to learn how our API-first CMS allows you to add components to your Flask 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

To query a GraphQL API from a Flask application and then pass the result to a template, you can use the requests library to perform the query within your Flask view function.

In the example on the right, you can see a setup of the route / with a GraphQL query, endpoint, and Hygraph's token defined. Finally, the data is passed to the template products.html.

from flask import Flask, render_template
import requests

app = Flask(__name__)

@app.route('/')
def home():
    query = """
    {
        products {
            name
            description
            image
            availability
            slug
        }
    }
    """

    endpoint = 'https://api-<region>.hygraph.com/v2/<some hash>/master'
    token = 'YOUR_HYGRAPH_TOKEN'
    headers = {'Authorization': 'Bearer ' + token}
    response = requests.post(endpoint, json={'query': query}, headers=headers)

    data = response.json()['data']['products']
    
    return render_template('products.html', products=data)

Step #2 - Work with data in Jinja2

Once the data is obtained, it is passed to a Jinja2 template using the render_template function. Within the template, you can use the Jinja2 templating language to access and display this data.

In the example on the left we loop through a list of products, access their attributes like name, description, and image, and dynamically fill out the HTML structure. Jinja2 templates allow you to use conditional statements and filters to further refine how the data is presented, making it an effective tool for creating dynamic web pages that reflect the latest state of your data as defined by the GraphQL queries.

<!doctype html>
<html lang="en">
<head>
  <!-- ... -->
</head>
<body>
  <h1>Product List</h1>
  <ul>
    {% for product in products %}
      <li>
        <a href="{{ url_for('product', slug=product.slug) }}">
          <h2>{{ product.name }}</h2>
          <p>{{ product.description }}</p>
          <img src={{ product.image }} />
        </a>
      </li>
    {% endfor %}
  </ul>
</body>
</html>

Start building with Flask

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

Quickstart

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

Integrating Flask with a headless CMS streamlines web development by separating the frontend and backend concerns. Developers can modify the user interface without delving into the complex backend logic. A headless CMS simplifies content updates and eliminates direct database management.

Hygraph enhances this by employing GraphQL, allowing precise data queries via an API, a perfect match for Flask's efficient handling of web requests. This combination accelerates data retrieval, facilitating rapid website development. Additionally, Hygraph's user-friendly interface for content updates relieves developers from complex database modifications.

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