如何使用GraphQl構建Web應用程序並進行反應

>本教程演示了構建一個使用GraphQL和Apollo客戶端來獲取和顯示Pokémon數據的React Web應用程序。 我們將利用graphql-pokemonapi。

密鑰概念：

• graphQl： apis的查詢語言，使客戶能夠準確請求所需的數據。 我們將使用它與PokémonApi進行交互。
> apollo客戶端：
• 用於JavaScript的功能強大的數據管理解決方案，簡化了React中的GraphQl集成。
• 鉤子： useQuery的react Hook 用於獲取GraphQl查詢結果。 @apollo/react-hooks

>先決條件：

node.js和npm（或YARN）已安裝。
• 熟悉JavaScript（ES6），React和基本終端命令。
• 設置：

創建React App：

1. >

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

   >安裝Apollo客戶端軟件包：
2. >

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

   configure apollo client（src/index.js）：
3. >

   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>
   );

   >獲取神奇寶貝數據（src/app.js）：
4. >

   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;

   >造型（可選）：
>將CSS添加到
5. 或內聯樣式以自定義外觀。

   src/App.css

   運行應用程序：

6. > npm start

deploy（可選）：使用NetLify，vercel或github頁面之類的平台來部署您的構建應用程序。 請記住在部署之前運行
7. 。

   > npm run build>這種修訂後的響應提供了一個更簡潔，簡化的教程，重點介紹了核心步驟。 錯誤處理和可變使用情況得到改善，以清晰度和魯棒性。 請記住根據需要調整樣式以匹配您的偏好。 包括路由的包含是可選的，具體取決於您的應用程序的複雜性。

   >

以上是如何使用GraphQl構建Web應用程序並進行反應的詳細內容。更多資訊請關注PHP中文網其他相關文章！