Autres API GraphQL et backends¶

Utilisez Strapi, Directus, Supabase, Squidex ou toute API GraphQL comme CMS pour Silex.

Aperçu¶

Silex se connecte à n'importe quelle API GraphQL. Bien que WordPress soit le CMS principal, vous pouvez utiliser :

Strapi — CMS headless (open source)
Directus — Interface de gestion de base de données (open source)
Supabase — PostgreSQL avec API auto-générée (open source)
Squidex — CMS headless (open source et hébergé)
Contentful — CMS headless hébergé
Shopify — Plateforme e-commerce
GraphQL personnalisé — Toute API GraphQL

Cette page couvre la configuration des options populaires et comment les adapter pour d'autres.

Prérequis¶

Endpoint d'API GraphQL (avec accès HTTP)
Compréhension de la configuration WordPress (les concepts s'appliquent à tous)
Instance Silex avec le CMS activé

Strapi¶

Strapi est un CMS headless auto-hébergé ou hébergé avec support GraphQL.

Installation¶

Auto-hébergé :

npm install -g @strapi/cli
strapi new my-strapi-api --quickstart
cd my-strapi-api
npm run develop

Hébergé :

Allez sur Strapi Cloud et créez un projet.

Créer des types de contenu¶

Dans l'administration Strapi (http://localhost:1337/admin) :

Allez dans Content Type Builder
Cliquez sur Create new single type ou Create new collection type
Ajoutez des champs :
title (Text)
slug (UID, lié au titre)
description (Rich text)
featuredImage (Media)
Enregistrez

Exemple : Type article de blog :

BlogPost (collection type)
├── title (String, required)
├── slug (UID, linked to title)
├── content (Rich text)
├── description (String, 160 chars)
├── featuredImage (Media, single media)
└── author (Relation to Author type)

Activer GraphQL¶

Installez le plugin GraphQL :

Allez dans Plugins
Recherchez GraphQL
Installez et activez

Accédez à GraphQL à : http://localhost:1337/graphql

Requêter les données¶

query GetBlogPosts {
  blogPosts {
    data {
      id
      attributes {
        title
        slug
        description
        content
        featuredImage {
          data {
            attributes {
              url
            }
          }
        }
        author {
          data {
            attributes {
              name
            }
          }
        }
      }
    }
  }
}

Configurer dans Silex¶

Dans les paramètres Silex :

config.cmsConfig.dataSources = [
  {
    id: 'strapi',
    type: 'graphql',
    url: 'https://my-strapi.example.com/graphql',
    backend: 'strapi', // or use 'generic'
  },
]

Directus¶

Directus fournit une interface de base de données et une API auto-générée.

Installation¶

Auto-hébergé :

npm install -g @directus/cli
directus bootstrap
directus start

Hébergé :

Allez sur Directus Cloud et créez un projet.

Créer des collections¶

Dans l'administration Directus (http://localhost:8055) :

Allez dans Data Model
Cliquez sur Create Collection
Nom : blog_posts
Ajoutez des champs :
id (auto)
title (String)
slug (String, Slug from title)
content (Text)
featured_image (Image)
Enregistrez

Activer GraphQL¶

GraphQL est activé par défaut. Accédez à : http://localhost:8055/graphql

Requêter les données¶

query GetBlogPosts {
  blog_posts {
    id
    title
    slug
    content
    featured_image {
      id
      filename_disk
      filename_download
    }
  }
}

Configurer dans Silex¶

config.cmsConfig.dataSources = [
  {
    id: 'directus',
    type: 'graphql',
    url: 'https://my-directus.example.com/graphql',
    backend: 'directus', // or 'generic'
  },
]

Supabase¶

Supabase est PostgreSQL avec des API auto-générées (REST et GraphQL).

Installation¶

Allez sur supabase.com
Créez un nouveau projet
Configurez la base de données PostgreSQL

Créer des tables¶

Dans l'éditeur SQL de Supabase :

CREATE TABLE blog_posts (
  id BIGINT PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
  title TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  content TEXT,
  excerpt TEXT,
  featured_image_url TEXT,
  author_name TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE authors (
  id BIGINT PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
  name TEXT NOT NULL,
  bio TEXT,
  avatar_url TEXT
);

ALTER TABLE blog_posts ADD COLUMN author_id BIGINT REFERENCES authors(id);

Activer GraphQL¶

GraphQL est disponible à : https://YOUR_PROJECT.supabase.co/graphql/v1

Requêter les données¶

query GetBlogPosts {
  blog_postsCollection(first: 10) {
    edges {
      node {
        id
        title
        slug
        content
        excerpt
        featuredImageUrl
        author {
          name
          bio
        }
      }
    }
  }
}

Configurer dans Silex¶

Ajoutez un en-tête avec votre clé API Supabase :

config.cmsConfig.dataSources = [
  {
    id: 'supabase',
    type: 'graphql',
    url: 'https://YOUR_PROJECT.supabase.co/graphql/v1',
    headers: {
      'apikey': process.env.SUPABASE_API_KEY,
      'Authorization': `Bearer ${process.env.SUPABASE_API_KEY}`,
    },
  },
]

Squidex¶

Squidex est un CMS headless auto-hébergé ou géré avec GraphQL.

Installation¶

Géré (le plus simple) :

Allez sur squidex.io et créez un compte.

Auto-hébergé :

docker-compose up -d squidex
# Access at http://localhost:80

Créer un schéma¶

Dans l'administration Squidex :

Créez une nouvelle application
Allez dans Schemas
Créez un schéma : blog-post
Ajoutez des champs :
title (String)
slug (String)
content (Text)
featuredImage (Assets)
Publiez

Requêter via GraphQL¶

query GetBlogPosts {
  queryBlogPostsContents(first: 10) {
    items {
      id
      data {
        title
        slug
        content
        featuredImage {
          assetUrl
          assetId
        }
      }
    }
  }
}

Configurer dans Silex¶

config.cmsConfig.dataSources = [
  {
    id: 'squidex',
    type: 'graphql',
    url: 'https://YOUR_INSTANCE.squidex.io/api/graphql',
    backend: 'squidex', // or 'generic'
  },
]

KeystoneJS¶

KeystoneJS est un CMS headless Node.js avec GraphQL intégré. Après la configuration, le endpoint GraphQL est généralement à http://localhost:3000/api/graphql. Utilisez le type de backend generic dans les paramètres de la source de données.

GetCockpit¶

Cockpit est un CMS headless auto-hébergé. Activez l'addon GraphQL et trouvez le endpoint à /api/graphql. Utilisez le type de backend generic.

Sanity¶

Sanity fournit une API GraphQL hébergée. Déployez une API GraphQL depuis votre projet Sanity, puis utilisez l'URL du endpoint. Utilisez le type de backend generic. Note : l'API par défaut de Sanity est basée sur GROQ -- vous devez explicitement déployer le endpoint GraphQL.

Saleor¶

Saleor est une plateforme e-commerce open source avec une API GraphQL. Le endpoint est généralement à /graphql/. Utilisez le type de backend generic.

Prismic¶

Prismic propose une API GraphQL à https://your-repo.prismic.io/graphql. Ajoutez votre token d'accès comme en-tête Authorization. Utilisez le type de backend generic.

Nhost¶

Nhost fournit une API GraphQL basée sur Hasura. Trouvez votre endpoint dans le tableau de bord Nhost sous GraphQL. Utilisez le type de backend generic.

Hashnode¶

Hashnode expose une API GraphQL publique à https://gql.hashnode.com. Aucune authentification nécessaire pour le contenu public. Utilisez le type de backend generic.

Hygraph (non compatible)¶

Attention : Hygraph (anciennement GraphCMS) présente des problèmes de compatibilité connus avec Silex en raison de la structure de son schéma GraphQL. Il n'est actuellement pas pris en charge.

Utiliser GraphQL Mesh pour les API REST¶

Si votre backend ne dispose que d'une API REST (pas de GraphQL), utilisez GraphQL Mesh pour créer une couche GraphQL.

Exemple : Ajouter GraphQL à une API REST¶

Créez une configuration mesh :

# .meshrc.yaml
sources:
  - name: MyRestAPI
    handler:
      openapi:
        source: https://api.example.com/openapi.json

# Or for any REST API:
  - name: MyApi
    handler:
      rest:
        endpoint: https://api.example.com
        operations:
          - type: Query
            field: posts
            path: /posts
            method: GET
          - type: Query
            field: post
            path: /posts/{id}
            method: GET
            argTypeMap:
              id: String

Puis exposez via GraphQL :

npx graphql-mesh serve

Accédez à : http://localhost:4000/graphql

Authentification et en-têtes¶

Certaines API nécessitent une authentification. Configurez dans la configuration client :

config.cmsConfig.dataSources = [
  {
    id: 'my-api',
    type: 'graphql',
    url: 'https://api.example.com/graphql',
    headers: {
      'Authorization': `Bearer ${process.env.API_KEY}`,
      'X-Custom-Header': 'value',
    },
  },
]

Ou utilisez l'authentification intégrée de Silex (varie selon le backend).

Comparaison des backends¶

Backend	Type	GraphQL	Open source	Tarification	Facilité
WordPress	Relationnel	Via plugin	Oui	Gratuit	Moyen
Strapi	CMS headless	Natif	Oui	Gratuit/payant	Moyen
Directus	Interface BDD	Natif	Oui	Gratuit/payant	Facile
Supabase	PostgreSQL + API	Natif	Oui	Gratuit/payant	Facile
Squidex	CMS headless	Natif	Oui	Gratuit/payant	Moyen
Contentful	CMS hébergé	Natif	Non	Payant	Facile
Shopify	E-commerce	Natif	Non	Payant	Moyen

Considérations sur la forme des données¶

Différents backends retournent des données sous différentes formes. Normalisez les requêtes pour plus de cohérence :

WordPress¶

{
  blogPosts {
    edges {
      node { id title }
    }
  }
}

Strapi¶

{
  blogPosts {
    data {
      id
      attributes { title }
    }
  }
}

Directus¶

{
  blog_posts {
    id
    title
  }
}

Utilisez des alias pour normaliser :

query {
  posts: blogPosts {
    edges {
      node { id title }
    }
  }
}

Patrons courants¶

Pagination¶

Tous les backends supportent la pagination. Patrons courants :

# Offset-based (WordPress, Directus)
query GetPosts($offset: Int, $limit: Int) {
  posts(offset: $offset, limit: $limit) { ... }
}

# Cursor-based (Strapi, Supabase)
query GetPosts($first: Int, $after: String) {
  posts(first: $first, after: $after) {
    pageInfo { hasNextPage endCursor }
    edges { ... }
  }
}

Filtrage¶

# Filter by field
query GetPostsByAuthor($author: String) {
  posts(filter: { author: { name: $author } }) { ... }
}

Tri¶

query GetLatestPosts {
  posts(sort: "-createdAt") { ... }  # Or sort: [{field: "createdAt", direction: DESC}]
}

Dépannage¶

Le endpoint GraphQL retourne 401 Unauthorized¶

Ajoutez l'authentification :

config.cmsConfig.dataSources = [
  {
    id: 'api',
    type: 'graphql',
    url: 'https://api.example.com/graphql',
    headers: {
      'Authorization': `Bearer ${process.env.API_KEY}`,
    },
  },
]

La requête retourne null ou vide¶

Vérifiez :

Les données existent dans le backend
La syntaxe de la requête est correcte (testez dans GraphiQL)
La logique de filtrage/pagination est correcte

L'introspection est désactivée (impossible de parcourir le schéma)¶

Certaines API désactivent l'introspection pour des raisons de sécurité. Demandez la documentation du schéma au fournisseur ou :

query IntrospectionQuery {
  __schema {
    types {
      name
      fields {
        name
        type { name }
      }
    }
  }
}

Voir aussi¶

Configuration WordPress
Configuration client et plugins — Paramètres CMS de la configuration client
Comment fonctionne le CMS — Concepts CMS pour les designers
Official backend docs — Documentation GraphQL de chaque backend

Éditer cette page sur GitLab