Comment consommer Github GraphQL avec Relay Modern

React / Relay / GraphQL

Salut! Dernièrement, je fais quelque chose de vraiment génial. J'étudie des technologies de pointe. Cette semaine, j'ai trouvé une grande entreprise appelée entria. Certains des meilleurs développeurs au Brésil y travaillent. Les gars ont amené React Conf au Brésil, une conférence extraordinaire sur React. Ils utilisent beaucoup de React / Relay / GraphQL dans leurs projets. En parlant à l'un de ces gars, j'ai décidé de créer un projet simple en utilisant cette pile. Cet article reflète ce que j’ai appris en le faisant.

Quoi qu'il en soit, j'ai créé un projet en utilisant React / Relay Modern / etc. Si vous ne savez pas comment utiliser Relay Modern dans un projet réel ou si vous souhaitez savoir comment intégrer Relay Modern à l’API Github GraphQL, alors, mon ami, vous êtes au bon endroit.

Dans cet article, nous aborderons les points suivants:

  • Étape 1: Préparation du projet
  • Étape 2: Configuration du relais sur le projet
  • Étape 3: Afficher mes abonnés sur Github
  • Étape 4: Déclaration des besoins en données
  • Étape 5: Câbler tout
Remarque: Vous devez posséder des connaissances de base dans React / Relay / GraphQL pour bien comprendre ce message. Mais ne vous inquiétez pas trop, essayez de mettre en œuvre et amusez-vous! \ o /

1. Préparer le projet

Création de l'application

La première étape que j’ai faite consistait à créer le projet à l’aide de create-react-app, un outil de ligne de commande simple permettant de créer des applications React sans aucune surcharge de la configuration.

# Si nécessaire, installez `create-react-app`
npm installer -g créer-réagir-application
# J'ai créé une application React appelée `react-relay-modern-github` (et y naviguer)
créer-réagir-app réagir-relais-moderne-github
cd react-relay-modern-github

Serveur

Depuis que j’utilise l’API Github GraphQL, je n’ai pas à en créer une à partir de rien. Vous pouvez vérifier ici.

2. Configuration du relais sur le projet

Une fois le projet créé, je dois le connecter à l'API Relay sur le serveur. J'ai pris les mesures suivantes pour y parvenir:

  1. Dépendances de relais ajoutées
  2. Ejecté de create-react-app pour configurer Babel
  3. Ajout du plugin de relais sur la configuration de Babel
  4. Configuration de l'environnement de relais

Vérifions chaque étape dans les détails.

2.1 Ajouter des dépendances de relais

Je suis allé relayer le site Web moderne pour vérifier quelles dépendances je devais installer. En gros, ce que j'ai fait était:

fil ajouter réagir-relais
fil ajouter relais-compilateur --dev
fil ajouter babel-plugin-relay --dev

2.2 Eject create-react-app

Le projet create-react-app vous masque toutes les configurations d’outils de construction et vous offre un point de départ confortable. Cependant, dans mon cas, je devais créer des configurations Babel personnalisées pour que Relay fonctionne correctement. Il me fallait donc éjecter de create-react-app.

Dans le terminal, j'ai utilisé la commande suivante:

éjection du fil

2.3 Ajouter le plugin de relais sur la configuration de Babel

Après avoir éjecté le projet, j'ai dû ajouter au processus de construction le relais babel-plugin-relais que j'avais installé à l'étape précédente. Sur le package.json, j'ai ajouté le plugin relay en modifiant la section babel comme suit:

C’est la configuration de Babel.

2.4. Configurer l'environnement de relais

L'environnement Relay regroupe la configuration, le stockage en cache et la gestion du réseau dont Relay a besoin pour fonctionner.

Un environnement de relais doit être instancié avec deux composants principaux:

  1. Un réseau qui sait à quel serveur GraphQL il peut parler
  2. Un magasin qui s'occupe de la mise en cache

Pour ce faire, j'ai créé un nouveau fichier dans le répertoire src appelé createRelayEnvironment.js et y ai ajouté le code suivant:

Ce code provient de l'exemple de la documentation et n'a été que légèrement personnalisé.

Discutons rapidement du code ci-dessus pour mieux comprendre ce qui se passe:

  1. J'ai d'abord importé les modules JS requis pour instancier et configurer l'environnement.
  2. Ici, j'instancie le magasin requis qui stockera les données mises en cache.
  3. Maintenant, je crée un réseau qui connaît mon serveur GraphQL auparavant, il est instancié avec une fonction qui retourne la promesse d’un appel réseau à l’API GraphQL - ici, c’est fait avec fetch.
  4. Vous pouvez voir sur la ligne 8 que j'utilise la chaîne pour l'URL GraphQL de github.
  5. Avec le magasin et le réseau disponibles, j'ai pu instancier l'environnement réel.
  6. Enfin, je devais exporter l'environnement à partir de ce module.

3. Afficher mes followers sur Github

J'ai d'abord créé un nouveau fichier appelé User.js dans le répertoire src / components / user qui représentera un utilisateur individuel:

Ensuite, j'ai ajouté un autre fichier dans le répertoire src / components / users-grid et appelé UsersGrid.js:

Comme vous pouvez le constater, ce composant UsersGrid affiche simplement une liste de composants User en effectuant un mappage sur un tableau d'utilisateurs.

Après la création des composants, j'ai dû déclarer les exigences de données pour obtenir les données du serveur.

4. Déclaration des besoins en données

Pour déclarer les dépendances de données aux côtés des composants React, utilisez l'API FragmentContainer.

ViacreateFragmentContainer - un composant React d’ordre supérieur qui permet aux composants React de coder leurs exigences en matière de données constitue le principal moyen de déclarer les exigences en matière de données.

Semblable à la façon dont la méthode de rendu d’un composant React ne modifie pas directement les vues natives, les conteneurs Relay n’extraient pas directement les données. Au lieu de cela, les conteneurs déclarent une spécification des données nécessaires au rendu. Relay garantit que ces données sont disponibles avant le rendu.

La fonction createFragmentContainer est un composant d'ordre supérieur qui prend deux arguments:

  1. Un composant React pour lequel vous voulez déclarer des dépendances de données
  2. Dépendances de données écrites sous la forme d'un fragment GraphQL et d'un wrapper à l'aide de la fonction graphql

Donc, à ce stade, j'ai créé un nouveau fichier pour représenter chaque conteneur de fragment (Relay) associé aux deux composants que j'ai ajoutés auparavant. J'ai d'abord créé un nouveau fichier dans le composant User nommé User.relay.js:

Le composant User doit avoir accès au nom et à l'avatarUrl d'un utilisateur.

Remarque: Une chose importante ici est qu'il existe une convention de nommage pour les fragments que j'ai créés! Chaque fragment doit être nommé en fonction du fichier et de l'accessoire à injecter dans le composant: _ .

Dans mon cas, le fichier s'appelle User.js et l'accessoire dans le composant devrait s'appeler utilisateur. Je me retrouve donc avec User_user pour le nom du fragment.

J'ai fait les mêmes étapes avec le composant UsersGrid avec un fichier appelé UsersGrid.relay.js:

Semblable au composant User, je transmets le composant UsersGrid avec ses exigences en matière de données à createFragmentContainer. UsersGridneeds accède à une liste d'utilisateurs. Je demande simplement que les 10 premiers utilisateurs s'affichent. Il est également possible de mettre en œuvre une approche de pagination appropriée.

Notez que je suis à nouveau conforme à la même convention de nommage et que j’ai nommé le fragment UsersGrid_viewer. UsersGrid.js est le nom du fichier et viewer est l'accessoire que vous attendez du composant.

Je réutilise également le fragment User_user que j'ai écrit dans User.js parce que UsersGrid est plus élevé dans l'arborescence du composant React (et du conteneur Relay), il est donc responsable d'inclure tous les fragments de ses enfants!

Remarque: j’ai décidé de séparer le fichier de composant de la configuration de relais du composant car il était plus facile de créer des histoires de story-story liées uniquement au composant lui-même et à rien d’autre.

5. Câbler tout

J'ai utilisé QueryRenderer pour tout câbler.

QueryRenderer est la racine d'un arbre de relais. Il prend une requête, récupère les données et appelle le callback de rendu avec les données.

Comme ce type est la racine de l’arbre de relais, je devais l’utiliser dans mon composant racine, qui dans mon cas était le fichier App.js. Voici mon App.js après avoir ajouté QueryRenderer:

Comme vous pouvez le voir aux lignes 11 à 15, j'ai rédigé la requête racine. Remarquez comment nous utilisons maintenant le fragment UsersGrid_viewer de UsersGridcomponent.

Il ne manque qu’une étape. J'avais besoin de compiler le code GraphQL. J’ai déjà installé le compilateur de relais, je vais donc maintenant l’utiliser.

Obtenir le schéma et compiler le code graphQL

Puisque nous utilisons l’API GraphQL de github, nous devons avoir accès au schéma complet de GraphQL. Pour ce faire, j'utilise ce code pour obtenir le schéma et créer le fichier dont j'avais besoin:

J'ai également modifié le fichier package.json pour compiler et exécuter le code ci-dessus, comme vous pouvez le voir ici:

Enfin, si vous lancez un fil, vous pourrez tester l’application.

Remarque: vous devez créer un jeton github pour pouvoir exécuter l'application. Ce lien vous montre comment faire cela.

Je pense que c’est tout. Vous pouvez vérifier ce que j'ai fait dans ma page github. Mon exemple humble est ici. S'il vous plaît, laissez-moi savoir vos pensées.