如何使用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中文网其他相关文章！