Comment créer une interface API évolutive avec React et GraphQL

Comment créer des interfaces API évolutives avec React et GraphQL

À mesure que la complexité des applications Web continue d'augmenter, la création d'interfaces API évolutives devient de plus en plus importante. React et GraphQL sont deux technologies populaires qui nous aident à créer des API efficaces, flexibles et évolutives. Dans cet article, nous explorerons comment utiliser React et GraphQL pour créer des interfaces API évolutives et donnerons des exemples de code spécifiques.

React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur. Il fournit un moyen de décomposer les interfaces en composants réutilisables, permettant aux développeurs de créer facilement des interfaces utilisateur complexes. GraphQL est un langage de requête et un environnement d'exécution conçus pour permettre au client d'obtenir exactement les données dont il a besoin. Il offre flexibilité et efficacité pour l'échange de données entre clients et serveurs grâce à un système de type et un langage de requête puissants.

Ci-dessous, nous présenterons étape par étape comment utiliser React et GraphQL pour créer une interface API évolutive. Nous utiliserons Node.js comme serveur backend et Express.js comme framework de serveur.

Étape 1 : Installez les dépendances nécessaires
Tout d'abord, nous devons installer les dépendances pertinentes pour React et GraphQL. Depuis la ligne de commande, utilisez npm ou Yarn pour installer les dépendances suivantes :

npm install react react-dom graphql express express-graphql

Étape 2 : configurer le serveur Express
Ensuite, nous allons configurer le serveur Express et créer le point de terminaison GraphQL. Dans le répertoire racine du projet, créez un fichier nommé server.js et ajoutez le code suivant :

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// 创建GraphQL schema
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// 定义GraphQL resolver
const root = {
  hello: () => 'Hello, World!'
};

// 创建Express app
const app = express();

// 设置GraphQL端点
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

// 启动服务器
app.listen(4000, () => {
  console.log('GraphQL server is running at http://localhost:4000/graphql');
});

Dans le code ci-dessus, nous avons d'abord créé un schéma GraphQL simple à l'aide de la fonction buildSchema, où A le champ de requête nommé hello est défini. Ensuite, nous créons un objet root qui contient la fonction d'analyseur pour le champ de requête. Enfin, nous avons créé une application Express et configuré le point de terminaison GraphQL à l'aide du middleware graphqlHTTP. buildSchema函数创建了一个简单的GraphQL schema，其中定义了一个名为hello的查询字段。然后，我们创建了一个root对象，其中包含了查询字段的解析器函数。最后，我们创建了一个Express应用程序并使用graphqlHTTP中间件设置了GraphQL端点。

第三步：创建React组件
在项目的根目录下，创建一个名为App.js的文件，添加以下代码：

import React from 'react';
import { gql, useQuery } from '@apollo/client';

// 定义GraphQL查询
const GET_HELLO = gql`
  query {
    hello
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
    </div>
  );
}

export default App;

在上述代码中，我们使用了@apollo/client库来执行GraphQL查询。我们定义了一个名为GET_HELLO的查询，并使用useQuery钩子来执行该查询。根据查询结果的不同状态，我们返回不同的组件。

第四步：渲染React应用
在项目的根目录下，编辑index.js文件并添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
import App from './App';

// 创建Apollo客户端
const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

我们使用@apollo/client库创建了一个Apollo客户端，并设置了GraphQL端点的URL。然后，我们使用ApolloProvider

Étape 3 : Créer un composant React

Dans le répertoire racine du projet, créez un fichier nommé App.js et ajoutez le code suivant :

npm start

Dans le code ci-dessus, nous avons utilisé @apollo/client bibliothèque pour exécuter des requêtes GraphQL. Nous définissons une requête appelée <code>GET_HELLO et utilisons le hook useQuery pour exécuter la requête. En fonction de l'état des résultats de la requête, nous renvoyons différents composants.

Étape 4 : Rendre l'application React

Dans le répertoire racine du projet, éditez le fichier index.js et ajoutez le code suivant :
rrreee

Nous avons créé un client Apollo en utilisant le @apollo/client library et définit l'URL du point de terminaison GraphQL. Nous avons ensuite lié le client Apollo à l'application React à l'aide du composant ApolloProvider. 🎜🎜Étape 5 : Exécuter l'application 🎜Dans la ligne de commande, utilisez la commande suivante pour démarrer l'application : 🎜rrreee🎜Maintenant, nous pouvons visualiser l'interface GraphQL en accédant à http://localhost:4000/graphql et en accédant à http : //localhost:3000 pour accéder à notre application React. 🎜🎜Conclusion🎜Cet article explique comment créer une interface API évolutive à l'aide de React et GraphQL. Avec un exemple de code pour React et GraphQL, nous montrons comment configurer un serveur Express, créer un schéma et un résolveur GraphQL et exécuter des requêtes GraphQL dans une application React. Grâce à React et GraphQL, nous pouvons créer des interfaces API efficaces, flexibles et extensibles pour mieux répondre aux besoins d'évolutivité. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!