Untitled

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function Sparql() {
  const [result, setResult] = useState([]);

  useEffect(() => {
    // Définissez votre requête SPARQL
    const sparqlQuery = `
      PREFIX ns: <http://www.owl-ontologies.com/ArtGallery.owl#>
      SELECT ?titre ?description ?artiste
      WHERE {
        ?produit rdf:type ns:Produit .
        ?produit ns:titre ?titre .
        ?produit ns:description ?description .
        ?produit ns:artiste_associé ?artiste .
        FILTER (?produit = ns:Mon_Produit)
      }
    `;

    // URL du point de terminaison SPARQL dans Fuseki (corrigez l'URL)
    const sparqlEndpoint = 'http://localhost:3030/ArtGallery/query'; // Supprimez "#/dataset"

    // Envoi de la requête SPARQL au serveur Fuseki
    axios
      .get(sparqlEndpoint, {
        params: {
          query: sparqlQuery,
          format: 'json', // Demandez des résultats au format JSON
        },
      })
      .then((response) => {
        // Analyse de la réponse JSON
        setResult(response.data.results.bindings);
        console.log("Réponse SPARQL :", response.data); // Affiche la réponse complète dans la console
        // Traitez les résultats JSON ici
      })
      .catch((error) => {
        console.error('Erreur lors de la requête SPARQL :', error);
      });
  }, []);

  return (
    <div>
      <h1>Résultat de la requête SPARQL</h1>
      <table>
        <thead>
          <tr>
            <th>Titre</th>
            <th>Description</th>
            <th>Artiste</th>
          </tr>
        </thead>
        <tbody>
          {result.map((row, index) => (
            <tr key={index}>
              <td>{row.titre.value}</td>
              <td>{row.description.value}</td>
              <td>{row.artiste.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Sparql;