Les requêtes AJAX (Asynchronous JavaScript and XML) sont couramment utilisées dans le développement web pour récupérer des données du serveur sans recharger la page entière. Dans cet article, nous allons explorer différentes façons d’effectuer des requêtes AJAX avec React en utilisant les bibliothèques fetch, axios et GraphQL.

1. Utilisation de fetch#

La méthode fetch est intégrée au navigateur et permet d’effectuer des requêtes HTTP asynchrones. Voici un exemple de son utilisation dans un composant React :

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

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Erreur :', error));
  }, []);

  return (
    <div>
      {data ? (
        <div>
          <h2>Données reçues :</h2>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      ) : (
        <p>Chargement en cours...</p>
      )}
    </div>
  );
};

export default MyComponent;

2. Utilisation de axios#

axios est une bibliothèque populaire pour effectuer des requêtes HTTP dans JavaScript. Voici comment l’utiliser dans un composant React :

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

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data))
      .catch(error => console.error('Erreur :', error));
  }, []);

  return (
    <div>
      {data ? (
        <div>
          <h2>Données reçues :</h2>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      ) : (
        <p>Chargement en cours...</p>
      )}
    </div>
  );
};

export default MyComponent;

3. Utilisation de GraphQL#

GraphQL est une technologie moderne permettant de déclarer les données requises par le client. Voici un exemple de son utilisation avec React en utilisant Apollo Client :

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_DATA = gql`
  query {
    getData {
      id
      name
      email
    }
  }
`;

const MyComponent = () => {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return <p>Chargement en cours...</p>;
  if (error) return <p>Erreur : {error.message}</p>;

  return (
    <div>
      <h2>Données reçues :</h2>
      <pre>{JSON.stringify(data.getData, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

Conclusion#

Dans cet article, nous avons exploré différentes façons d’effectuer des requêtes AJAX avec React en utilisant les bibliothèques fetch, axios et GraphQL. Choisissez la méthode qui convient le mieux à votre projet et à vos préférences de développement. N’oubliez pas de gérer les erreurs et les états de chargement pour offrir une meilleure expérience utilisateur.