Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass die Mission der Apollo Client-Entwickler darin besteht, dieses Tool zur modernsten und bequemsten Lösung für die Verwaltung des Status von React-Anwendungen zu machen. Die React-Community entwickelt und beherrscht neue und effektive Wege zur Entwicklung von Benutzeroberflächen. Die Entwickler von Apollo Client bemühen sich sicherzustellen, dass ihr Projekt alle relevanten Elemente der React-Welt unterstützt. In Anlehnung an diese Tradition stellen Apollo Client-Entwickler eine neue Version des Systems vor, die mit React
Hook- Unterstützung ausgestattet ist.
Haken wurden in
Reaktion 16.8 eingeführt . Dies ist ein neuer Mechanismus, mit dem Sie statusbehaftete Komponenten erstellen können, ohne sich mit Problemen befassen zu müssen, die für klassenbasierte Komponenten spezifisch sind. Jetzt enthält Apollo Client drei Hooks, die in Anwendungen verwendet werden können - an allen Stellen, an denen Komponenten höherer Ordnung oder Render-Requisiten-Mechanismen verwendet werden. Dies sind die Hooks useQuery,
useMutation und
useSubscription . Diese Hooks sind leicht zu erlernen und bieten viele Vorteile gegenüber der bereits vorhandenen API. Dies betrifft insbesondere die Reduzierung der Größe des Anwendungspakets und die Reduzierung der Menge an Boilerplate-Code.
Erste Schritte
Wenn Sie ein neues Apollo-Projekt erstellen möchten, empfehlen wir, das folgende Paket zu installieren, nachdem Sie Ihre Apollo Client-Instanz konfiguriert haben:
npm install @apollo/react-hooks
Dieses Paket exportiert die
ApolloProvider Komponente, mit der der Apollo-Client mit einer React-Anwendung verbunden wird. Ebenso wurde die Arbeit mit der alten API organisiert.
Wenn Sie bereits ein Projekt haben, das Apollo verwendet, haben Sie mehrere Möglichkeiten, zu Hooks zu wechseln. Die Wahl einer bestimmten Methode hängt davon ab, wie genau Sie den Übergang durchführen möchten. Details dazu finden Sie
hier .
Warum sind Haken die Zukunft?
Apollo Client unterstützt weiterhin APIs, die auf Komponenten höherer Ordnung und Render-Requisiten basieren. Diese APIs werden noch einige Zeit im System vorhanden sein. Wir glauben, dass Hooks in Zukunft der beste Mechanismus zum Laden von Daten mit dem Apollo Client sein werden. Obwohl diejenigen, die Apollo bereits verwenden, jetzt nicht zu Hooks wechseln müssen, sollten sie Hooks für neue Komponenten verwenden. Diese Empfehlung hat mehrere Gründe, die wir jetzt betrachten werden.
▍Wenn Sie Hooks verwenden, benötigen Sie weniger Code, um mit Daten zu arbeiten
Hooks reduzieren die Menge an Boilerplate-Code, die für die Arbeit mit Daten verwendet wird. Dies führt zu einer Verringerung der Größe der Komponenten und zu der Tatsache, dass solche Komponenten leichter zu verstehen sind. Infolgedessen müssen sich Entwickler nicht mehr mit der Anordnung von Komponenten höherer Ordnung befassen oder die komplexe Logik von Render-Requisiten analysieren. Zum Laden von Daten reicht es aus, die einzige
useQuery Funktion
useQuery :
const LAST_LAUNCH = gql` query lastLaunch { launch { id timestamp } } `; export function LastLaunch() { const { loading, data } = useQuery(LAST_LAUNCH); return ( <div> <h1>Last Launch</h1> {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>} </div> ); }
Hier wird das Laden von Daten mit dem Apollo Client
useQuery Hook gezeigt
useQuerySchauen Sie sich
diese Tutorial-Anwendung an, in der Sie ein funktionierendes Beispiel für die Verwendung von Apollo Client-Hooks sehen.
▍Mehrfachmutationen
Wenn Sie mehrere Mutationen in einer einzelnen Komponente ausführen, kann die Verwendung von Komponenten höherer Ordnung oder des Render-Requisiten-Mechanismus zu schwer verständlichem Code führen. Die Verwendung der API-Render-Requisite, die Konstruktion von Strukturen, die aus ineinander eingebetteten
Mutation bestehen, vermittelt einen falschen Eindruck von strukturiertem Code und seiner klaren Hierarchie. Der neue
useMutation Hook umgeht dieses Problem vollständig. Tatsache ist, dass seine Verwendung auf einen einfachen Funktionsaufruf reduziert wird. Das folgende Beispiel zeigt, wie mehrere Mutationen und Abfragen miteinander interagieren können. All dies geschieht innerhalb derselben Komponente:
function Message() { const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE); const [deleteMessage] = useMutation(DELETE_MESSAGE); const { data } = useQuery(GET_MESSAGE); return ( <div> <p> {loading ? 'Loading ...' : `Message: ${data && data.message ? data.message.content : ''}`} </p> <p> <button onClick={() => saveMessage()}>Save</button> <button onClick={() => deleteMessage()}>Delete</button> </p> </div> ); }
Hier wird der
useMutation Hook verwendet. Hier können Sie mehrere Mutationen in Aktion
sehen . Diese Beispielanwendung enthält auch eine ähnliche Komponente, die mit Render-Requisiten erstellt wurde. Dies gibt Ihnen die Möglichkeit, diese Komponente mit der mit Hooks erstellten Komponente zu vergleichen.
▍ Verbesserte TypeScript-Unterstützung
Es ist kein Geheimnis, dass wir große TypeScript-Fans sind. Die Funktionen der neuen Hooks passen gut zu den automatischen Typdefinitionen, die von der Apollo CLI generiert werden. Dies erleichtert das Schreiben von typsicherem Code für React-Komponenten erheblich. So sieht das Laden von Daten mit den
useQuery und TypeScript aus:
import { RocketData, RocketVars } from './types'; const GET_ROCKET_INVENTORY = gql` query getRocketInventory($year: Int!) { rocketInventory(year: $year) { id year } } `; export function RocketInventoryList() { const { loading, data } = useQuery<RocketData, RocketVars>( GET_ROCKET_INVENTORY, { variables: { year: 2019 } } ); return (); }
Apollo- und TypeScript-Hooks erleichtern die Entwicklung stark typisierter React-Komponenten.
Zusätzliche Apollo Client-Verbesserungen für React-Entwickler
Obwohl sich diese Version von Apollo auf neue Hooks konzentriert, können wir über einige weitere interessante neue Funktionen sprechen.
▍ Reduzierung der Bündelgröße um 50%
Während die Größe des minimierten und komprimierten gzip-Pakets React
react-apollo@2 10,6 KB beträgt, beträgt die Größe des React
react-apollo@3 Pakets nur
7,8 KB . Wenn das Paket
@apollo/react-hooks für Sie ausreicht, wird die Größe des Bundles auf nur
5,1 KB reduziert. Dies ergibt eine Einsparung von 50% im Vergleich zu
react-apollo@2 .
▍ Verzögerte Abfrageausführung
Der
useQuery führt seine Abfrage zum Zeitpunkt des
useQuery der Funktion aus. Dies ist jedoch genau das Verhalten des Systems, das nicht immer benötigt wird. Stellen Sie sich beispielsweise ein Feld zur Eingabe einer Suchabfrage vor, in dem der Benutzer aufgefordert wird. Möglicherweise müssen Sie eine Komponente mit einem solchen Feld anzeigen, um zu akzeptieren, was der Benutzer eingibt. Gleichzeitig wird die Ausführung der Abfrage an den Suchserver jedoch verzögert, bis der Benutzer beginnt, etwas in das Feld einzugeben. Um dieses Szenario zu implementieren, können Sie den
useLazyQuery Hook verwenden, der ein Tupel mit der
execute an der zweiten Position zurückgibt:
const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY);
Die Anforderung wird erst ausgeführt, wenn Sie die
execute aufrufen. Zu diesem Zeitpunkt wird die Komponente erneut gerendert und das mit
useQuery implementierte übliche Abfrageausführungsschema angewendet.
▍Neue API-Dokumentation
Wir haben die Apollo Client-
Dokumentation durch Hinzufügen von Hook-Informationen aktualisiert. Wir empfehlen, sie von Personen zu verwenden, die gerade mit unserem System begonnen haben. Trotzdem haben wir keine Informationen aus der Dokumentation über die Arbeit mit Komponenten höherer Ordnung und mit dem Render-Requisiten-Mechanismus entfernt. In den Codebeispielen, die in der Dokumentation zu finden sind, können Sie jetzt das neue Dropdown-Menü verwenden, mit dem Sie zwischen Code wechseln können, der die Lösung des gleichen Problems anhand des Ansatzes zeigt, den der Leser am besten mag.
Verschiedene Codeoptionen finden Sie in der Dokumentation
Zusammenfassung
Die Entwickler von Apollo Client sagen, dass sie an React am meisten mögen, weil das Kernteam der Entwickler dieser Bibliothek und die Community der Enthusiasten ständig bemüht sind, die Benutzerfreundlichkeit von React aus Sicht eines Programmierers zu verbessern. Das Auftreten von Haken, die absolut jedem empfohlen werden, ist eines der hellsten Beispiele für ein solches Streben.
Wir hoffen, dass die in Apollo Client eingeführten React Hooks diejenigen ansprechen, die dieses Projekt zur Entwicklung ihrer Anwendungen verwenden.
Liebe Leser! Verwenden Sie Apollo Client?
