Richten Sie den Apollo-Client für graphQL-Anfragen in React ein

Einführung

In diesem Artikel wird gezeigt, wie Sie mithilfe der ApolloClient-Bibliothek eine React-App für graphQL-Anfragen einrichten. Ziel ist es, zu zeigen, wie die App konfiguriert wird, und ein Beispiel dafür zu geben, wie Anfragen gestellt werden.

Bibliotheken

• @apollo/client: Bibliothek, die die Zustandsverwaltung ermöglicht und GraphQL-Anfragen stellt
• graphql: Bibliothek, die das Parsen von GraphQL-Abfragen ermöglicht

So fügen Sie die Bibliotheken zum Projekt hinzu:

Garn add @apollo/client graphql --dev

Konfiguration

Im Folgenden zeige ich, wie man ApolloClient konfiguriert, um graphQL-Anfragen zu ermöglichen.
Zunächst wird ein ApolloClient-Kontext erstellt, damit alles, was als seine untergeordneten Elemente enthalten ist, graphQL-Anfragen stellen kann:

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

function ExampleApolloProvider({ children, token, uri }) {
  const httpLink = new HttpLink({
    uri: uri,
    headers: {
      authorization: `Bearer ${token}`,
    },
  })

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })

  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

export { ExampleApolloProvider as ApolloProvider }

Im Const-Client wird ApolloClient initialisiert und gibt den Endpunkt über den definierten Link und den Cache mithilfe einer Instanz von InMemoryCache an, die ApolloClient zum Zwischenspeichern von Abfrageergebnissen verwendet.
In httpLink wird die URI der graphQL-API zusammen mit den notwendigen Headern für die Anfragen festgelegt. In diesem Beispiel wird ein Bearer-Token verwendet.
Abschließend werden Rückgabe und Export definiert, um die Verwendung innerhalb der App zu ermöglichen.

Da es sich hierbei um eine App handelt, bei der das Token nach der Anmeldung im localStorage gespeichert wird und das Ziel darin besteht, graphQL-Anfragen in der gesamten App zu ermöglichen, wird der in der vorherigen Datei definierte ApolloProvider verwendet:

import { ApolloProvider } from './contexts/ApolloContext'
import AppContent from './components/AppContent'

const token = localStorage.getItem('@tokenId')
// endpoint of your graphQL api
const graphqlURI = 'https://www.example.com'

const App = () => {
  return (
    <ApolloProvider token={token} uri={graphqlURI}>
      <AppContent />
    </ApolloProvider>
  )
}

In diesem Beispiel wird das Token aus localStorage abgerufen (in diesem Fall, als ob es mit dem Schlüssel @tokenId gespeichert wäre), und die URI wird in derselben Datei definiert und dann an ApolloProvider übergeben. Der AppContent wird als untergeordnetes Element des ApolloProviders übergeben, was bedeutet, dass alles, was darin enthalten ist, die gesamte App, graphQL-Anfragen stellen kann.
In der Praxis könnte der graphqlURI bei unterschiedlichen Test- und Produktionsumgebungen aus einer Umgebungsvariablen stammen, wobei die URI für jede Umgebung entsprechend definiert wird.

Beginnend mit einer Abfrage namens „Benutzer“, die von der API bereitgestellt wird und den Namen und Beruf des Benutzers zurückgibt, wird eine Datei mit der aufzurufenden Abfrage definiert:

import { gql } from '@apollo/client'

const GET_USER = gql`
  query GetUser {
    user {
      name
      occupation
    }
  }
`

export default GET_USER

GET_USER entspricht dem Aufruf der Abfrage in der React-App, und user ist der Name der Abfrage, die von der API verwendet werden soll.

In der Datei, die AppContent definiert, wird die GET_USER-Abfrage aufgerufen und ihre Rückgabe verwendet:

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

function ExampleApolloProvider({ children, token, uri }) {
  const httpLink = new HttpLink({
    uri: uri,
    headers: {
      authorization: `Bearer ${token}`,
    },
  })

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })

  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

export { ExampleApolloProvider as ApolloProvider }

Der useQuery-Hook führt die in GET_USER definierte Abfrage aus und gibt den Ladevorgang als „true“ zurück, während die Anforderung noch ausgeführt wird. Er gibt einen Fehler zurück, wenn die Anforderung fehlschlägt, und gibt Daten zurück, wenn die Anforderung erfolgreich abgeschlossen wurde. Bis die Daten zurückgegeben werden, wird die Meldung Loading... auf dem Bildschirm angezeigt. Wenn die Anfrage mit einem Fehler endet, wird die Meldung „Anfrage fehlgeschlagen“ angezeigt. Wenn die Anfrage erfolgreich ist, werden der Name und der Beruf des Benutzers (Name und Beruf) auf dem Bildschirm angezeigt.
Auf diese Weise ist der ApolloClient für graphQL-Anfragen konfiguriert und einsatzbereit.

Abschluss

Die Idee bestand darin, zu demonstrieren, wie ApolloClient so konfiguriert wird, dass eine React-App graphQL-Aufrufe durchführen kann, und dabei die Definition des Kontexts, die Verwendung dieses Kontexts und ein Beispiel für die Ausführung einer Abfrage zu zeigen.
Hier ist der Link zur ApolloClient-Dokumentation für alle, die tiefer eintauchen möchten.

Das obige ist der detaillierte Inhalt vonRichten Sie den Apollo-Client für graphQL-Anfragen in React ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!