Comment créer une application Web avec GraphQL et réagir

Ce didacticiel démontre la création d'une application Web React qui récupère et affiche les données Pokémon à l'aide du client GraphQL et Apollo. Nous utiliserons l'API graphql-pokemon

Concepts clés:

• GraphQL: un langage de requête pour les API, permettant aux clients de demander précisément les données dont ils ont besoin. Nous allons l'utiliser pour interagir avec l'API Pokémon.
• Client Apollo: Une puissante solution de gestion des données pour JavaScript, simplifiant l'intégration GraphQL dans React.
• useQuery crochet: un crochet react de @apollo/react-hooks pour récupérer les résultats de la requête graphique.

Prérequis:

• node.js et npm (ou fil) installés.
• Familiarité avec JavaScript (ES6), React et Basic Terminal Commandes.

Configuration:

1. Créer une application React:

   npx create-react-app react-pokemon
   cd react-pokemon

2. Installez les packages clients Apollo:

   npm install graphql apollo-client apollo-cache-inmemory apollo-link-http @apollo/react-hooks graphql-tag

3. Configurer le client Apollo (src / index.js):

   import { ApolloClient, InMemoryCache, HttpLink, ApolloProvider } from '@apollo/client';
   import { BrowserRouter as Router } from 'react-router-dom'; // Add for routing if needed
   import App from './App';
   import ReactDOM from 'react-dom/client';
   
   const client = new ApolloClient({
     cache: new InMemoryCache(),
     link: new HttpLink({ uri: 'https://graphql-pokemon.now.sh/' }),
   });
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <React.StrictMode>
       <ApolloProvider client={client}>
         <Router> {/* Wrap with Router if using routing */}
           <App />
         </Router>
       </ApolloProvider>
     </React.StrictMode>
   );

4. Répondre aux données Pokémon (src / app.js):

   import { useQuery, gql } from '@apollo/client';
   import React from 'react';
   
   const GET_POKEMON = gql`
     query pokemons($first: Int!) {
       pokemons(first: $first) {
         id
         name
         image
       }
     }
   `;
   
   function App() {
     const { loading, error, data } = useQuery(GET_POKEMON, { variables: { first: 150 } });
   
     if (loading) return <p>Loading...</p>;
     if (error) return <p>Error: {error.message}</p>;
   
     return (
       <div>
         <h1 id="Pokémon-List">Pokémon List</h1>
         {data.pokemons.map((pokemon) => (
           <div key={pokemon.id}>
             <img src={pokemon.image} alt={pokemon.name} />
             <h3 id="pokemon-name">{pokemon.name}</h3>
           </div>
         ))}
       </div>
     );
   }
   
   export default App;

5. Style (facultatif): Ajouter CSS à src/App.css ou les styles en ligne pour personnaliser l'apparence.

6. Exécutez l'application: npm start

7. Déployer (facultatif): Utilisez une plate-forme comme Netlify, Vercel ou GitHub pour déployer votre application construite. N'oubliez pas d'exécuter npm run build avant le déploiement.

Cette réponse révisée fournit un tutoriel plus concis et rationalisé, en se concentrant sur les étapes de base. La gestion des erreurs et l'utilisation des variables sont améliorées pour plus de clarté et de robustesse. N'oubliez pas d'ajuster le style au besoin pour correspondre à vos préférences. L'inclusion du routage est facultative, selon la complexité de votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!