L'auteur du matériel, dont nous publions la traduction aujourd'hui, affirme que la mission des développeurs d'Apollo Client est de faire de cet outil la solution la plus moderne et la plus pratique pour gérer l'état des applications React. La communauté React développe et maîtrise de nouvelles façons efficaces de développer des interfaces utilisateur. Les créateurs d'Apollo Client s'efforcent de s'assurer que leur projet prend en charge tous les plus pertinents du monde React. Suivant cette tradition, les développeurs d'Apollo Client introduisent une nouvelle version du système équipée du support de
crochet React.
Des crochets ont été introduits dans
React 16.8 . Il s'agit d'un nouveau mécanisme qui vous permet de créer des composants avec état sans avoir à gérer des problèmes spécifiques aux composants basés sur les classes. Maintenant, Apollo Client comprend trois crochets qui peuvent être utilisés dans des applications - dans tous les endroits où des composants d'ordre supérieur ou des mécanismes d'accessoires de rendu sont utilisés. Ce sont les hooks useQuery,
useMutation et
useSubscription . Ces crochets sont faciles à apprendre, ils présentent de nombreux avantages par rapport à l'API préexistante. En particulier, cela concerne la réduction de la taille du bundle d'applications et la réduction de la quantité de code passe-partout.
Pour commencer
Si vous prévoyez de créer un nouveau projet Apollo, nous vous recommandons d'installer le package suivant après avoir configuré votre instance de client Apollo:
npm install @apollo/react-hooks
Ce package exporte le composant
ApolloProvider , qui est utilisé pour connecter le client Apollo à une application React. De la même manière, le travail était organisé à l'aide de l'ancienne API.
Si vous avez déjà un projet qui utilise Apollo, cela signifie que vous avez plusieurs façons de passer aux hooks. Le choix d'une méthode spécifique dépend de la manière exacte dont vous souhaitez effectuer la transition. Des détails à ce sujet peuvent être trouvés
ici .
Pourquoi les crochets sont-ils l'avenir?
Apollo Client prend toujours en charge les API basées sur des composants d'ordre supérieur et des accessoires de rendu. Ces API seront présentes dans le système pendant un certain temps encore. Nous pensons qu'à l'avenir, les hooks seront le meilleur mécanisme pour charger des données à l'aide du client Apollo. Bien que ceux qui utilisent déjà Apollo n'aient pas à passer aux crochets pour le moment, ils devraient utiliser des crochets pour les nouveaux composants. Cette recommandation a plusieurs raisons que nous allons maintenant considérer.
HenLorsque vous utilisez des crochets, vous avez besoin de moins de code pour travailler avec les données
Les crochets réduisent la quantité de code passe-partout utilisé pour travailler avec les données. Cela conduit à une réduction de la taille des composants et au fait que ces composants sont plus faciles à comprendre. En conséquence, les développeurs n'auront plus besoin de se pencher sur la façon dont les composants d'ordre supérieur sont organisés, ni d'analyser la logique complexe des accessoires de rendu. Pour charger des données, il suffit d'appeler la seule fonction
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> ); }
useQuery chargement des données à l'aide du crochet
useQuery Apollo Client
useQueryJetez un œil à
cette application de didacticiel où vous pouvez voir un exemple de travail d'utilisation des crochets Apollo Client.
▍Multiples mutations
Lorsque vous effectuez plusieurs mutations dans un seul composant, l'utilisation de composants d'ordre supérieur ou du mécanisme d'accessoires de rendu peut conduire à un code difficile à comprendre. L'utilisation de l'API render prop, la construction de structures constituées de composants de
Mutation imbriqués les uns dans les autres, donne un faux sens du code structuré et de sa hiérarchie claire. Le nouveau crochet
useMutation contourne complètement ce problème. Le fait est que son utilisation se réduit à un simple appel de fonction. L'exemple suivant montre comment plusieurs mutations et requêtes peuvent interagir entre elles. Tout cela se passe au sein du même composant:
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> ); }
Le hook
useMutation est utilisé
useMutation . Vous pouvez voir plusieurs mutations en action
ici . Cet exemple d'application contient également un composant similaire créé à l'aide d'accessoires de rendu. Cela vous donne la possibilité de comparer ce composant avec celui créé à l'aide de crochets.
Support Prise en charge améliorée de TypeScript
Ce n'est un secret pour personne que nous sommes de grands fans de TypeScript. Les capacités des nouveaux crochets vont bien avec les définitions de type automatiques générées par la CLI Apollo. Cela facilite grandement l'écriture de code de type sécurisé pour les composants React. Voici à quoi ressemble le chargement des données à l'aide des crochets
useQuery et TypeScript:
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 (); }
Les crochets Apollo et TypeScript facilitent le développement de composants React fortement typés.
Améliorations supplémentaires du client Apollo pour les développeurs React
Bien que cette version d'Apollo se concentre sur de nouveaux crochets, nous pouvons parler de nouvelles fonctionnalités plus intéressantes.
▍ Réduire la taille du paquet de 50%
Alors que la taille du paquet gzip minifié et compressé react
react-apollo@2 est de
10,6 Ko , la taille du paquet
react-apollo@3 n'est que de
7,8 Ko . De plus, si le package
@apollo/react-hooks vous suffit, la taille du bundle est réduite à seulement
5,1 Ko . Cela donne 50% d'économies par rapport à
react-apollo@2 .
▍ Exécution de requête retardée
Le
useQuery exécute sa requête au moment où la fonction est appelée. Mais c'est précisément le comportement du système qui n'est pas toujours nécessaire. Imaginez, par exemple, un champ pour entrer une requête de recherche qui donne des invites à l'utilisateur. Vous devrez peut-être afficher un composant avec un tel champ prêt à accepter ce que l'utilisateur entre. Mais en même temps, l'exécution de la requête sur le serveur de recherche sera retardée jusqu'au moment où l'utilisateur commencera à saisir quelque chose dans le champ. Pour implémenter ce scénario, vous pouvez utiliser le hook
useLazyQuery , qui renvoie un tuple avec la fonction d'
execute en deuxième position:
const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY);
La demande ne sera pas exécutée tant que vous n'aurez pas appelé la fonction d'
execute . À ce stade, le composant sera à nouveau rendu et le schéma d'exécution de requête habituel implémenté à l'aide de
useQuery sera appliqué.
▍Nouvelle documentation API
Nous avons mis à jour la
documentation du client Apollo en ajoutant des informations sur les hooks. Nous recommandons qu'ils soient utilisés par ceux qui viennent de commencer à travailler avec notre système. Cependant, malgré cela, nous n'avons pas supprimé d'informations de la documentation sur la façon de travailler avec des composants d'ordre supérieur et avec le mécanisme d'accessoires de rendu. Dans les exemples de code qui peuvent être trouvés dans la documentation, vous pouvez maintenant utiliser le nouveau menu déroulant qui vous permet de basculer entre le code qui illustre la solution au même problème en utilisant l'approche que le lecteur préfère.
Diverses options de code disponibles dans la documentation
Résumé
Les créateurs d'Apollo Client disent que ce qu'ils aiment le plus à propos de React, c'est que l'équipe centrale de développeurs de cette bibliothèque et la communauté de passionnés qui l'entourent s'efforcent constamment d'améliorer la convivialité de React du point de vue d'un programmeur. L'apparition de crochets, qui est recommandée à absolument tout le monde, est l'un des exemples les plus brillants d'une telle aspiration.
Nous espérons que les hooks React introduits dans Apollo Client plairont à ceux qui utilisent ce projet pour développer leurs applications.
Chers lecteurs! Utilisez-vous le client Apollo?
