Nhost & GraphQL

​

Vue d’ensemble

​

Stack backend

• PostgreSQL — Base de données relationnelle (13 tables)
• Hasura — API GraphQL auto-générée avec permissions par rôle
• Nhost Auth — Authentification email/password avec JWT
• Nhost Storage — Upload et stockage de fichiers (logos, assets)

​

Client Nhost

import { createClient } from '@nhost/nhost-js';

const nhostSubdomain = import.meta.env.VITE_NHOST_SUBDOMAIN || 'gqvlmqwbsmkhlllmgbyw';
const nhostRegion = import.meta.env.VITE_NHOST_REGION || 'eu-central-1';

export const nhost = createClient({
  subdomain: nhostSubdomain,
  region: nhostRegion,
});

• nhost.graphql.request({ query, variables }) — requêtes GraphQL
• nhost.auth.signIn(...) / nhost.auth.signOut() — authentification
• nhost.storage.upload(...) — upload de fichiers

​

Flux de données : GraphQL via Hasura

​

Comment ça fonctionne

1. Le frontend envoie une query/mutation GraphQL via nhost.graphql.request()
2. La requête atteint Hasura (auto-hosted par Nhost)
3. Hasura traduit le GraphQL en SQL optimisé et l’exécute sur PostgreSQL
4. Les permissions Hasura filtrent les résultats selon le rôle (public/user/admin)
5. La réponse remonte au frontend

​

Exemple concret

// Requête GraphQL pour lister les outils
const query = `
  query GetTools {
    tools(order_by: { name: asc }) {
      id
      name
      description
      pricing_tier
      category_id
    }
  }
`;

const result = await nhost.graphql.request({ query });
const tools = result.body?.data?.tools || [];

SELECT id, name, description, pricing_tier, category_id
FROM tools
ORDER BY name ASC
-- + filtrage automatique par les permissions du rôle

​

Permissions Hasura (au lieu de RLS)

​

Rôles

• public — Visiteurs non authentifiés
• user / admin — Utilisateurs authentifiés (JWT Nhost)

​

Règles par domaine

• SELECT : autorisé pour public (tous les visiteurs)
• INSERT / UPDATE / DELETE : autorisé pour admin uniquement

• SELECT public : uniquement status = 'active' ou is_active = true
• SELECT admin : tous les enregistrements (y compris drafts)
• INSERT / UPDATE / DELETE : admin uniquement

• INSERT public : autorisé (soumission de quiz)
• SELECT : admin uniquement (analytics)

​

Configuration dans Hasura Console

1. Ouvrez la console Hasura (accessible via le dashboard Nhost)
2. Allez sur une table → onglet Permissions
3. Définissez les règles par rôle (public, user, admin)
4. Ajoutez des row-level checks si nécessaire (ex: status = 'active')

​

Authentification Nhost

​

Flux d’authentification

​

Implémentation

// Connexion
await nhost.auth.signIn({ email, password });

// Déconnexion
await nhost.auth.signOut();

// Vérifier la session
const session = nhost.auth.getSession();
const isAuthenticated = !!session;

• Stockage du JWT en mémoire
• Refresh automatique du token avant expiration
• Injection du header Authorization: Bearer <token> dans les requêtes GraphQL

​

Nhost Storage

​

Upload de fichiers

import { nhost } from '../api/client';

// Upload d'un logo
const { error, fileMetadata } = await nhost.storage.upload({
  file,
  bucketId: 'default',
});

// Construire l'URL publique
const STORAGE_BASE_URL = `https://${subdomain}.storage.${region}.nhost.run/v1/files`;
const publicUrl = `${STORAGE_BASE_URL}/${fileMetadata.id}`;

​

Validation côté client

const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB

function validateFile(file: File) {
  if (file.size > MAX_FILE_SIZE) throw new Error('Fichier trop volumineux (max 2MB)');
  if (!ALLOWED_IMAGE_TYPES.includes(file.type)) throw new Error('Format non supporté');
}

​

Variables d’environnement

# .env
VITE_NHOST_SUBDOMAIN=your_subdomain    # Ex: gqvlmqwbsmkhlllmgbyw
VITE_NHOST_REGION=eu-central-1         # Région Nhost

​

URLs Nhost générées

• GraphQL : https://{subdomain}.hasura.{region}.nhost.run/v1/graphql
• Auth : https://{subdomain}.auth.{region}.nhost.run/v1
• Storage : https://{subdomain}.storage.{region}.nhost.run/v1

​

Ressources