Headless CMS for Laravel

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

Step #1 - Create a service to handle the interaction with the GraphQL API

In Laravel, to query a GraphQL API, you can use a package like softonic/laravel-graphql-client or any HTTP client like Guzzle to make the HTTP requests. In the example on the right, we are using Guzzle, a PHP HTTP client that makes it easy to send HTTP requests and trivial to integrate with web services. You'll need to install Guzzle via Composer:

composer require guzzlehttp/guzzle

Then you move on to setting up the service.

namespace App\Services;

use GuzzleHttp\Client;

class GraphqlService
{
    protected $client;
    protected $headers;

    public function __construct()
    {
        $this->client = new Client([
            'base_uri' => 'https://api-<region>.hygraph.com/v2/<some hash>/master',
        ]);

        $this->headers = [
            'Authorization' => 'Bearer ' . env('GRAPHQL_API_TOKEN'),
            'Accept'        => 'application/json',
            'Content-Type'  => 'application/json',
        ];
    }

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

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

Step #2 - Inject the service into a controller

In this setup, you have a GraphqlService that handles the actual API calls with the necessary authorization headers, and you have a controller that uses this service to fetch data, which is then passed to a Blade view.

Remember to add proper error handling and response checking to make sure your application can handle issues like network errors or data fetching problems gracefully.

namespace App\Http\Controllers;

use App\Services\GraphqlService;

class ProductController extends Controller
{
    protected $graphqlService;

    public function __construct(GraphqlService $graphqlService)
    {
        $this->graphqlService = $graphqlService;
    }

    public function index()
    {
        $query = <<<GQL
            query {
              products {
                name
                description
                slug
                availability
                imageUrl
              }
            }
            GQL;

        $data = $this->graphqlService->query($query);

        // Pass the data to your Blade view
        return view('products.index', ['products' => $data['data']['products']]);
    }
}

Step #3 - Use the data in Blade views

Once you have retrieved the data from the GraphQL API and passed it to your Blade view, you can iterate over the data and display it using Blade's templating syntax.

In this Blade template, we are extending a layout file (layouts.app), and within the content section, we check if there are products to display. We use a foreach loop to iterate over each product and create a card for it. Blade's {{ }} syntax is used to escape and print the data, such as the product's name, description, and image URL.

resources/views/products/index.blade.php

{{-- resources/views/products/index.blade.php --}}

@extends('layouts.app')

@section('content')
  <div class="container">
    @if (count($products) > 0)
      <div class="row">
        @foreach ($products as $product)
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img class="card-img-top" src="{{ $product['imageUrl'] }}" alt="{{ $product['name'] }}">
              <div class="card-body">
                <h5 class="card-title">{{ $product['name'] }}</h5>
                <p class="card-text">{{ $product['description'] }}</p>
                <div class="d-flex justify-content-between align-items-center">
                  <small class="text-muted">{{ $product['availability'] ? 'Available' : 'Not Available' }}</small>
                  <a href="{{ url('/products/' . $product['slug']) }}" class="btn btn-primary">View Product</a>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    @else
      <p>No products found.</p>
    @endif
  </div>
@endsection

Start building with Laravel

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

Quickstart

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

Using a GraphQL-native headless CMS with Laravel streamlines web development and content management. Developers can make precise data queries with GraphQL, optimizing app performance, while Laravel's ORM elegantly handles the data. The headless CMS's decoupled nature allows for flexible front-end technology choices.

Content editors benefit from user-friendly CMS interfaces, allowing easy content updates without technical complexity. Additionally, the CMS's ability to push content across various platforms ensures a uniform digital presence, enhancing the user experience.

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