Headless CMS for Symfony

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

Step #1 - Create a service to fetch the data

The GraphQLClient service in Symfony uses Guzzle, a PHP HTTP client, to send requests to a GraphQL endpoint. Constructed with the endpoint URL and an authorization token, it prepares a header for secure communication. When fetchData is invoked with a GraphQL query, it executes a POST request with the query and includes the authorization header.

The service then decodes the JSON response into a PHP array, making the GraphQL data readily available for use within the Symfony application.

src/Service/GraphQLClient.php

namespace App\Service;

use GuzzleHttp\Client;

class GraphQLClient
{
    private $client;
    private $authorizationHeader;

    public function __construct(string $endpoint, string $token)
    {
        $this->client = new Client(['base_uri' => $endpoint]);
        $this->authorizationHeader = ['Authorization' => "Bearer {$token}"];
    }

    public function fetchData(string $query): array
    {
        $response = $this->client->post('', [
            'json' => ['query' => $query],
            'headers' => $this->authorizationHeader,
        ]);

        return json_decode($response->getBody()->getContents(), true);
    }
}

Step #2 - Configure the service

In Symfony, services are defined and configured in the services.yaml file. These arguments include the GraphQL endpoint URL and an authorization token, which are defined as parameters.

This setup ensures that when the GraphQLClient service is requested from Symfony's dependency injection container, it's instantiated with these predefined values, ready to be used anywhere in the application.

config/services.yaml

services:
    App\Service\GraphQLClient:
        arguments:
            $endpoint: '%env(GRAPHQL_ENDPOINT)%'
            $token: '%env(GRAPHQL_API_TOKEN)%'

Step #3 - Create a controller

In the controller, a method is defined to handle a specific route. When this route is accessed, Symfony's dependency injection container provides the GraphQLClient service to the method. The method then uses the client to perform a GraphQL query and fetch data, which is passed to a Twig template for rendering.

This encapsulates the data retrieval process within a controller action, providing a clear pathway from querying the data to displaying it in the view layer.

src/Controller/ProductController.php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use App\Service\GraphQLClient;

class ProductController extends AbstractController
{
    private $graphqlClient;

    public function __construct(GraphQLClient $graphqlClient)
    {
        $this->graphqlClient = $graphqlClient;
    }

    /**
     * @Route("/products", name="products")
     */
    public function index()
    {
        $query = <<<GRAPHQL
        {
            products {
                name
                description
                slug
                availability
                image
            }
        }
        GRAPHQL;

        $data = $this->graphqlClient->fetchData($query);

        return $this->render('products/index.html.twig', [
            'products' => $data['data']['products'] ?? [],
        ]);
    }
}

Step #4 - Work with data within Twig templates

The Twig template on the left shows how to render the product data within an HTML structure. Using Twig's intuitive syntax, it first checks if the 'product' variable is present. If it is, the template displays the product's details like name, description, and image. It also shows whether the product is available or not.

templates/products/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Products{% endblock %}

{% block body %}
<h1>Products</h1>

<ul>
    {% for product in products %}
        <li>
            <h2>{{ product.name }}</h2>
            <p>{{ product.description }}</p>
            {% if product.availability %}
                <span>Available</span>
            {% else %}
                <span>Not Available</span>
            {% endif %}
            <img src="{{ product.image }}" alt="{{ product.name }}">
        </li>
    {% else %}
        <li>No products found.</li>
    {% endfor %}
</ul>
{% endblock %}

Start building with Symfony

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

Quickstart

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

Using a GraphQL-native headless CMS with Symfony streamlines development and content management. Developers can tailor data queries to their exact needs, reducing load times and resource use. The headless CMS allows for agile content updates without backend intervention, fostering a more efficient development cycle.

Content editors enjoy a user-friendly interface, making it easy to maintain content across multiple platforms with a single update, ensuring consistency and saving time.

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