graphqlを使用してWebアプリを構築する方法と反応する方法

このチュートリアルでは、GraphQLとApolloクライアントを使用してポケモンデータを取得して表示するReact Webアプリケーションの構築を示しています。 graphql-pokemonapi。

を利用します

重要な概念：

• graphql：APIのクエリ言語で、クライアントが必要なデータを正確に要求できるようにします。 PokémonAPIと対話するために使用します
• apolloクライアント：JavaScriptの強力なデータ管理ソリューション、ReactでのGraphQL統合の簡素化。
• フック：GraphQLクエリの結果を取得するためのuseQueryからの反応フック。 @apollo/react-hooks
前提条件：

node.jsおよびnpm（または糸）インストール。

JavaScript（ES6）、React、およびBasicターミナルコマンドに精通している

• セットアップ：

Reactアプリの作成：

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

   Apolloクライアント（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 startdeploy（optional）：

   Netlify、Vercel、GitHubページなどのプラットフォームを使用して、構築されたアプリケーションを展開します。 展開する前に実行することを忘れないでください

7. この改訂された応答は、コアステップに焦点を当てた、より簡潔で合理化されたチュートリアルを提供します。 明確さと堅牢性のために、エラー処理と変動使用率が向上します。 必要に応じてスタイリングを調整して、好みに合わせて調整してください。 ルーティングの含めることは、アプリケーションの複雑さに応じてオプションです。

以上がgraphqlを使用してWebアプリを構築する方法と反応する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。