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!