Cara membina aplikasi web dengan graphql dan bertindak balas

Tutorial ini menunjukkan membina aplikasi Web React yang mengambil dan memaparkan data Pokémon menggunakan klien GraphQL dan Apollo. Kami akan menggunakan API graphql-pokemon.

Konsep Utama:

• Graphql: Bahasa pertanyaan untuk API, membolehkan pelanggan meminta dengan tepat data yang mereka perlukan. Kami akan menggunakannya untuk berinteraksi dengan API Pokémon.
• Apollo Client: Penyelesaian Pengurusan Data yang kuat untuk JavaScript, memudahkan integrasi GraphQL dalam React.
• useQuery cangkuk: cangkuk reaksi dari @apollo/react-hooks untuk mengambil hasil pertanyaan graphql.

Prasyarat:

• node.js dan npm (atau benang) dipasang.
• kebiasaan dengan JavaScript (ES6), React, dan Perintah Terminal Asas.

Persediaan:

1. Buat App React:

   <code class="language-bash">npx create-react-app react-pokemon
   cd react-pokemon</code>

2. Pasang pakej klien Apollo:

   <code class="language-bash">npm install graphql apollo-client apollo-cache-inmemory apollo-link-http @apollo/react-hooks graphql-tag</code>

3. Konfigurasi klien Apollo (src/index.js):

   <code class="language-javascript">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></app>
         </router>
       </apolloprovider>
     </react.strictmode>
   );</code>

4. mengambil data Pokémon (src/app.js):

   <code class="language-javascript">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>Pokémon List</h1>
         {data.pokemons.map((pokemon) => (
           <div key="{pokemon.id}">
             <img src="%7Bpokemon.image%7D" alt="{pokemon.name}">
             <h3>{pokemon.name}</h3>
           </div>
         ))}
       </div>
     );
   }
   
   export default App;</code>

5. Styling (pilihan): Tambah CSS ke src/App.css atau gaya inline untuk menyesuaikan penampilan.

6. Jalankan aplikasi: npm start

7. Deploy (Optional): Gunakan platform seperti Netlify, Vercel, atau GitHub Pages untuk menggunakan aplikasi anda yang dibina. Ingatlah untuk menjalankan npm run build sebelum menggunakan.

Sambutan yang disemak ini memberikan tutorial yang lebih ringkas dan diselaraskan, memberi tumpuan kepada langkah -langkah teras. Pengendalian ralat dan penggunaan berubah -ubah diperbaiki untuk kejelasan dan keteguhan. Ingatlah untuk menyesuaikan gaya yang diperlukan untuk memadankan pilihan anda. Kemasukan penghalaan adalah pilihan, bergantung kepada kerumitan aplikasi anda.

Atas ialah kandungan terperinci Cara membina aplikasi web dengan graphql dan bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!