API Layer

// Dans un composant React
import { nhost } from '@/api/client';

function ToolsList() {
  useEffect(() => {
    // ❌ Appel GraphQL direct dans le composant
    nhost.graphql.request({ query: '{ tools { id name } }' })
      .then(r => setTools(r.body.data.tools));
  }, []);
}

// Via l'API layer
import { toolsApi } from '@/api';

function ToolsList() {
  useEffect(() => {
    toolsApi.list().then(setTools);
  }, []);
}

src/api/
├── base.ts                 # apiCall, apiCallVoid, ApiError
├── client.ts               # Client Nhost singleton
├── types.ts                # Types partagés
├── index.ts                # Barrel exports
│
├── auth.ts                 # Authentification (Nhost Auth)
├── tools.ts                # CRUD Tools (GraphQL)
├── categories.ts           # CRUD Categories
├── filters.ts              # CRUD Filters/Features
├── workflows.ts            # CRUD Workflows
├── packs.ts                # CRUD Tool Packs
├── quiz/                   # CRUD Quiz (multi-fichiers)
│
└── __tests__/              # Tests API
    ├── tools.spec.ts
    └── ...

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,
});

export class ApiError extends Error {
  constructor(message: string, public code?: string, public details?: unknown) {
    super(message);
    this.name = 'ApiError';
  }
}

// Pour les opérations qui retournent des données
export async function apiCall<T>(
  operation: () => Promise<{ data: T; error: unknown }>,
  operationName: string
): Promise<T> { /* ... */ }

// Pour les mutations sans retour
export async function apiCallVoid(
  operation: () => Promise<{ error: unknown }>,
  operationName: string
): Promise<void> { /* ... */ }

import { apiCall } from './base';
import { nhost } from './client';

async function listTools() {
  const query = `
    query GetTools {
      tools(order_by: { name: asc }) {
        id name description pricing_tier
      }
    }
  `;

  return apiCall(
    () => nhost.graphql.request({ query }).then(r => ({
      data: r.body?.data?.tools || [],
      error: r.error
    })),
    'tools.list'
  );
}

async function createTool(tool: ToolInsert) {
  const mutation = `
    mutation InsertTool($object: tools_insert_input!) {
      insert_tools_one(object: $object) {
        id name
      }
    }
  `;

  return apiCall(
    () => nhost.graphql.request({
      query: mutation,
      variables: { object: tool }
    }).then(r => ({
      data: r.body?.data?.insert_tools_one,
      error: r.error
    })),
    'tools.create'
  );
}

async function updateTool(id: string, updates: Partial<ToolInsert>) {
  const mutation = `
    mutation UpdateTool($id: uuid!, $set: tools_set_input!) {
      update_tools_by_pk(pk_columns: { id: $id }, _set: $set) {
        id name
      }
    }
  `;

  return apiCall(
    () => nhost.graphql.request({
      query: mutation,
      variables: { id, set: updates }
    }).then(r => ({
      data: r.body?.data?.update_tools_by_pk,
      error: r.error
    })),
    'tools.update'
  );
}

async function deleteTool(id: string) {
  const mutation = `
    mutation DeleteTool($id: uuid!) {
      delete_tools_by_pk(id: $id) { id }
    }
  `;

  await apiCallVoid(
    () => nhost.graphql.request({
      query: mutation,
      variables: { id }
    }).then(r => ({ error: r.error })),
    'tools.delete'
  );
}

import { nhost } from './client';

export const authApi = {
  async signIn(email: string, password: string) {
    const result = await nhost.auth.signIn({ email, password });
    if (result.error) throw new ApiError(result.error.message);
    return result.session;
  },

  async signOut() {
    const result = await nhost.auth.signOut();
    if (result.error) throw new ApiError(result.error.message);
  },

  getSession() {
    return nhost.auth.getSession();
  },

  isAuthenticated() {
    return !!nhost.auth.getSession();
  }
};