Apollo-Client für GraphQL-Statusverwaltung in React: Vereinfachen des Datenabrufs und -cachings

Apollo-Client für GraphQL-Statusverwaltung in React

Apollo Client ist eine beliebte JavaScript-Bibliothek, die die Datenverwaltung für GraphQL-APIs vereinfacht. Es ermöglicht Ihnen die effiziente Verwaltung sowohl lokaler als auch Remote-Daten in Ihrer React-Anwendung und bietet leistungsstarke Funktionen wie Caching, Echtzeitaktualisierungen, Paginierung und Abfrage-Batching. Mit Apollo Client können Entwickler mithilfe von Abfragen und Mutationen nahtlos und deklarativ mit GraphQL-Servern interagieren.

Apollo Client lässt sich gut in React integrieren und wird häufig zum Verwalten des Status und zum Durchführen von Vorgängen wie dem Abrufen, Zwischenspeichern und Aktualisieren von Daten von einem GraphQL-Server verwendet. Es reduziert den Bedarf an komplexen Zustandsverwaltungsbibliotheken wie Redux und bietet einen einfacheren Ansatz für die Verwaltung von Daten, die an Ihre UI-Komponenten gebunden sind.

---

1. Kernkonzepte des Apollo Client

1. ApolloProvider

Um Apollo Client in einer React-Anwendung zu verwenden, müssen Sie Ihre Anwendung zunächst mit der Komponente ApolloProvider umschließen. Diese Komponente macht die Apollo-Client-Instanz über die Kontext-API von React in Ihrem gesamten Komponentenbaum verfügbar.

Beispiel:

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

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

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

• ApolloProvider bietet Zugriff auf die Apollo-Client-Instanz in Ihrer App.
• InMemoryCache ist die Standard-Cache-Implementierung, die vom Apollo-Client verwendet wird, um Abfrageergebnisse zu speichern und nachfolgende Abrufe zu optimieren.

2. Abfragen

Im Apollo Client werden Abfragen verwendet, um Daten von einem GraphQL-Server abzurufen. Sie können den Hook useQuery verwenden, um Daten innerhalb Ihrer React-Komponenten abzurufen. Dieser Hook kümmert sich automatisch um das Laden, Fehlerzustände und das Caching für Sie.

Beispiel:

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

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;

• useQuery führt die GET_ITEMS-Abfrage aus, wenn die Komponente gemountet ist, und stellt Lade-, Fehler- und Datenstatus bereit.
• Apollo Client speichert die Antwort automatisch zwischen und verwendet sie wieder, wenn dieselbe Abfrage erneut ausgeführt wird.

3. Mutationen

Mutationen werden verwendet, um Daten auf dem Server zu ändern (z. B. Datensätze zu erstellen, zu aktualisieren oder zu löschen). Sie können den Hook useMutation verwenden, um Mutationen innerhalb Ihrer React-Komponenten durchzuführen.

Beispiel:

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

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

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

• useMutation wird verwendet, um die ADD_ITEM-Mutation aufzurufen.
• Die Variablenoption übergibt Eingabedaten an die Mutation.
• Sie können onCompleted verwenden, um die Antwortdaten zu verarbeiten, nachdem die Mutation erfolgreich war.

4. Caching

Apollo Client verwendet standardmäßig Caching. Diese Funktion hilft, unnötige Netzwerkanfragen zu vermeiden und verbessert die Leistung, indem die Ergebnisse früherer Abfragen in einem In-Memory-Cache gespeichert werden.

Beispiel:

Wenn Sie eine Abfrage durchführen, überprüft Apollo Client automatisch den Cache, um zu sehen, ob die Daten bereits abgerufen wurden. Wenn die Daten vorhanden sind, werden sie sofort zurückgegeben. Wenn nicht, sendet es eine Netzwerkanfrage.

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

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;

• Wenn Sie useQuery zum ersten Mal aufrufen, ruft Apollo Client Daten aus dem Netzwerk ab.
• Wenn dieselbe Abfrage das nächste Mal ausgeführt wird, stellt Apollo Client die Daten aus dem Cache bereit und verbessert so die Leistung.

5. Paginierung und mehr abrufen

Beim Umgang mit großen Datenmengen ist häufig eine Paginierung erforderlich. Apollo Client bietet eine fetchMore-Funktion zum Laden zusätzlicher Daten als Reaktion auf Benutzeraktionen wie Scrollen oder Klicken auf „Mehr laden“.

Beispiel:

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

// Define a mutation to add a new item
const ADD_ITEM = gql`
  mutation AddItem($name: String!, $description: "String!) {"
    addItem(name: $name, description: "$description) {"
      id
      name
      description
    }
  }
`;

const AddItemForm = () => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [addItem, { loading, error }] = useMutation(ADD_ITEM);

  const handleSubmit = (e) => {
    e.preventDefault();
    addItem({
      variables: { name, description },
      onCompleted: (data) => {
        // Handle the data after the mutation is successful
        console.log('Item added:', data.addItem);
      },
    });
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="text"
        placeholder="Description"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <button type="submit">Add Item</button>
    </form>
  );
};

export default AddItemForm;

• Mit fetchMore können Sie bei Bedarf weitere Daten laden, beispielsweise wenn der Benutzer das Ende einer Liste erreicht.

---

2. Vorteile der Verwendung des Apollo-Clients für die GraphQL-Statusverwaltung

1. Effizienter Datenabruf

Apollo Client vereinfacht das Abrufen von Daten mit GraphQL und stellt sicher, dass Ihre Anwendung nur die Daten abruft, die sie benötigt.

2. Automatisches Caching

Mit seinem integrierten Caching reduziert Apollo Client die Anzahl der Anfragen an den Server und macht Ihre Anwendung reaktionsschneller, indem es Daten aus dem Cache bereitstellt.

3. Echtzeitdaten

Apollo Client unterstützt Abonnements, mit denen Sie auf Datenaktualisierungen in Echtzeit warten können. Dies ist nützlich für die Erstellung von Echtzeitanwendungen wie Chat-Apps oder Live-Dashboards.

4. Deklarativer Datenabruf

Apollo Client ermöglicht Ihnen das deklarative Abrufen von Daten mithilfe von GraphQL-Abfragen, wodurch Ihre React-Komponenten einfacher und leichter nachvollziehbar werden.

5. Optimistische Benutzeroberfläche

Apollo Client bietet Unterstützung für optimistische UI-Updates, sodass Sie die UI aktualisieren können, bevor der Server die Änderung bestätigt. Dies führt zu einem reibungsloseren Benutzererlebnis.

---

3. Beispiel einer vollständigen Apollo-Client-Anwendung

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

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

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

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

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;

---

4. Fazit

Apollo Client ist ein leistungsstarkes Tool zum Verwalten von GraphQL-Daten in React-Anwendungen. Es bietet integrierte Unterstützung für das Abfragen und Ändern von Daten, Caching, Paginierung und Datenaktualisierungen in Echtzeit. Durch die Verwendung von Apollo Client können Sie Ihre Datenverwaltungsprozesse optimieren, die Leistung verbessern und sich auf die Erstellung Ihrer Anwendung konzentrieren, anstatt komplexe Zustandsverwaltungssysteme zu verwalten.

---

Das obige ist der detaillierte Inhalt vonApollo-Client für GraphQL-Statusverwaltung in React: Vereinfachen des Datenabrufs und -cachings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!