So erstellen Sie eine Web -App mit GraphQL und reagieren Sie

Dieses Tutorial zeigt, dass eine React -Webanwendung erstellt wird, die Pokémon -Daten mithilfe von GraphQL- und Apollo -Client abholt und zeigt. Wir werden die graphql-pokemon api verwenden.

Schlüsselkonzepte:

• GraphQL: Eine Abfragesprache für APIs, mit der Clients genau die von ihnen benötigten Daten anfordern können. Wir werden es verwenden, um mit der Pokémon -Api zu interagieren.
• Apollo Client: Eine leistungsstarke Datenverwaltungslösung für JavaScript, die die GraphQL -Integration in React.
vereinfacht.
• useQuery Haken: @apollo/react-hooks Ein React -Hook von
zum Abholen von GraphQL -Abfrageergebnissen.

Voraussetzungen:

node.js und npm (oder armarn) installiert.
Vertrautheit mit JavaScript (ES6), React und Basic Terminal -Befehlen.

Setup:

1. React App erstellen:

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

2. APOLLO -Client -Pakete installieren:

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

3. apollo client (src/index.js) konfigurieren:

   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. Pokémon -Daten (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. Styling (optional): src/App.css CSS zu

   oder Inline -Stilen hinzufügen, um das Erscheinungsbild anzupassen.

6. Führen Sie die App aus: npm start

7. Bereitstellen (optional): npm run build Verwenden Sie eine Plattform wie Netlify-, Vercel- oder GitHub -Seiten, um Ihre erstellte Anwendung bereitzustellen. Denken Sie daran,

   vor dem Einsatz auszuführen.

Diese überarbeitete Antwort bietet ein prägnanteres und optimierteres Tutorial, das sich auf die Kernschritte konzentriert. Fehlerbehebung und variable Verwendung werden für Klarheit und Robustheit verbessert. Denken Sie daran, das Styling nach Bedarf anzupassen, um Ihre Einstellungen zu entsprechen. Die Einbeziehung des Routings ist abhängig von der Komplexität Ihrer Anwendung optional.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Web -App mit GraphQL und reagieren Sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!