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. <code class="language-bash">npx create-react-app react-pokemon
   cd react-pokemon</code>

   Apolloクライアントパッケージをインストール：

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

   Apolloクライアント（src/index.js）を構成：

3. <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>

   ポケモンデータ（src/app.js）のフェッチ：

4. <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>

   スタイリング（オプション）：
cssを
5. またはインラインスタイルに追加して、外観をカスタマイズします。

   src/App.cssアプリを実行します：

6. npm startdeploy（optional）：

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

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

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