Apollo-Client-Setup für graphQL-Anfragen in React

Einführung

In diesem Artikel wird gezeigt, wie man eine React-App für graphQL-Anfragen konfiguriert. Hierzu wird die APollClient-Bibliothek verwendet. Die Idee besteht darin, die Konfiguration der App und ein Beispiel für das Stellen von Anfragen vorzustellen.

libs

• @apollo/client: Bibliothek, mit der Sie den Status verwalten und Anfragen mit GraphQL stellen können
• graphql: Bibliothek, die das Parsen von GraphQL-Abfragen ermöglicht

So fügen Sie die Bibliotheken dem Projekt hinzu:

Garn add @apollo/client graphql --dev

Einstellungen

Als nächstes zeige ich, wie man ApolloClient konfiguriert, um graphQL-Anfragen zu ermöglichen.
Zunächst wird ein ApolloClient-Kontext erstellt, sodass 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 der APolloClient initialisiert und übergibt die Informationen darüber, wo er vom definierten Link ankommt, sowie den Cache einer Instanz von InMemoryCache, den der APolloClient zum Zwischenspeichern der Ergebnisse der Abfragen verwendet.
In httpLink wird die URI der graphQL-API übergeben und die notwendigen Header für die Anfragen definiert, in diesem Fall wird einer verwendet, der ein Bearer-Token verwendet.
Abschließend werden Rückgabe und Export definiert, um die Verwendung innerhalb der Anwendung zu ermöglichen.

Angesichts der Tatsache, dass es sich um eine App handelt, die nach der Anmeldung das Token im localStorage speichert, und Sie generell graphQL-Anfragen für die gesamte App zulassen möchten, wird der ApolloProvider verwendet, der in der Datei oben definiert wurde:

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

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

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

In diesem Fall des Beispiels wird das Token aus localStorage entnommen (in diesem Beispiel, als ob es dort mit dem @tokenId-Schlüssel gespeichert wäre) und die URI wird in der Datei selbst definiert und an ApolloProvider übergeben. Der AppContent wird als untergeordnetes Element des ApolloProviders übergeben, sodass alles, was darin enthalten ist, also die App als Ganzes, graphQL-Anfragen stellen kann.
In der Praxis könnte der graphqlURI bei unterschiedlichen Test- und Produktionsumgebungen aus einer Umgebung stammen, die mit der URI jeder Umgebung definiert ist.

Ausgehend von einer Abfrage namens „Benutzer“, die die API hat und die den Namen und Beruf des Benutzers zurückgibt, wird die 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 durch die React-App und dem Benutzernamen der Abfrage, die in der API gesucht wird.

In der Datei, die den 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, gibt „loading true“ zurück, wenn die Anfrage nicht abgeschlossen ist, gibt einen Fehler zurück, wenn die Anfrage fehlschlägt, und gibt Daten zurück, wenn die Anfrage erfolgreich abgeschlossen wurde. Solange das Datum nicht zurückgegeben wurde, erscheint die Meldung Loading... auf dem Bildschirm. Wenn die Anfrage mit einem Fehler endet, wird die Meldung „Anfrage fehlgeschlagen“ angezeigt. Wenn die Anfrage erfolgreich abgeschlossen wurde, werden der Name und der Beruf des Benutzers (Name und Beruf) auf dem Bildschirm angezeigt.
Auf diese Weise ist ApolloClient für graphQL-Anfragen konfiguriert und einsatzbereit.

Abschluss

Die Idee bestand darin, vorzustellen, wie APolloClient konfiguriert wird, um React-Apps das Durchführen von GraphQL-Aufrufen zu ermöglichen, und die Definition des Kontexts, die Verwendung dieses Kontexts und ein Beispiel für die Ausführung einer Abfrage zu zeigen.
Folgen Sie dem Link zur ApolloClient-Dokumentation für diejenigen, die tiefer eintauchen möchten.

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