Verbesserung von React-Anwendungen mit GraphQL über REST-APIs

In der sich schnell verändernden Welt der Webentwicklung ist die Optimierung und Skalierung von Anwendungen immer ein Problem. React.js hatte einen außerordentlichen Erfolg für die Frontend-Entwicklung als Tool, das eine robuste Möglichkeit zur Erstellung von Benutzeroberflächen bietet. Bei wachsenden Anwendungen wird es jedoch komplizierter, insbesondere wenn es um mehrere REST-API-Endpunkte geht. Bedenken wie übermäßiges Abrufen, bei dem übermäßige Datenmengen als erforderlich zu Leistungsengpässen und einer schlechten Benutzererfahrung führen können.

Zu den Lösungen für diese Herausforderungen gehört die Verwendung von GraphQL mit React-Anwendungen. Wenn Ihr Backend über mehrere REST-Endpunkte verfügt, kann die Einführung einer GraphQL-Ebene, die Ihre REST-API-Endpunkte intern aufruft, Ihre Anwendung vor übermäßigem Abrufen schützen und Ihre Frontend-Anwendung optimieren. In diesem Artikel erfahren Sie, wie Sie ihn verwenden, welche Vor- und Nachteile dieser Ansatz hat und welche Herausforderungen er mit sich bringt. und wie man sie angeht. Wir werden uns auch eingehender mit einigen praktischen Beispielen befassen, wie GraphQL Ihnen dabei helfen kann, die Art und Weise zu verbessern, wie Sie mit Ihren Daten arbeiten.

Overfetching in REST-APIs

In REST-APIs kommt es zu einem Überabruf, wenn die Datenmenge, die die API an den Client liefert, größer ist, als der Client benötigt. Dies ist ein häufiges Problem bei REST-APIs, die oft ein festes Objekt oder Antwortschema zurückgeben. Um dieses Problem besser zu verstehen, betrachten wir ein Beispiel.

Stellen Sie sich eine Benutzerprofilseite vor, auf der nur der Name und die E-Mail-Adresse des Benutzers angezeigt werden müssen. Mit einer typischen REST-API könnte das Abrufen der Benutzerdaten wie folgt aussehen:

fetch('/api/users/1')
  .then(response => response.json())
  .then(user => {
    // Use the user's name and profilePicture in the UI
  });

Die API-Antwort enthält unnötige Daten:

{
  "id": 1,
  "name": "John Doe",
  "profilePicture": "/images/john.jpg",
  "email": "john@example.com",
  "address": "123 Denver St",
  "phone": "111-555-1234",
  "preferences": {
    "newsletter": true,
    "notifications": true
  },
  // ...more details
}

Obwohl die Anwendung nur die Namens- und E-Mail-Felder des Benutzers benötigt, gibt die API das gesamte Benutzerobjekt zurück. Diese zusätzlichen Daten erhöhen oft die Nutzlastgröße, beanspruchen mehr Bandbreite und können schließlich die Anwendung verlangsamen, wenn sie auf einem Gerät mit begrenzten Ressourcen oder einer langsamen Netzwerkverbindung verwendet wird.

GraphQL als Lösung

GraphQL geht das Overfetching-Problem an, indem es Kunden ermöglicht, genau die Daten anzufordern, die sie benötigen. Durch die Integration eines GraphQL-Servers in Ihre Anwendung können Sie eine flexible und effiziente Datenabrufschicht erstellen, die mit Ihren vorhandenen REST-APIs kommuniziert.

Wie es funktioniert

1. GraphQL-Server-Setup: Sie führen einen GraphQL-Server ein, der als Vermittler zwischen Ihrem React-Frontend und den REST-APIs dient.
2. Schemadefinition: Sie definieren ein GraphQL-Schema, das die Datentypen und Abfragen angibt, die Ihr Frontend benötigt.
3. Resolver-Implementierung: Sie implementieren Resolver im GraphQL-Server, die Daten von den REST-APIs abrufen und nur die erforderlichen Felder zurückgeben.
4. Frontend-Integration: Sie aktualisieren Ihre React-Anwendung, um GraphQL-Abfragen anstelle direkter REST-API-Aufrufe zu verwenden.

Mit diesem Ansatz können Sie den Datenabruf optimieren, ohne Ihre bestehende Backend-Infrastruktur überarbeiten zu müssen.

Implementieren von GraphQL in einer React-Anwendung

Sehen wir uns an, wie man einen GraphQL-Server einrichtet und ihn in eine React-Anwendung integriert.

Abhängigkeiten installieren:

npm install apollo-server graphql axios

Definieren Sie das Schema

Erstellen Sie eine Datei mit dem Namen schema.js:

const { gql } = require('apollo-server');

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    email: String  // Ensure this matches exactly with the frontend query
  }

  type Query {
    user(id: ID!): User
  }
`;

module.exports = typeDefs;

Dieses Schema definiert einen Benutzertyp und eine Benutzerabfrage, die einen Benutzer anhand seiner ID abruft.

Implementieren Sie Resolver

Erstellen Sie eine Datei mit dem Namen „resolvers.js:“

const resolvers = {
  Query: {
    user: async (_, { id }) => {
      try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
        const user = await response.json();

        return {
          id: user.id,
          name: user.name,
          email: user.email,  // Return email instead of profilePicture
        };
      } catch (error) {
        throw new Error(`Failed to fetch user: ${error.message}`);
      }
    },
  },
};

module.exports = resolvers;

Der Resolver für die Benutzerabfrage ruft Daten von der REST-API ab und gibt nur die erforderlichen Felder zurück.

Wir werden https://jsonplaceholder.typicode.com/ für unsere gefälschte REST-API verwenden.

Richten Sie den Server ein

Erstellen Sie eine server.js-Datei:

const { ApolloServer } = require('apollo-server');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen({ port: 4000 }).then(({ url }) => {
  console.log(`GraphQL Server ready at ${url}`);
});

Server starten:

node server.js

Ihr GraphQL-Server ist live unter http://localhost:4000/graphql und wenn Sie Ihren Server abfragen, gelangen Sie zu dieser Seite.

Integration mit der React-Anwendung

Wir werden jetzt die React-Anwendung ändern, um die GraphQL-API zu verwenden.

Installieren Sie den Apollo-Client

npm install @apollo/client graphql

Konfigurieren Sie den Apollo-Client

import { ApolloClient, InMemoryCache } from '@apollo/client';

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

Schreiben Sie die GraphQL-Abfrage

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

Integrieren Sie nun die oben genannten Codeteile in Ihre React-App. Hier ist eine einfache Reaktions-App, mit der ein Benutzer die Benutzer-ID auswählen und die Informationen anzeigen kann:

import { useState } from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from '@apollo/client';
import './App.css';  // Link to the updated CSS

const client = new ApolloClient({
  uri: 'http://localhost:4000',  // Ensure this is the correct URL for your GraphQL server
  cache: new InMemoryCache(),
});

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

const User = ({ userId }) => {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

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

  return (
    <div className="user-container">
      <h2>{data.user.name}</h2>
      <p>Email: {data.user.email}</p>
    </div>
  );
};

const App = () => {
  const [selectedUserId, setSelectedUserId] = useState("1");

  return (
    <ApolloProvider client={client}>
      <div className="app-container">
        <h1 className="title">GraphQL User Lookup</h1>
        <div className="dropdown-container">
          <label htmlFor="userSelect">Select User ID:</label>
          <select
            id="userSelect"
            value={selectedUserId}
            onChange={(e) => setSelectedUserId(e.target.value)}
          >
            {Array.from({ length: 10 }, (_, index) => (
              <option key={index + 1} value={index + 1}>
                {index + 1}
              </option>
            ))}
          </select>
        </div>
        <User userId={selectedUserId} />
      </div>
    </ApolloProvider>
  );
};

export default App;

Ergebnis:

Einfacher Benutzer

Working with Multiple Endpoints

Imagine a scenario where you need to retrieve a specific user’s posts, along with the individual comments on each post. Instead of making three separate API calls from your frontend React app and dealing with unnecessary data, you can streamline the process with GraphQL. By defining a schema and crafting a GraphQL query, you can request only the exact data your UI requires, all in one efficient request.

We need to fetch user data, their posts, and comments for each post from the different endpoints. We’ll use fetch to gather data from the multiple endpoints and return it via GraphQL.

Update Resolvers

const fetch = require('node-fetch');

const resolvers = {
  Query: {
    user: async (_, { id }) => {
      try {
        // fetch user
        const userResponse = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
        const user = await userResponse.json();

        // fetch posts for a user
        const postsResponse = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${id}`);
        const posts = await postsResponse.json();

        // fetch comments for a post
        const postsWithComments = await Promise.all(
          posts.map(async (post) => {
            const commentsResponse = await fetch(`https://jsonplaceholder.typicode.com/comments?postId=${post.id}`);
            const comments = await commentsResponse.json();
            return { ...post, comments };
          })
        );

        return {
          id: user.id,
          name: user.name,
          email: user.email,
          posts: postsWithComments,
        };
      } catch (error) {
        throw new Error(`Failed to fetch user data: ${error.message}`);
      }
    },
  },
};

module.exports = resolvers;

Update GraphQL Schema

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Comment {
    id: ID!
    name: String
    email: String
    body: String
  }

  type Post {
    id: ID!
    title: String
    body: String
    comments: [Comment]
  }

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

  type Query {
    user(id: ID!): User
  }
`;

module.exports = typeDefs;

Server setup in server.js remains same. Once we update the React.js code, we get the below output:

Detailed User

Benefits of This Approach

Integrating GraphQL into your React application provides several advantages:

Eliminating Overfetching

A key feature of GraphQL is that it only fetches exactly what you request. The server only returns the requested fields and ensures that the amount of data transferred over the network is reduced by serving only what the query demands and thus improving performance.

Simplifying Frontend Code

GraphQL enables you to get the needful information in a single query regardless of their origin. Internally it could be making 3 API calls to get the information. This helps to simplify your frontend code because now you don’t need to orchestrate different async requests and combine their results.

Improving Developer’s Experience

A strong typing and schema introspection offer better tooling and error checking than in the traditional API implementation. Further to that, there are interactive environments where developers can build and test queries, including GraphiQL or Apollo Explorer.

Addressing Complexities and Challenges

This approach has some advantages but it also introduces some challenges that have to be managed.

Additional Backend Layer

The introduction of the GraphQL server creates an extra layer in your backend architecture and if not managed properly, it becomes a single point of failure.

Solution: Pay attention to error handling and monitoring. Containerization and orchestration tools like Docker and Kubernetes can help manage scalability and reliability.

Potential Performance Overhead

The GraphQL server may make multiple REST API calls to resolve a single query, which can introduce latency and overhead to the system.

Solution: Cache the results to avoid making several calls to the API. There exist some tools such as DataLoader which can handle the process of batching and caching of requests.

Conclusion

"Simplicity is the ultimate sophistication" — Leonardo da Vinci

Integrating GraphQL into your React application is more than just a performance optimization — it’s a strategic move towards building more maintainable, scalable, and efficient applications. By addressing overfetching and simplifying data management, you not only enhance the user experience but also empower your development team with better tools and practices.

While the introduction of a GraphQL layer comes with its own set of challenges, the benefits often outweigh the complexities. By carefully planning your implementation, optimizing your resolvers, and securing your endpoints, you can mitigate potential drawbacks. Moreover, the flexibility that GraphQL offers can future-proof your application as it grows and evolves.

Embracing GraphQL doesn’t mean abandoning your existing REST APIs. Instead, it allows you to leverage their strengths while providing a more efficient and flexible data access layer for your frontend applications. This hybrid approach combines the reliability of REST with the agility of GraphQL, giving you the best of both worlds.

If you’re ready to take your React application to the next level, consider integrating GraphQL into your data fetching strategy. The journey might present challenges, but the rewards — a smoother development process, happier developers, and satisfied users — make it a worthwhile endeavor.

Full Code Available

You can find the full code for this implementation on my GitHub repository: GitHub Link.

Das obige ist der detaillierte Inhalt vonVerbesserung von React-Anwendungen mit GraphQL über REST-APIs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!