Comment utiliser React et GraphQL pour créer une interaction flexible avec les données front-end et back-end

Comment utiliser React et GraphQL pour créer une interaction flexible avec les données front-end et back-end

Dans le développement d'applications Web modernes, l'interaction avec les données front-end et back-end est essentielle. Afin d'obtenir une interaction de données efficace, flexible et évolutive, l'utilisation d'une combinaison de React et GraphQL est un bon choix. Dans cet article, je vais vous présenter comment utiliser React et GraphQL pour créer une interaction flexible avec les données front-end et back-end, et fournir des exemples de code spécifiques.

1. Qu'est-ce que GraphQL ?

GraphQL est un ensemble de spécifications pour un langage de requête et un environnement d'exécution pour les API. Il fournit un moyen flexible de décrire les données requises par les applications frontales, peut réduire le nombre de requêtes réseau et améliorer considérablement l'efficacité de l'acquisition de données. Par rapport aux API RESTful traditionnelles, GraphQL permet aux applications frontales de spécifier exactement les données qu'elles doivent récupérer, sans avoir besoin de récupérer des données inutiles à partir de plusieurs points de terminaison.

2. Comment utiliser React et GraphQL ?

1. Installer les dépendances associées

Tout d'abord, vous devez installer certaines dépendances nécessaires. Ouvrez l'outil de ligne de commande, entrez dans le répertoire du projet et exécutez la commande suivante :

npm install react react-dom react-apollo graphql apollo-boost

2. Create Apollo Client

Dans les applications React, nous pouvons utiliser Apollo Client pour gérer la communication avec le serveur GraphQL. Tout d'abord, ouvrez le fichier d'entrée du projet (généralement index.js), puis créez le client Apollo comme suit :

import React from 'react';
import { ApolloProvider } from 'react-apollo';
import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql' // GraphQL服务器的URL
});

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

3. Envoyer une requête GraphQL

Dans le composant React, nous pouvons utiliser la requête fournie par Composant Apollo Client pour envoyer des requêtes GraphQL et obtenir des données. Voici un exemple : Query组件来发送GraphQL查询并获取数据。以下是一个示例：

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

const User = ({ id }) => (
  <Query query={GET_USER} variables={{ id }}>
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      const { user } = data;

      return (
        <div>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      );
    }}
  </Query>
);

在上面的代码中，我们定义了一个GET_USER的GraphQL查询，并将其作为query属性传递给Query组件。我们还通过variables属性传递了查询所需的变量。在组件的回调函数中，我们可以访问loading、error和data等信息。根据这些信息，我们可以在页面上显示相应的内容。

4. 发送GraphQL变更

除了发送查询，我们还可以使用Apollo Client提供的Mutation组件来发送GraphQL变更。以下是一个示例：

import React from 'react';
import { Mutation } from 'react-apollo';
import gql from 'graphql-tag';

const CREATE_USER = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
      email
    }
  }
`;

const CreateUser = () => (
  <Mutation mutation={CREATE_USER}>
    {(createUser, { data }) => (
      <div>
        <button onClick={() => {
          createUser({ variables: { input: { name: 'John', email: 'john@example.com' } } })
        }}>Create User</button>
      </div>
    )}
  </Mutation>
);

在上面的代码中，我们定义了一个CREATE_USER的GraphQL变更，并将其作为mutation属性传递给Mutation组件。在组件的回调函数中，我们可以通过调用createUserrrreee

Dans le code ci-dessus, nous définissons une requête GraphQL pour GET_USER et la transmettons comme attribut query à Query Composant. Nous avons également transmis les variables requises pour la requête via l'attribut <code>variables. Dans la fonction de rappel du composant, nous pouvons accéder à des informations telles que loading, error et data. Sur la base de ces informations, nous pouvons afficher le contenu correspondant sur la page.

Envoyer les modifications GraphQL

En plus d'envoyer des requêtes, nous pouvons également utiliser le composant Mutation fourni par Apollo Client pour envoyer des modifications GraphQL. Voici un exemple :

rrreee🎜 Dans le code ci-dessus, nous définissons une mutation GraphQL de CREATE_USER et la transmettons comme attribut mutation à Mutation Composant. Dans la fonction de rappel du composant, nous pouvons envoyer des modifications en appelant la fonction <code>createUser. De même, nous pouvons afficher du contenu pertinent sur la page selon vos besoins. 🎜🎜3. Résumé🎜🎜À travers les exemples ci-dessus, nous pouvons voir que la combinaison de React et GraphQL peut permettre une interaction de données front-end et back-end efficace, flexible et évolutive. Grâce à React et Apollo Client, nous pouvons facilement envoyer des requêtes et des modifications GraphQL, ainsi qu'afficher et traiter les données sur la page. Cette approche peut grandement simplifier la complexité du développement front-end et offrir une meilleure expérience utilisateur. 🎜🎜J'espère que cet article pourra vous aider à comprendre comment utiliser React et GraphQL pour créer une interaction flexible avec les données front-end et back-end. Si vous n'avez pas encore essayé React et GraphQL, je vous encourage à les essayer dans votre propre projet et je pense que vous découvrirez à quel point ils sont puissants. Je vous souhaite de meilleurs résultats dans le développement Web ! 🎜

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!