Anwendungen und Vorteile von GraphQL in modernen Webanwendungen-js-Tutorial-php.cn

Applications and Advantages of GraphQL in Modern Web Applications

GraphQL ist eine moderne API-Abfragesprache, die in modernen Webanwendungen weit verbreitet ist, da sie eine effiziente, flexible und leistungsstarke Möglichkeit zum Abrufen von Daten bietet

Beispiel für eine einfache GraphQL-Schnellanwendung:

1. Backend-Einstellungen (mit graphql-yoga)

Zuerst müssen wir einen GraphQL-Server erstellen. Installieren Sie graphql-yoga und erstellen Sie ein einfaches GraphQL-Schema:

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

Nach dem Login kopieren

2. Front-End-Setup (mit Apollo Client)

Als nächstes müssen wir Apollo Client in der Front-End-Anwendung für die Kommunikation mit unserem GraphQL-Server konfigurieren:

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

Nach dem Login kopieren

3. Schreiben Sie Front-End-Komponenten

Jetzt verwenden wir Apollo Client in der React-Komponente, um Abfragen und Mutationen durchzuführen:

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1>{data.hello}</h1>
      <button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

Nach dem Login kopieren

Wir erstellen eine GET_HELLO-Abfrage, um die Begrüßung des Servers abzurufen und sie auf der Seite anzuzeigen. Gleichzeitig definieren wir eine Mutationsoperation ADD_MESSAGE_MUTATION, die eine neue Nachricht an den Server sendet, wenn der Benutzer auf die Schaltfläche klickt.

4. Führen Sie die Anwendung aus

Backend-Server starten:

node server.js

Nach dem Login kopieren

Starten Sie dann die Frontend-Anwendung unter der Annahme „React App erstellen“:

npm start

Nach dem Login kopieren

Grundlegende GraphQL-Abfragen

1. Abfragesprache: Abfragen, Mutationen, Abonnements

In GraphQL sind Abfragen und Mutationen Zeichenfolgen, die durch JSON-ähnliche Strukturen dargestellt werden. Hier ist ein einfaches Beispiel:

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

Nach dem Login kopieren

Im obigen Code fordert die GetUser-Abfrage den Namen und die E-Mail-Adresse des Benutzers mit der Benutzer-ID 1 an. Die CreateUser-Mutation erstellt einen neuen Benutzer und gibt die ID und den Namen des neuen Benutzers zurück. Das OnNewUser-Abonnement wartet darauf, dass der neue Benutzer erstellt wird, und gibt die Informationen des neuen Benutzers zurück.

2. Typensystem

Im Backend definieren wir ein GraphQL-Schema, um diese Typen zu beschreiben:

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

Nach dem Login kopieren

Hier definieren wir einen Benutzerobjekttyp, einen Mutationstyp für Mutationsoperationen und einen Abonnementtyp für Abonnementoperationen.

3. Abfragestruktur: Felder und Parameter

Die Abfragestruktur besteht aus Feldern und Parametern. Im obigen Abfragebeispiel ist „Benutzer“ das Feld und „ID“ und „E-Mail“ sind Unterfelder des Benutzerfelds. Parameter wie id: 1 werden zum Anpassen der Abfrage verwendet.

4. Hierarchie und Verschachtelung

GraphQL-Abfragen können verschachtelt werden. Hier ist ein komplexeres Beispiel:

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

Nach dem Login kopieren

Diese Abfrage erfragt alle Benutzer und ihre jeweiligen Beiträge, die auch Informationen zum Autor enthalten. Hierarchien ermöglichen den Abruf mehrerer Datenebenen in einer Anfrage.

Beispiel für einen Client-Code (mit Apollo-Client)

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

Nach dem Login kopieren

In dieser React-Komponente verwenden wir useQuery, um Daten von einem GraphQL-Server abzurufen und Informationen über Benutzer und ihre Beiträge darzustellen. Auf diese Weise kommen GraphQL-Abfragen, Typsysteme und Hierarchien ins Spiel.

GraphQL-Schema

GraphQL Schema Definition Language (SDL) ist eine Sprache zur Beschreibung von GraphQL-Schemas. Es definiert Datentypen, Abfragen, Mutationen und Anweisungen in einem prägnanten, für Menschen lesbaren Format.

Typen definieren
Definieren wir zunächst einige grundlegende Datentypen. Definieren Sie beispielsweise einen Benutzertyp und einen Beitragstyp.

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

Nach dem Login kopieren

Hier verfügt der Benutzertyp über ID-, Benutzernamen-, E-Mail-Felder und ein Beitragsfeld, das auf mehrere Beiträge verweist. Der Beitragstyp enthält ID, Titel, Inhaltsfelder und ein Autorenfeld, das auf den Benutzer verweist.

Wurzel und Mutationswurzel abfragen
Als nächstes definieren Sie die GraphQL-Abfragestammtypen (Query) und Mutationsstammtypen (Mutation), die die Einstiegspunkte für Clients sind, um Daten anzufordern und Daten zu ändern.

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1>{data.hello}</h1>
      <button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

Nach dem Login kopieren

Im Abfragetyp definieren wir Abfragen zum Abrufen eines einzelnen Benutzers, aller Benutzer, eines einzelnen Beitrags und aller Beiträge. Im Mutationstyp definieren wir Operationen zum Erstellen neuer Benutzer und neuer Beiträge.

Richtlinien verstehen und anwenden
Direktiven sind Anweisungen im GraphQL-Schema, die das Ausführungsverhalten ändern. Sie können auf jeden Teil der Typsystemdefinition angewendet werden, beispielsweise auf Felder, Eingabetypen, Objekttypen usw. Im Folgenden wird gezeigt, wie Sie eine benutzerdefinierte @auth-Direktive verwenden, um Zugriffsrechte zu steuern.

Angenommen, wir definieren zunächst eine @auth-Direktive, um den Zugriff auf bestimmte Felder einzuschränken und Benutzer zur Anmeldung aufzufordern.

node server.js

Nach dem Login kopieren

Als nächstes wenden Sie diese Anweisung im Schema an:

npm start

Nach dem Login kopieren

Im obigen Beispiel kann auf die Me-Abfrage und das Benutzernamenfeld ohne besondere Berechtigungen zugegriffen werden, für den Zugriff auf das E-Mail-Feld des Benutzers sind jedoch Administratorberechtigungen erforderlich (angegeben durch die @auth(requires: ADMIN)-Direktive).

Erweiterte GraphQL-Anwendungen

1. Paginierung

Verwenden Sie die Cursor-basierte Paginierung von GraphQL, um die Leistung und das Benutzererlebnis zu verbessern.

Schemadefinition:

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

Nach dem Login kopieren

Resolver-Beispiel:

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

Nach dem Login kopieren

2. Fehlerbehandlung

Passen Sie die Fehlerbehandlung an, um die Fähigkeit des Kunden zur Fehlerbehandlung zu verbessern.

Resolver-Beispiel:

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

Nach dem Login kopieren

3. Benutzerdefinierte Anweisungen

Erstellen Sie benutzerdefinierte Anweisungen, um bestimmte Geschäftslogik- oder Sicherheitsanforderungen umzusetzen.

Schemadefinition:

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

const GET_USERS_AND_POSTS = gql`
  query GetUsersAndPosts {
    users {
      id
      name
      posts {
        id
        title
        content
        author {
          id
          name
        }
      }
    }
  }
`;

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

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

  return (
    <div>
      {data.users.map(user => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <ul>
            {user.posts.map(post => (
              <li key={post.id}>
                <h3>{post.title}</h3>
                <p>{post.content}</p>
                <p>Author: {post.author.name}</p>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default App;

Nach dem Login kopieren

Resolver-Beispiel:

type User {
  id: ID!
  username: String!
  email: String!
  posts: [Post!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}

Nach dem Login kopieren

Stellen Sie sicher, dass Sie diesen Direktiven-Handler in Ihrer GraphQL-Serverkonfiguration registrieren.

4. GraphQL-Föderation

Föderation ermöglicht den Aufbau einer einzigen GraphQL-API, die aus mehreren Diensten besteht.

Service-A-Schema:

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

Nach dem Login kopieren

Service B-Schema:

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

Nach dem Login kopieren

5. Komplexe Abfrageoptimierung

Verwenden Sie den Feldauflöser und den Datenlader von GraphQL, um die Leistung zu optimieren.

Data Loader-Beispiel:

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1>{data.hello}</h1>
      <button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

Nach dem Login kopieren

GraphQL-Funktionen und Vorteile

Leistungsoptimierung: Durch das Abrufen von Daten bei Bedarf wird der Netzwerkübertragungsaufwand reduziert und die Seitenladegeschwindigkeit verbessert.
Fehler reduzieren: Der Client definiert die Abfragestruktur und der Server gibt die erwartete Form zurück, wodurch Fehler aufgrund von Schnittstellenkonflikten reduziert werden.
Besseres API-Design: Das starke Typsystem gewährleistet die Konsistenz und Korrektheit der Daten und macht die API einfacher zu verstehen und zu warten.
Kundenkontrolle: Der Kunde kann entscheiden, wie viele Daten er wann erhält, was das Benutzererlebnis verbessert.
Cache-Optimierung: Der Client kann Caching-Strategien basierend auf der zurückgegebenen Datenstruktur einfacher implementieren.
Reduzieren Sie die Komplexität des Backends: Das Backend muss nicht mehr mehrere API-Endpunkte erstellen, um die Anforderungen verschiedener Kunden zu erfüllen.

Das obige ist der detaillierte Inhalt vonAnwendungen und Vorteile von GraphQL in modernen Webanwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!