Introduction à GraphQL avec Prisma (v1)

1. Introduction et ce que ce cours aborde: Bienvenue dans ce cours. Je suis heureux de vous enseigner l'une des technologies de développement Web les plus demandées en ce moment, à savoir GraphQL. GraphQL est une façon moderne de créer des API pour créer le back-end de nos projets. Il fournit essentiellement une syntaxe simple à utiliser pour obtenir les données exactes que nous voulons à notre front-end. Nous avons disons, un site web ou un appareil mobile ou tout autre service. Ce cours d'introduction couvre tous les éléments fondamentaux pour vous initier, tels que la configuration de nos serveurs GraphQL, l'utilisation des requêtes, mutations et abonnements, le fonctionnement des types et les relations entre eux. Résolveurs écrits, comment configurer une vraie base de données et aussi interactivement en utilisant PRISMA, ainsi que beaucoup d'autres que vous trouverez au fil du cours. À la fin de ce cours, vous saurez ce qu'ils sont et comment nous pouvons les appliquer à tous les projets. On ne couvrira pas seulement la théorie ennuyeuse dans ce cours. En fait, à peu près tous les exemples que nous allons couvrir, nous allons en faire un projet de cours. Il s'agit d'un projet basé sur une revue de film où les utilisateurs peuvent créer un avis, basé sur les films de la base de données. Vous apprendrez comment interagir avec le serveur et la base de données, publier des données telles que les nouveaux utilisateurs, les films et les avis, ainsi que comment récupérer les données exactes que nous voulons, telles que les avis de liste pour des utilisateurs particuliers. Comment nous pouvons lier les données relationnelles, telles que les critiques à des films, et aussi à l'utilisateur qui les a créées. Ce cours est destiné aux débutants à GraphQL et aussi PRISMA et même aux nouveaux arrivants à travailler sur le côté serveur. Cependant, je recommanderais au moins une expérience de base de JavaScript ou d'un langage similaire. Cela vous aidera vraiment à passer à travers ce cours. En outre, avoir une compréhension de base du rôle d'un serveur et d'une base de données vous aidera à tirer le meilleur parti de vos progrès tout au long du cours . Nous espérons donc que vous êtes prêt à passer à niveau supérieur en apprenant GraphQL et PRISMA. 2. Qu'est-ce que GraphQL ?: Avant de construire un vrai serveur GraphQL. Je veux prendre un moment pour voir exactement ce qu' est GraphQL et pourquoi devient si populaire. GraphQL a été créé à l'origine sur Facebook et est maintenant un projet open-source. N' est pas un langage de programmation, un framework ou quelque chose comme ça. Il s'agit d'une norme pour construire A-P modernes ou généralement envoyer des données d'un serveur au client. Dans le monde du développement web, il peut permettre l'envoi de données entre un client et un serveur. Un client se trouvant à gauche de cette diapositive. Ce qui peut être n'importe quoi du navigateur d'un ordinateur, smartphone, ou tout autre qui a besoin d'obtenir des données. Cette communication se fait via les requêtes H-T-P et le serveur sur la droite. Ce qui renvoie les données demandées à ces clients. Il s'agit généralement d'un serveur Web pour traiter les demandes des clients et aussi d'une base de données à partir de laquelle le serveur peut obtenir des données si nécessaire avant de le renvoyer au client. Un moyen populaire de permettre au client et au serveur de communiquer est d'utiliser ce qu'on appelle un REST A-P-I. Un A-P-I est un ensemble de règles permettant la communication entre différents logiciels. Dans notre cas, le client et le serveur. grandes entreprises rendent souvent des données accessibles au public via un A-P-I. Par exemple ; Spotify a un A-P-I afin que nous puissions y accéder catalogue de musique. Cela signifie que tout le monde pourrait créer son propre lecteur de musique personnel, puis utiliser les données de Spotify pour obtenir des chansons, lecture, des informations sur les artistes et bien plus encore. Google a aussi beaucoup de A-P-I aussi. Par exemple, autoriser les applications à accéder aux données Google Maps ou créer vos propres sites Web de lecteurs vidéo, puis utiliser des vidéos YouTube en coulisses. A-P traditionnel est souvent appelé REST A-P-Is. Cependant, n'ont certaines limites avec ces A-P-Is. Ils ont généralement plusieurs points de terminaison pour obtenir des données. Par exemple, il s'agit de points de terminaison de base Spotify en haut, qui est un U-R-L. Puis en dessous, nous étendons ce U-R-L pour obtenir plus de données comme un album par l'album/id. Ensuite, en bas, nous pouvons également ajouter des morceaux de barre oblique à cet U-R-L pour obtenir toutes les pistes de cet album particulier. Basé sur notre projet qui sera construit dans ce cours. Disons que nous voulions obtenir des critiques de films pour un utilisateur. En utilisant un REST A-P-I, il se peut que nous devions faire plusieurs demandes à différents points de fin pour obtenir toutes les données dont nous avons besoin, telles que le point de terminaison des utilisateurs, le point de terminaison des critiques et aussi le point de terminaison du film. Selon la façon dont le A-P-I a été structuré. Cela peut se traduire par une plus grande quantité d'informations que nous n'avions besoin. Si seulement on avait besoin du titre du film. peut que nous ayons encore besoin de récupérer toutes les autres données vidéo, telles que l'ID, la description, les informations client, etc. En plus de faire plusieurs demandes, ce qui peut prendre du temps. Bien qu'il n'y ait rien de fondamentalement mal à cette approche, GraphQL nous offre une meilleure alternative. GraphQL n'a qu'un seul point de terminaison, un minimum concerne une requête pour nos données et il a la flexibilité de nous rendre seulement les données exactes dont nous avons besoin. Par exemple, un appareil mobile peut ne pas avoir besoin de récupérer les mêmes données qu'un site Web de bureau en raison de la taille réduite de l'écran. Un petit appareil peut simplement vouloir les critiques informations de base telles que le nom de l'auteur et le titre du film. Alors que l'application de bureau peut également vouloir plus d'informations, telles que l'évaluation du film et la description. Cela peut facilement être réalisé en utilisant GraphQL alors que REST A-P-Is peut avoir mal à offrir la même flexibilité en utilisant ces points de terminaison rigides. Je vais avoir beaucoup de pratique à décrire les données que nous voulons obtenir au cours de ce cours. Cela fait de GraphQL un moyen vraiment flexible, rapide et efficace d'intégrer les données dans nos projets. 3. Ce que nous allons construire: Au fur et à mesure que nous progresserons dans ce cours, nous créerons un projet basé sur une revue de film. L' idée est que nous pouvons créer des utilisateurs, nous pouvons créer des films, puis chaque utilisateur peut créer un avis basé sur le film particulier. Puisque nous utilisons GraphQL qui est un langage de requête pour créer le back-end des sites Web, nous n'allons pas avoir d'interface utilisateur à traiter pour ce projet, mais nous allons utiliser ce que vous pouvez voir ici, et c'est ce qu'on appelle le terrain de jeu GraphQL, qui nous permet d'interagir avec toutes nos données, qu'elles soient stockées dans notre projet ou stockées dans une base de données que nous allons ajouter. Si tout cela semble un peu déroutant et peu familier, qu'avez-vous dit ? Oui, puisque nous obtenons beaucoup de pratique en utilisant une aire de jeux GraphQL comme nous allons. Au fur et à mesure, nous allons créer tout le code dont nous avons besoin pour notre serveur et stocker les données dans notre base de données. Nous allons faire des choses comme effectuer requêtes où nous obtenons des données telles que des films. Voici une liste de tous les films dans notre base de données. Nous allons faire de même pour les utilisateurs. Nous allons écrire tout le code pour nous permettre d'attraper les utilisateurs, et toutes les données associées, telles que l'utilisateur est lié aux critiques et aussi aux commentaires liés à un utilisateur et aussi à un film aussi. Cela nous donnera beaucoup à aller pratiquer l'art, l' art dans les relations entre nos différents types. Nous pouvons également faire des choses telles que saisir les avis par utilisateur et GraphQL est vraiment flexible, ce qui nous permet de ne retirer que les données exactes que nous voulons. Toutes ces données proviennent de notre base de données, structurée comme un objet. Il est facile d'envoyer à n'importe quel front-end, qu'il s'agisse d'un site Web ou d'un appareil mobile. Toutes ces données seront stockées dans une vraie base de données où nous définissons l'interaction prismatique avec notre base de données. Cela nous donne une meilleure représentation visuelle. Nous pouvons voir nos utilisateurs, nos films et toutes les critiques qui sont ajoutées. Nous pouvons également voir toutes les relations. Si nous regardons le film, nous pouvons voir les critiques et combien pour chacun. La même chose pour les utilisateurs. Nous pouvons voir combien d'avis ont été affichés pour chacun d'eux, les connaisseurs, et ensuite nous pouvons également être amenés à cet examen. Retour dans le terrain de jeu, ainsi que la lecture des données de la base de données, va également regarder comment nous pouvons inscrire les utilisateurs, va également regarder comment nous pouvons créer des films, et aussi regarder comment nous pouvons créer des critiques qui sont liés au film et à l'utilisateur. Une autre grande caractéristique de lors de l'utilisation GraphQL est que nous pouvons également utiliser ce qu'on appelle un abonnement. Et cela nous permettra de nous abonner aux données. Chaque fois que les données changent sur le serveur, elles les poussent automatiquement vers notre front-end afin que nous soyons informés de toute modification. C' est idéal pour quelque chose comme un examen. Chaque fois qu'un nouvel avis est créé, créons un avis juste ici. Nous voyons ensuite ces données poussées vers notre front end. Nous pouvons rester au courant des choses au fur et à mesure qu'elles changent. Encore une fois, ne vous inquiétez pas trop de ce que vous voyez ici. Cela nous permettra simplement d'interagir avec les données que nous allons créer au cours de ce cours. Nous ne perdrons pas de temps à nous attaquer à notre nouveau projet. Je vais commencer cela dans la prochaine vidéo. 4. Configurer notre projet et GraphQL-Yoga: Au cours de ce cours, nous allons créer un serveur GraphQL de base de révision de film, que nous avons déjà examiné. Pour commencer, nous devons créer un dossier pour les projets et je veux placer le mien sur le bureau pour un accès facile. Je vais appeler cette revue de tiret de film. Ouvrez-le ensuite dans Visual Studio Code, que j'utilise comme éditeur de texte pour le cours. Ouvrons ceci, puis faites glisser sur le dossier du projet dans le code VS. Vous pouvez bien sûr utiliser n'importe quel éditeur de texte que vous préférez. Avant de faire quoi que ce soit d'autre, vous devez vous assurer que Node est installé sur votre ordinateur. Pour ce faire, ouvrez le navigateur, puis nous devons aller à NodeJs.org. Cliquez sur le téléchargement pour la dernière version. Une fois que cela est installé, nous exécutons ensuite l'installation comme avec n'importe quel téléchargement. Je vais cliquer dessus. Continuez à travers. Doit accepter la licence, puis l'installer sur mon disque dur. Cela ne devrait prendre que quelques instants à installer aussi. Une fois cela fait, effacez cela la façon et puis nous pouvons revenir à Visual Studio Code. Je vais ouvrir un terminal, je vais au terminal, puis au nouveau terminal. En bas, vous voyez que le terminal est maintenant ouvert et nous pouvons exécuter quelques commandes. Le premier veut faire est de vérifier le nœud et NPM a été installé avec succès. Nous le faisons en vérifiant Node-V et cela nous donnera la version de nœud du buck, qui ont installé. Si vous voyez une erreur plutôt qu'un numéro de version, un problème s'est produit lors de l'installation du nœud et vous devez revenir en arrière et le faire d'abord. Nous pourrions également vérifier avec Node Package Manager avec NPM B. Ils devraient également nous donner la version de NPM aura installé et il est livré avec le téléchargement de nœud. Super. A l'intérieur du terminal, nous pouvons lancer NPM dedans. Appuyez sur Entrée et cela va initialiser nos projets. Je vais juste entrer toutes les options, en gardant la plupart des lieux par défaut. Le nom du paquet, j'entre, la description de la version. Celui qui change sur make est plutôt que d'avoir les points d'entrée comme le index.js, je veux des changements à la source, donc src/idex.js, entrez et puis entrez par tous les autres options. Si nous ouvrons la barre latérale, nous pouvons voir à l'intérieur de notre dossier nous avons maintenant un fichier package.json. Ceci contient toutes les informations sur notre projet qui est entré. C' est un fichier Node assez standard et rien de spécifique à GraphQL à ce stade. Ensuite, nous allons créer notre fichier index.js, qui est ajouté comme points d'entrée. Retournez à la barre latérale dans notre éditeur ouvert et créez un nouveau dossier à la racine de notre projet, qui est la source, donc src. Ici, nous pouvons créer notre page d'index, qui est index.js. Puisque GraphQL est une spécification plutôt qu'un langage de programmation réel, une bibliothèque ou autre chose, nous devons attendre pour réellement utiliser GraphQL dans des projets réels. GraphQL en tant que spécification n'est spécifique à aucun langage de programmation. Par conséquent, nous devons utiliser un paquet ou une implémentation pour le nœud, qui utilisera pour ce cours. Celui que j'utilise s'appelle GraphQL Yoga. Il y a bien sûr d'autres alternatives, mais c'est une que je vais utiliser pour ce cours, car il a beaucoup de fonctionnalités et il est facile de se lancer et de fonctionner avec. Allez sur le navigateur et ouvrez chrome. Ensuite, dans un nouvel onglet, je vais chercher GraphQL yoga. Nous pouvons voir que c'est un lien GitHub ici pour GraphQL yoga, qui nous emmène à la documentation. D' autres implémentations sont également disponibles pour, donc nous pouvons utiliser GraphQL, dans d'autres langages ou environnements tels que Python. GraphQL yoga est un serveur GraphQL facile à utiliser et à configurer, ce qui nous permettra de profiter de toutes les fonctionnalités de GraphQL qui auront besoin comme des requêtes, des mutations et des abonnements pour n'en nommer que quelques-uns. Plus dans notre projet jusqu'au terminal, nous pouvons utiliser NPM pour installer ce paquet. NPM, qui est pour installer graphql-yoga. Une fois que cela est installé, nous pouvons utiliser notre fichier index.js. Nous avons déjà commencé à créer. Faites de notre serveur GraphQL. Nous allons commencer dans ce fichier index.js en exigeant le serveur GraphQL. Donc const GraphQL Server, je suis prudent de l'enveloppe ici, c'est égal à exiger, je vais exiger notre paquet de yoga GraphQL, graphql-yoga. Ensuite, nous devons créer une nouvelle instance de ce serveur GraphQL. Je vais appeler cela un nom constant du serveur et définir cela égal à une nouvelle instance de GraphQL Server. Ce serveur GraphQL prend un objet, puis ici passerait dans deux propriétés. Ces propriétés sont appelées TypeDefs et résolveurs. Le premier TypeDefs, puis les résolveurs. Nous pouvons alors ce serveur que nous avons créé et ensuite il appelle la méthode de démarrage. La méthode start prend alors un rappel, qui est une fonction qui exécutera un ceci avant le début de l'enquête. journal de la console simple sera parfait pour l'instant. Transformons cela en une fonction, qui renvoie un journal de console. Ce journal de la console va juste envoyer un message du serveur est en cours d'exécution sur localhost, pause 4000, et là nous allons. C' est notre graphique de base SQL Server maintenant en place. Ensuite, nous allons inclure quelques exemples de données avec lesquelles travailler, avant de revenir en arrière, jetez un oeil de plus près aux TypeDefs et résolveurs que vous transmettez dans notre serveur. 5. Y compris des données sur lesquels travailler: Inclus avec ce cours est un téléchargement qui inclut quelques exemples de données, avoir ce téléchargement assis ici comme un fichier texte sur le bureau. Lorsque nous commençons avec le graphique QL, nous pouvons avoir besoin de données temporaires pour commencer. Jusqu' à ce que nous obtenions notre base de données plus tard en utilisant PRISMA Alors allez-y et téléchargez l'exemple de fichier de données, ou si vous préférez, vous pouvez le taper à la place. Nous devons créer un nouveau fichier sur notre projet pour copier ces exemples de données. Donc, je vais ouvrir la barre latérale, et à l'intérieur du dossier source, je vais créer un nouveau fichier appelé sampledata.js. Ouvrez l'exemple de fichier texte de données, sélectionnez tout, copiez ou moins, puis collez-le dans nos exemples de données. Ceci est juste quelques informations pour commencer avec le graphique QL, nous avons un tableau d'utilisateurs, nous avons un tableau de films, et nous avons également un tableau de critiques, module exporte tous ceux-ci, nous pouvons les utiliser dans notre projet. Nous pouvons alors exiger les données d'échantillon dans notre fichier index.js, robin utilise des films et des critiques tableau, je veux le faire en haut et les définir comme une constante. Nous pouvons importer tous les films de la même ligne. Donc, les utilisations, les films et les critiques, et alors nous pouvons exiger notre exemple de fichier de données à l'intérieur ici puisque ce n'est pas un module de nœud, auriez-vous besoin d'ajouter le chemin complet du fichier ? Dans notre cas, c'est au même endroit, donc point barre oblique, puis échantillonnez des données. Pas besoin de l'extension js. Maintenant, nous avons besoin d'un moyen de rendre ces données personnalisées disponibles pour le reste de notre serveur, et le graphe QL yoga fournit l'objet contextuel pour nous permettre de le faire. A côté de notre serveur. Je vais ajouter ces deux nouvelles lignes rendre plus lisibles, nous avons les TypeDefs, les résolveurs, puis ensuite je vais ajouter une virgule et passer aussi dans le contexte. Nous configurons ceci comme un objet afin que nous puissions transmettre plusieurs éléments. Nous allons ajouter dans les films de l'utilisateur et aussi les critiques, et ces trois sont les mêmes noms que vous le transmettez en haut ici que nos constantes. Donc, le match à l'intérieur du contexte, si cela n'a pas de sens pour le moment, ne vous inquiétez pas, cela deviendra plus clair ce que cela fait dans les prochaines vidéos. Donc, pour l'instant, considérez cela comme un travail d'installation, et nous allons commencer à travailler avec ces données dans la prochaine vidéo. 6. Premier regard sur les types Defs et les résolutions: Jusqu' à présent, nous avons créé notre serveur GraphQL, en passant dans les TypeDefs et aussi les résolveurs. Nous n'avons pas encore examiné ce qu'ils sont, mais les deux sont des pièces très importantes dans le puzzle GraphQL. C' est ce que nous allons regarder dans cette vidéo. commençant par TypeDefs, qui est abrégé pour les définitions de type. C' est notre schéma GraphQL, qui nous permet essentiellement de structurer nos données en utilisant des types tels qu'une chaîne de texte, ou une valeur booléenne de true et false. Puisque GraphQL peut être utilisé dans n'importe quel langage de programmation, nous écrivons des services GraphQL en utilisant une syntaxe spéciale appelée langage de schéma GraphQL, ce qui est assez facile à utiliser. Nous aurons beaucoup de pratique pendant ce cours. Nous avons ensuite les résolveurs, qui est l'endroit où nous demandons nos fonctions, qui effectueront réellement l'opération que nous voulons basée sur notre schéma. Chaque champ de notre schéma est mis en miroir par une fonction portant le même nom dans les résolveurs. Voyons quelques exemples de la façon dont cela fonctionne en action. Un fichier index.qs maintenant même juste au-dessus de notre serveur. Je vais commencer par créer nos TypeDefs. Donc const TypeDefs, et cela va être égal à une chaîne que nous utilisons avec les ticks arrière. Alors ouvre ça. Une fois ajoutez-les sur une nouvelle ligne juste en dessous de cette configuration d'un const de résolveurs. Service égal à un objet vide pour l'instant. Commençons par regarder les TypeDefs, ou les définitions de type. Lorsque vous utilisez GraphQL, nous parlerons beaucoup de types. Ce sont ces types qui décrivent nos données. Pour commencer, nous avons trois types de racine : Query, Mutation et Abonnement. Ces groupes de types couvrent les opérations que nous voulons effectuer. Ajoutons ça maintenant. Donc, le premier type, qui va être Query, Q majuscule, et définissez ceci sur un objet. Le deuxième type de racine sera pour Mutations, donc tapez Mutation, majuscule M. Le troisième sera Abonnement, type Abonnement. Encore une fois, définissez ceci sur un objet. Une requête est utilisée pour interroger notre serveur et récupérer les données que nous voulons. Une mutation enverra de nouvelles données au serveur. Enfin, nous avons un abonnement qui nous donne la fonctionnalité en temps réel, permettant aux serveurs d'envoyer des données au client une fois qu'elles changent. Nous allons nous concentrer sur les requêtes pour cette fois-ci. Donc, nous pouvons simplement supprimer la Mutation et l'Abonnement pour l'instant, et nous reviendrons à ces derniers au fur et à mesure que nous en avons besoin pendant le cours. La requête est créée en lui donnant d'abord un nom, suivi d'un type, que nous attendons à récupérer. Un exemple de base ressemblerait à ceci. Aura un nom de requête du film, et nous nous attendons à récupérer une chaîne. Nous pouvons ajouter un point d'exclamation à la fin, ce qui est facultatif. Ceci est de déclarer que nous voulons toujours un écran de retour et qu'il ne peut jamais être la valeur de null. Il peut être vide si aucune donnée n'est trouvée, mais la valeur renvoyée ne peut pas contenir de valeur NULL. La deuxième partie consiste à configurer un résolveur pour cette requête de film. Rappelez-vous que nous avons dit que chaque requête doit avoir un résolveur avec un nom correspondant. Ce résolveur est responsable de l'exécution de l'opération que nous voulons, dans notre cas, obtenir le nom d'un film. Tout comme les TypeDefs, les résolveurs prennent un objet Query, Mutation et Subscription correspondant pour les regrouper ensemble, mais maintenant, bien que nous ayons juste besoin de la requête. Donc, à l'intérieur de l'objet Resolvers, nous pouvons configurer nos Requêtes avec un Q majuscule. Ici, nous pouvons lister toutes nos Requêtes et nous en aurons juste une pour l'instant. Donc, nous pouvons résoudre la méthode de résolution de requête avec un nom correspondant de film. Film va être une fonction qui va simplement retourner une chaîne. Donc la valeur de retour, nous pouvons ajouter n'importe quel nom que nous voulons. Donc le film Lego va bien. Cela va retourner une chaîne, puisque c'est ce dont nous avons besoin pour notre requête juste au-dessus. Si vous êtes un peu confus maintenant, c'est tout à fait normal. Je l'étais aussi, quand j'ai appris tout ça, car c'est un peu différent de ce que nous avons utilisé auparavant. Beaucoup de ce que nous faisons pour le reste du cours suivront exactement le même schéma, donc vous aurez beaucoup de pratique. Maintenant, nous pouvons démarrer le serveur dans le terminal et vérifier si cela fonctionne. En bas, à l'intérieur du terminal, vous pouvez taper nœud, puis source, ou /index.js. Rappelez-vous, c'est le point d'entrée que nous avons fixé plus tôt. Appuyez sur « Entrée ». Maintenant, nous voyons le message du serveur est en cours d'exécution sur localhost 4000, qui est le message que nous recevons de notre journal de console. Ouvrons Chrome, tapez localhost 4000. Cela ouvrira le terrain de jeu Graph QL pour nous. N' oubliez pas que GraphQL est un serveur ou un back-end pour nos sites Web et applications. Ce terrain de jeu GraphQL nous permettra d'interagir avec nos données de service lors du développement. Allons faire un tour sur la gauche. Comme il s'agit d'une requête que nous avons configurée, nous pouvons taper Query suivi des accolades. Nous n'avons qu'une seule requête à ce jour, qui est des films. Donc, nous pouvons maintenant inclure ceci. Vous pouvez voir que le terrain de jeu a un très bon aussi complète, et il va essayer de suggérer les noms de nos requêtes et les champs que nous allons. Maintenant, si nous allons de l'avant et appuyez sur le bouton de lecture au milieu sur le côté droit, nous pouvons voir que les données du film ont été retournées. Nous avons le nom de la requête du film que nous avons défini, ainsi que la chaîne de texte, que nous avons dit dans le résolveur. Je vais maintenant ajouter une autre requête pour obtenir plus de pratique. Cette requête sera un utilisateur renvoyant un type de chaîne une fois de plus, et le résolveur retournera n'importe quel nom d'utilisateur que vous choisissez. Donc, en commençant par les TypeDefs ci-dessus, vous démarrez le film. Nous pouvons ajouter dans notre utilisateur deux-points. Cela va retourner une chaîne, encore une fois, en utilisant le point d'exclamation, ce qui signifie que nous ne voulons pas une valeur de null renvoyée par le serveur. Après cela, nous configurons notre résolveur ci-dessous. Juste après le film, nous pouvons ajouter une virgule, configurer notre méthode utilisateur, puis retourner une valeur de chaîne. Je devais ajouter mon nom à l'intérieur ici, nous donne un coffre-fort sur Chrome. Maintenant, si nous rechargeons, et au lieu de film, nous avons besoin d'utilisateur. Vous pouvez voir si nous tapons en US, que la complétion automatique ne fonctionne pas. C' est parce que lorsque nous apportons des modifications en ce moment, nous devons redémarrer notre serveur. Donc, de retour dans son terminal, vers le bas, contrôle et C va fermer le serveur. Ensuite, nous pouvons exécuter node, source, ou /index.js. Cela redémarrera à nouveau notre serveur. Rechargez les terrains de jeux. Maintenant, nous pouvons voir le type d'utilisateur est également complet dans un jeu et nous obtenons le nom d'utilisateur retourné. Ceci est un premier regard de base sur l'utilisation des requêtes dans GraphQL. Ensuite, nous allons examiner l'utilisation de certains types différents sur la nouvelle chaîne, et aussi comment nous pouvons transmettre des arguments dans nos requêtes. 7. Types scalar et passage dans les argumentaires: Dans cette vidéo, nous allons faire deux choses principales. Numéro un, nous avons découvert comment analyser les arguments dans nos requêtes. Cela nous permettra de faire beaucoup plus, y compris l'accès aux échantillons de données que nous avons créés précédemment. Numéro deux, jusqu'à présent nous n'avons regardé que le type de chaîne. Je veux vous montrer quels autres types sont également disponibles. Par défaut, GraphQL a cinq types scalaires, qui sont disponibles pour décrire nos données. Qu' est-ce que c'est dans le commentaire en haut ? Le premier, que nous avons déjà regardé est la chaîne. Nous avons aussi un entier, un flotteur, un booléen, et enfin un ID. Ces types sont assez standard dans de nombreux langages de programmation, et rien de spécifique à GraphQL. Un entier est un nombre sans point décimal. Un nombre flottant ou un nombre à virgule flottante est un nombre qui a une décimale. Une chaîne, que nous avons déjà consultée, est une chaîne ou une séquence de caractères, comme une lettre, un mot ou une phrase de textes. Un booléen est une valeur vraie ou fausse simple. Enfin, un ID, qui est un identifiant unique, souvent utilisé comme clé unique pour chaque élément de notre base de données. Nous en utiliserons quelques uns dans un instant. Une autre chose que nous allons utiliser souvent est de passer des arguments dans nos requêtes. Les arguments fonctionnent de la même manière que le passage d'arguments dans une fonction régulière. Ils fournissent des informations supplémentaires que nous pouvons utiliser. Nous ajoutons des arguments entre parenthèses juste après le nom de la requête, comme ceci. Notre film est notre nom de requête. Maintenant, nous pouvons passer un titre pour ce film. Encore une fois, cela a aussi un type, que vous pouvez définir pour être une chaîne. Cela a également le point d'exclamation, qui signifie que la chaîne est requise et le nombre de la valeur de null retourné. Cela signifie que lorsque nous appelons la requête du film à partir des terrains de jeu GraphQL, nous serons également en mesure de passer le titre null two. Et bien ce qui se passe, nous avons ce titre quand nous passons. Eh bien, c'est le travail du résolveur de s'en occuper comme nous le voulons. Pour commencer dans les résolveurs avec notre film, nous incluons quatre paramètres dans notre méthode de résolution. Ce sont les parents, les args, le contexte, et aussi les informations. Nous allons les aborder plus en détail tout au long du cours, mais pour l'instant, nous allons utiliser args, ce qui est abrégé pour les arguments. C' est ainsi que nous pouvons accéder à ces arguments, tels que le titre du film, que vous transmettez. Au lieu de retourner une chaîne simple, je vais utiliser les backticks pour retourner un littéral de modèle, qui est juste JavaScript simple, et dire, mon film préféré est, suivi d'un espace, puis besoin symbole dollar pour injecter nos données dynamiques. Les données que nous voulons injecter dans la chaîne vivent sur la propriété args. C' est ce qu'on appelle title, qui correspond au titre qui est passé en argument. Si vous n'avez pas utilisé de littéraux de modèle auparavant, cela implique d'utiliser les backticks à la place des guillemets. Ensuite, nous pouvons mélanger en texte brut avec une variable en utilisant ces accolades. Au terrain de jeu GraphQL, nous pouvons maintenant tester cela. J' ai le terrain de jeu ouvert à Chrome. Vous devrez peut-être redémarrer le serveur. Fermez-le avec Control C. Ensuite, exécutez notre serveur à nouveau avec node, source, index.js. Lorsque cela est en cours d'exécution et que nous pouvons actualiser les terrains de jeu GraphQL, et nous pouvons tester cela. Nous avons l'utilisateur encore à partir d'avant. Maintenant, nous devons changer ça pour être un film. Nous pouvons maintenant passer nos arguments entre parenthèses. Ouvrez et fermez les crochets. Ensuite, nous pouvons passer dans notre titre, qui est encore une chaîne. On peut ajouter n'importe quel nom de film ici. Nous voulons y ajouter un nom de film. Ensuite, appuyez sur le bouton « Play ». Maintenant, nous allons voir notre chaîne complète de mon film préféré est Wreck-It Ralph. Mais que se passe-t-il si l'utilisateur n'a pas entré de titre ? Supprimons notre chaîne, puis appuyez sur « Play » une fois de plus. Nous voyons maintenant juste le texte entré de mon film préféré est. Eh bien, cela semble maintenant un peu stupide, mais le résolveur est disponible pour le gérer de n'importe quelle façon nous voulons utiliser JavaScript. Nous pouvons ajouter une instruction JavaScript if à l'intérieur de notre résolveur pour vérifier d'abord si un titre a été transmis. A l'intérieur de notre film, on pourrait dire si args.title. Si ces données existent, nous pouvons ensuite couper notre déclaration de retour, coller ceci dans l'instruction if. Cela fonctionnera si nous avons un titre passé. Si ce n'est pas le cas, nous pouvons dire retour 'Veuillez entrer votre film préféré... ' Maintenant, sauvegardez ça. Contrôlez C pour redémarrer le serveur. Vers le terrain de jeu, rechargez et maintenant appuyez sur « Jouer ». Nous voyons maintenant le texte de sauvegarde de « Veuillez entrer votre film préféré ». Nous pouvons également ajouter plusieurs arguments dans la requête, ce qui est une approche utile lors de l'interrogation de données, comme un utilisateur à l'intérieur de notre typedesk. Si nous descendons à notre utilisateur juste ici, ouvrez et fermez les crochets juste après. Nous pouvons transmettre un ID utilisateur et c'est notre première chance de regarder un autre type d'ID d'échelle. Encore une fois, nous pouvons utiliser le point d'exclamation car il s'agit d'un champ obligatoire qui va renvoyer une valeur. Nous pouvons ajouter, séparé par une virgule, un second argument de nom. Ça va être une chaîne. Nous pouvons ajouter un email. Ce sera aussi une chaîne. Ensuite, dans notre méthode de résolution, nous pouvons passer les mêmes quatre paramètres dans notre fonction. C' est parent, args, CTX, qui est abrégé pour le contexte, et nos infos. Encore une fois, nous n'avons pas besoin des quatre arguments sont le moment. Eh bien, le croquis a l'habitude de les écrire afin qu'ils deviennent plus familiers. Puisque nous transmettons un ID utilisateur, un nom et un e-mail, il serait logique de créer un objet utilisateur même manière que les utilisateurs dans nos exemples de données. Tu le verrais juste en haut ? C' est donc la même structure que nous allons créer à l'intérieur du résolveur. Tout d'abord, nous allons créer l'objet utilisateur basé sur les arguments. Nous pouvons le faire en configurant une constante avec un nom de l'utilisateur et définir ceci comme notre objet. Nous pouvons définir l'ID comme dans les exemples de données puis le nom et l'e-mail. L' ID va provenir d'Args.id. Le nom va être args.name. Enfin, l'e-mail sera args.email. Cet ID, nom et e-mail correspond également aux arguments qui passent un peu ici. Retour vers le bas, maintenant au lieu de retourner notre chaîne, nous allons retourner cet objet utilisateur. Nous donne une sauvegarde, Contrôle C pour fermer le serveur, puis redémarrer notre serveur. Retournez sur les terrains de jeux. Nous pouvons le recharger pour obtenir nos informations. Modifiez ceci pour être utilisateur. A l'intérieur de notre utilisateur, nous ajoutons un ID. Nous pouvons ajouter n'importe quelle pièce d'identité que nous voulons ici, je vais juste aller pour « 123456 ». Le nom, l'e-mail. Il suffit de faire n'importe quel email à l'intérieur. Maintenant, on peut frapper « Play ». Lorsque nous appuyez sur « Play » maintenant dans le terrain de jeu, nous voyons une erreur plutôt que les données que nous prévoyons récupérer. Le message d'erreur est, « La chaîne ne peut pas représenter une valeur » suivi par nos objets. Vous avez peut-être déjà remarqué quel est le problème ici. Sinon, nous pouvons regarder si nous revenons à notre requête. Sera dans notre requête pour l'utilisateur, qui est cette ligne ici. À la toute fin, nous retournons une chaîne. Mais notre utilisateur est structuré comme un objet à l'intérieur de notre résolveur. Dans les types scalaires, nous avons regardé plus tôt. Regardez en haut, nous pouvons voir que l'objet n'est pas l'un des types scalaires fournis par GraphQL. C' est bien cependant puisque GraphQL nous permet de créer un type personnalisé appelé un type d'objet. C' est exactement ce que nous allons couvrir ensuite. 8. Types d'objets personnalisés: Nous avons examiné le problème dans la dernière vidéo, que très souvent les données que nous voulons revenir ne sont pas aussi simples qu'une chaîne. C' est là que les types d'objets entrent en jeu. Comme ils sonnent un type d'objet est structuré comme un objet et nous pouvons déclarer exactement quels champs nous récupérons du serveur à l'intérieur de nos tâches de type, que nous avons ici. En dehors de ce type de requête racine, nous pouvons configurer un nouveau type d'objet client d'utilisateur. Ajoutez l'utilisateur de type, puis ouvrez et fermez les accolades, en vous assurant que cela est toujours à l'intérieur des bactiques. Ce type d'utilisateur peut contenir n'importe quelle structure que nous voulons. Dans notre cas, nous voulions refléter la structure utilisateur que vous avez utilisée auparavant en ajoutant les champs ID, nom et e-mail. Tout d'abord, nous utilisons l'ID, qui est un type d'ID. Nous passons un nom, qui va être une chaîne. Ensuite, nous allons passer dans l'e-mail, qui est encore une fois un type de chaîne. Maintenant, dans notre requête juste au-dessus, plutôt que de retourner une chaîne pour l'utilisateur, nous pouvons maintenant retourner nos objets utilisateur. Encore une fois, nous pouvons ajouter le point d'exclamation disant que nous ne voulons pas retourner de valeurs nulles. Donnez ceci un Save, descend le serveur, puis redémarrez. Si nous n'avons pas d'erreurs. Nous pouvons maintenant retourner sur les terrains de jeux graphql. Si vous avez toujours la requête de l'utilisateur ouverte, nous pouvons actualiser puis appuyer sur la lecture en utilisant la même requête. Cette fois, nous ne recevons pas l'erreur que nous avions auparavant. Au lieu de cela, le message d'erreur est de type utilisateur doit avoir une sélection de sous-champs. Cela signifie juste que nous devons dire au serveur quels champs nous voulons récupérer de sa requête. Juste après la requête de l'utilisateur, nous pouvons également ajouter quelques accolades. Ouvrez et fermez ceux-ci ne pourront jamais déclarer lequel de nos trois champs nous voulons récupérer. Je vais ajouter à l'ID, je vais ajouter le nom de l'utilisateur et aussi l'e-mail aussi. Nous pouvons ensuite envoyer cette requête à nouveau en appuyant sur lecture ou commande ou contrôle entrée. Cela va maintenant retourner nos données utilisateur comme un objet avec l'ID, le nom et l'e-mail, que nous spécifions à l'intérieur de ici. Nous pouvons retourner n'importe quelle quantité de ces champs. Nous n'avons pas à retourner tout gratuitement. C' est l'un des avantages de l'utilisation de graphql. Nous ne pouvons récupérer que les données exactes que nous voulons. Nous avons des API traditionnelles, nous pourrions récupérer toutes les données même si ce n'est pas nécessaire. Je vais maintenant faire un autre type d'objectif pour notre film. Je vous encourage à donner cela un coup d'envoi d'abord avant de suivre, nous allons d'abord créer un type d'objet appelé film comme nous l'avons fait pour l'utilisateur juste entendre. Avec les champs à l'intérieur de l'ID et du tittle. Ensuite, modifiez notre requête juste au-dessus pour retourner ce nouveau type plutôt qu'une chaîne. Commençons juste sur l'utilisateur. Ça va être un genre de film. Comme mentionné précédemment, cela va avoir l'ID comme champ, avec l'ID comme valeur de retour, puis aussi un champ de titre, qui retournera une chaîne. Ensuite, le résolveur de mouvement juste au-dessus, au lieu de retourner une chaîne, nous voulons retourner l'objet que nous venons de créer, qui se déplace. Ajoutez également dans notre deuxième argument d'ID, qui va retourner le type d'ID et les séparer par une virgule. En descendant vers le résolveur de film, nous pouvons également créer un objet avec cet ID et ce titre. Supprimons l'instruction d'avant. Ensuite, nous pouvons créer nos constantes appelées service de film. Ceci opte pour être notre objet, qui a l'ID. Je vais attraper l'ID de l'ID de point args séparé par une virgule, le titre. Mais vous aussi broyé à partir d'args, donc titre et ensuite nous pouvons remplacer notre chaîne de retour par l'objet de film que nous venons de créer. Ok, donc maintenant redescendez au terminal, contrôlez c pour se rapprocher, puis redémarrez. Les terrains de jeux, on peut recharger ça et on peut tester ça maintenant à l'intérieur des terrains de jeux. Je vais ouvrir un nouvel onglet. Requérons pour notre film. Dans le film, on peut passer la carte d'identité. Toute pièce d'identité est bien. Je vais ajouter un, deux, trois. Ensuite, nous pouvons le passer dans le deuxième argument, qui est le titre du film. Je vais ajouter la vie secrète des animaux de compagnie. Tout comme avant si nous allons de l'avant et jouons ceci, nous allons maintenant dire quand nous avons besoin d'une sélection de sous-champs de notre film, les sous-champs auront l'option de titre d'ID donc quand on est sorti, les deux à l'intérieur ici, puis appuyez sur et nous allons maintenant revenir avec les données du film, avec l'ID et aussi le titre. L' utilisation de ces types d'objets personnalisés nous permet d'avoir beaucoup de flexibilité sur la façon dont nous voulons que nos données ressemblent et se comportent. Je vais utiliser ces types personnalisés beaucoup plus que nous allons pour le reste du cours. 9. Travailler avec le contexte et les tableaux: Plus tôt dans le cours, nous avons ajouté quelques exemples de données à utiliser. Cela agira comme notre base de données temporaire jusqu'à ce que nous en ajoutions une vraie dans une section ultérieure. Dans notre projet, dans notre fichier index.js, nous avons inclus nos exemples de données en haut, sur cette ligne d'entraîneurs ici. Nous commençons par les utilisateurs, les films et les critiques dans leurs propres variables, puis en bas du fichier, nous allons créer un résolveur, nous avons créé un objet de contexte, qui est juste ici. Ensuite, nous avons passé nos trois variables à l'intérieur, et c'est ainsi que nous pouvons utiliser nos échantillons de données dans les projets. Tout ce que nous passerons dans le contexte sera disponible pour tous les résolveurs. Pour commencer, je vais configurer une nouvelle requête pour obtenir tous les films à partir de nos exemples de données. Donc, dans nos TypeDefs, et la section Requête, nous voulons configurer une requête de films. requête de ce film n'a pas besoin de prendre en compte les arguments. Donc on peut juste retourner un type de film. Rappelez-vous que le type de film est un objet personnalisé que nous avons créé précédemment. Cependant, cette approche n'est que partiellement correcte. Oui, nous voulons un type de film retourné, mais nous voulons un tableau de films pas seulement un. Dans GraphQL, nous pouvons envelopper notre type de film entre crochets pour déclarer que nous voulons qu'il s'agisse d'un tableau de films. Ce tableau peut également être non nullable. Donc, ajouter un point d'exclamation juste après signifie que nous pouvons toujours attendre un tableau de retour. Nous avons zéro ou plusieurs éléments et pas une valeur nulle. Un point d'exclamation après film peut encore être utilisé aussi comme nous l'avons fait ici. Ce qui signifie que nous attendons toujours à récupérer un objet de film et non pas une valeur de null. Comme pour toutes les requêtes, un résolveur avec le même nom est requis, c'est la fonction. Faites défiler vers le bas. Après notre film, nous pouvons également créer des films. Cela prend également les mêmes quatre paramètres. Nous avons parent, args, contexte et info, puis ajoutons une virgule à la toute fin pour séparer ceci de notre utilisateur. Le but de ce résolveur est de récupérer les films de nos exemples de données qui ont été ajoutés au contexte ci-dessous juste ici. Nous pouvons accéder au contexte dans nos résolveurs en utilisant ce paramètre de contexte de ctx. Donc à l'intérieur d'ici, nous pouvons retourner ctx suivi du nom du contexte, qui est des films. Retour au terminal, nous pouvons redémarrer notre serveur. Une fois que cela est en cours d'exécution, nous pouvons aller sur le terrain de jeu GraphQL, redémarrer, puis nous pouvons créer notre requête. Donc, Query, et nous voulons interroger pour les films. Cela ne prend aucun argument, mais comme il s'agit d'un type d'objet, nous voulons renvoyer certains champs. Je vais retourner l'ID et le titre du film, puis envoyer ces données. Le retour du titre est les films gratuits de la matrice de films dans nos exemples de données. Revenons aux requêtes, nous pouvons également supprimer notre requête utilisateur, qui est cette ligne juste ici car cela n'est plus nécessaire pour le projet. En place, nous allons chercher les utilisateurs, cela va retourner un tableau du type d'utilisateur, puis vers le bas nous pouvons créer le résolveur correspondant, qui va être responsable de l'obtention de tous les utilisateurs à partir de nos exemples de données. Donc, nous pouvons modifier l'utilisateur, et il change pour être des utilisateurs au lieu de retourner les objets utilisateur, nous allons retourner notre tableau d'utilisateurs à partir du contexte. Donc, les utilisateurs, et il est de retour de ctx.users. Une fois de plus, nous pouvons redémarrer le serveur, aller sur le terrain de jeu, et en fait, il a ouvert une nouvelle requête des utilisateurs. Encore une fois, aucun argument n'est passé, nous avons juste besoin de retourner l'ID, et en fait, nous pouvons avoir besoin de recharger cela, donc l'ID. Nous avons également le nom et l'utilisateur a également un e-mail. Ensuite, nous avons tous les utilisateurs de nos exemples de données. Les dernières données que nous devons obtenir à partir du contexte sont les examens. Encore une fois, je vous encourage à essayer cela par vous-même si vous vous sentez sûr de le faire, rappelez-vous simplement que nous n'avons pas encore configuré de type d'objet personnalisé pour l'examen, donc nous devons également le faire pour que cette requête fonctionne. C' est ce que je vais faire maintenant. Nous pouvons commencer dans les TypeDef, juste après les utilisateurs et les films. Nous pouvons créer un nouveau type, qui est revue. Cette revue va avoir une pièce d'identité, un film correspondant, le texte de la critique, ainsi que la note, qui reflète nos données d'échantillon. Donc, notre objet serait très similaire à cela. Nous n'ajouterons pas encore le champ Utilisateur. Nous ajouterons ceci à une date ultérieure, lorsque nous créerons une relation entre les avis et l'utilisateur. Revenons à notre type d'avis. L' ID est le type d'ID, le film. Pour l'instant, nous allons ajouter ceci comme une chaîne. Puisque cela est enregistré sous forme de chaîne dans les commentaires. Ensuite, nous avons le texte de révision. C' est un type de chaîne aussi, puis enfin la note, qui est un type d'entier, puis nous avons mis en place la Review Requête. Faites donc défiler jusqu'à notre section Requête ici. Nous pouvons ajouter dans la requête Reviews. Tout comme avant cela va prendre un tableau du type de révision. Maintenant, nous pouvons créer le résolveur correspondant juste après les utilisateurs. Celui-ci est appelé avis, qui prendra dans les mêmes quatre paramètres de parent, args, le contexte et info. Ici, tout ce que nous avons à faire est de retourner le context.reviews pour obtenir nos exemples de données. Ok, bien. Nous pouvons maintenant redémarrer le serveur, diriger vers le terrain de jeu GraphQL. Nous pouvons supprimer la requête utilisateur et en place, nous pouvons ajouter notre type de requête pour les commentaires. Cela ne prend aucun argument comme les deux derniers, tout ce que nous devons faire est de retourner les données que nous voulons. Je vais donc ajouter l'ID, le film, le texte de la critique, et aussi la note. Envoyez ça. Maintenant, nous obtenons un tableau d'avis à partir de nos données d'échantillon. Nous avons maintenant mis en place notre travail dans les opérations pour obtenir des films et des critiques de nos utilisateurs. Plus tard dans le cours, nous remplacerons cet exemple de données par une base de données réelle. Bien que cela puisse sembler complexe au début pour chacun maintenant, nous avons vu que la plupart de celui-ci suit un schéma similaire. Ensuite, nous allons apporter un petit changement à notre projet, qui redémarre automatiquement notre serveur chaque fois que nous faisons un changement. 10. Redémarrer le serveur: Ce sera juste une vidéo rapide pour installer un paquet npm appelé nodemon. Pour le moment, chaque fois que nous modifions nos fichiers, nous devons fermer et redémarrer notre serveur. Nodemon nous évitera de le faire en redémarrant automatiquement les photos du serveur lorsque nous enregistrons un fichier. Nodemon est disponible pour plus d'informations sur nodemon.io, mais je vais aller de l'avant et installer cela dans le terminal. Fermons notre serveur. Ensuite, nous pouvons ajouter une installation npm, —save-dev, puis le nom du paquet nodemon. Appuyez sur « Entrée ». Cela va tirer dans le paquet à partir de npm. Le save-dev sauvera cela à l'intérieur de notre package.json en tant que dépendance de dev, ce qui signifie que cela sauvera ceci en tant que dépendance seulement pendant le développement. Bien. Une fois cela installé, nous pouvons ensuite vérifier cela dans le cyber et le package.json et vérifier. Ceci est enregistré en tant que dépendance de développement seulement. Dans le même fichier, défilant vers le haut, nous avons une section de script juste ici. Nous pouvons ajouter un nouveau script de démarrage pour profiter maintenant de nodemon. Nous pouvons ajouter « Démarrer » à l'intérieur des guillemets suivis d'un deux-points. Npm start exécutera la commande que nous tapons ensuite. Donc, entre les citations, je vais ajouter nodemon, puis le chemin du fichier à notre serveur, qui est src/index.js. Ajoutez une virgule juste après cela pour séparer cela de notre script de test et ensuite nous pouvons donner à ce fichier un coffre-fort. Ceci est similaire à la commande que nous exécutons précédemment dans le terminal pour démarrer le serveur. Mais maintenant, nous remplacons le noeud par nodemon. Maintenant, on peut essayer ça. En bas dans le terminal, nous pouvons exécuter npm, démarrer et appuyer sur « Entrée ». Cela exécute ensuite le script que nous avons spécifié qui est nodemon src/index.js. Encore une fois, nous voyons que le serveur est en cours d'exécution sur le port localhost 4 000. Maintenant, si nous allons dans l'un de nos fichiers dans notre projet et appuyez sur « Enregistrer », gardez un œil sur le terminal en bas. Nous voyons maintenant que le serveur redémarre, ce qui signifie que nous n'avons pas besoin de fermer manuellement le serveur et de le redémarrer après chaque modification. C' est tout ce que nous devons faire pour que cela fonctionne. Ensuite, nous allons refactoriser notre code pour garder les choses plus organisées. 11. Refactoriser notre code: Même à ce stade précoce de notre projet, nous pouvons voir qu'en ayant tout dans le fichier index.js, cette chose est encore un peu bondée. Je ne vais pas prendre quelques instants pour supprimer nos TypeDefs de schéma, ainsi que les résolveurs sortir ce fichier et les organiser en fichiers séparés. commençant par nos TypeDefs, où chrony nous utilisons les ticks arrière pour créer toutes nos définitions de type à l'intérieur. Nous pouvons également les retirer d'ici et les placer dans un fichier GraphQL séparé. Je vais créer ce fichier à l'intérieur du dossier source et appeler ceci le schema.graphql. Nous pouvons ensuite revenir à notre index et couper toutes nos définitions de type d'ici. Coupez tout sauf les tiques arrière. Du type de revue, jusqu'à notre requête, découpez ceci. Ensuite, collez-le dans notre schema.graphql. Retour dans le index.js, nous pouvons supprimer la chaîne TypeDefs, que nous avons ici et aussi notre commentaire d'en haut. faisant défiler jusqu'à notre serveur, nous devons maintenant modifier nos définitions de type pour refléter cela. Nous pouvons pointer les TypeDefs maintenant vers l'emplacement de notre nouveau fichier. Les TypeDefs vont maintenant être égaux à une chaîne. Ça va être une barre oblique. Nous utilisons le dossier source et le fichier était schema.graphql. Enregistrez le fichier et à ce stade, vous devriez peut-être maintenant sortir du terrain de jeu et vérifier que les choses fonctionnent encore. Notre serveur a automatiquement redémarré en utilisant nodemon, donc maintenant nous pouvons rafraîchir les terrains de jeux. Ensuite, nous pouvons recharger nos requêtes et vérifier si nous récupérons toutes les données que nous voulons plutôt que des erreurs. Tout cela semble fonctionner bien. L' étape suivante consiste à déplacer les résolveurs dans un nouveau fichier 2. Encore une fois, dans le répertoire source, je vais créer un nouveau fichier appelé resolvers avec l'extension dot js. Au-dessus du index.js, nous pouvons saisir tous nos résolveurs objet. Prenons tout, y compris le nom de const. Couper de l'accolade de fermeture tout le chemin vers le haut. Sortez-les de notre fichier d'index, collez-les dans le fichier de résolution. Ensuite, en bas du fichier, nous devons exporter cet objet Resolvers, pour que cela fonctionne. Nous avons exposé notre fichier avec module.exports et l'avons défini comme égal à notre nom de résolveurs, qui est le nom de notre objet en haut juste ici. Maintenant que nous avons exporté ce fichier, nous pouvons maintenant l'utiliser à nouveau dans notre sauvegarde index.js dans notre fichier d'index. Contrairement à nos définitions de type, où nous pouvons passer directement dans un fichier, tout comme nous l'avons ici. Nous devons exiger ce dossier en haut. Nous allons créer une nouvelle constante appelée résolveurs et définir ceci sur notre chemin de fichier. Donc, nous pouvons exiger le chemin du fichier comme une chaîne, qui est des résolveurs de slash point. Ce nom const des résolveurs correspond également au nom que nous avons passé au serveur, qui est juste ici. Nous n'avons pas besoin d'apporter d'autres changements. La dernière chose que je veux faire pour refactoriser notre code est de supprimer la requête de film. Nous n'en avons plus besoin pour nos projets. Donc, nous pouvons passer à notre schéma à l'intérieur de notre objet de requête, supprime la première ligne de film. Aussi dans les résolveurs, nous pouvons supprimer le résolveur correspondant. Trouvons le film, nous pouvons supprimer tout cela de notre section de requête, disons ce fichier. C' était juste à des fins de démonstration au début du cours. Je n'en aurai plus besoin pour notre projet. Tout ce qu'il reste à faire est de revenir sur les terrains de jeu GraphQL et tester si les choses fonctionnent encore. Alors rafraîchissez. Nous pouvons essayer de cliquer sur certaines de ces requêtes. Nous semblons toujours récupérer les données requises. Avec tout cela maintenant pris en charge et notre code est plus organisé. Maintenant, nous pouvons revenir à GraphQL, et découvrir comment nous pouvons mettre en place des relations entre les types. 12. Relation des relations entre les types: À l'heure actuelle, nous devrions mieux comprendre comment GraphQL utilise les types. Mais nous viendrons bientôt le trouver souvent. Nous devons configurer des liens ou des relations entre ces types. Même si nous n'en sommes qu'aux premiers stades de notre projet, nous avons déjà besoin d'établir des relations. La diapositive est les types d'objets personnalisés gratuits que nous avons dans nos projets le moment, ils sont tous indépendants les uns des autres, mais ce n'est pas ainsi que cela devrait être. Nous avons des utilisateurs qui seront responsables de publier des avis, donc nous avons besoin de configurer une relation entre l'utilisateur et le type d'avis et nous pouvons le faire en ajoutant un champ d'évaluation à l'utilisateur. Comme nous le voyons ici, ce sera un tableau d' avis car un utilisateur pourrait poster autant d'avis qu'il le souhaitait. Ci-dessous, nous avons également le type de film et cela aura également besoin de la même relation de commentaires à. Puisque la revue dans un film est un point entier de ce projet, nous pouvons ajouter dans les champs d'avis, et c'est aussi un tableau puisque nous pouvons avoir plusieurs critiques pour le même film. Pour le type d'avis, cela nécessitera également une relation avec l'utilisateur qui l' a créé et le film sur lequel il est basé. Nous devrons faire deux choses pour ce type d'examen. Tout d'abord, nous devons changer le champ du film d'une valeur de chaîne à un film, un seul film, pas un tableau et enfin, configurer un champ utilisateur, sorte que nous saurons quel utilisateur a créé cette revue. Maintenant, nous avons une idée claire de la façon dont nous pouvons établir nos relations. Passons maintenant à la mise en œuvre des changements dans la prochaine vidéo. 13. Créer nos relations Partie 1: Maintenant, commençons à travailler en créant les relations pour notre type d'avis. Comme nous l'avons déjà vu, il s' agit de deux domaines. Quand il a changé le champ vidéo pour renvoyer un film plutôt qu' une chaîne et un nouveau champ pour l'utilisateur qui l'a créé. Revenons au schema.graphql dans notre projet. Dans notre fichier de schéma, nous pouvons le faire un champ à la fois. Faites défiler jusqu'au type d'avis et nous devons d'abord changer le champ de film, retourner un film plutôt qu'une chaîne. Cela nous permettra lorsque la requête et les critiques et aussi tirer toutes les données de film pour lesquelles il est et maintenant il y a une étape de plus que nous devons prendre pour le moment, chaque fois que les fichiers de résolveur pour ce type d'examen, il peut résoudre tout cela avec des valeurs scalaires sans aucun problème. Puisque nous retournons simplement une chaîne, un entier ou un identifiant par exemple, cependant, lorsque nous interrogeons pour cette revue et nous trouvons un type de film, qui est un type d'objet personnalisé. Nous avons également besoin de configurer un résolveur séparé, afin que GraphQL puisse parcourir tous les films qui correspondent et trouver le bon pour revenir en arrière. Si nous ne créons pas ce résolveur, GraphQL n'a aucun moyen de savoir exactement quel film nous voulons trouver. Enregistrez ce fichier et puis nous pouvons aller sur le terrain de jeu GraphQL et nous pouvons essayer d'ajouter dans nos données de film pour être inclus. Si nous actualisons la requête d'avis, appuyez sur le jeu, nous voyons le type de film. Maintenant, ce n'est plus une chaîne, doit avoir une sélection de sous-champs. Nous pouvons facilement ajouter cela avec les accolades et ajouter dans l'identifiant du film et le titre aussi. Comment puis-je obtenir un message d'erreur disant, « Nous ne pouvons pas retourner null pour un champ non nul » qui est lié au film. C' est parce que nous n'avons pas encore créé ce résolveur mentionné précédemment pour obtenir les données de film correctes dans le fichier resolvers.jsfile, nous pouvons créer ceci maintenant. Nous devons créer ceci en tant que nouvelle propriété, qui est appelée révision pour correspondre à notre type d'avis. Bas juste après la requête, ajoutez une virgule, puis ajoutez le type de revue d'itinéraire, puis réglé par méthode, tout comme nous l'avons fait précédemment, mais le nom de la méthode doit correspondre au champ de ce type de revue. Dans notre cas, c'est un film. Cela prend également la même chose pour les paramètres des parents, args, contexte et info. La responsabilité de ce résolveur est de parcourir tous les films de nos exemples de données et de trouver celui avec l'identifiant de notre revue. Nous pouvons le faire en utilisant la méthode JavaScript find. Nous pouvons ajouter une valeur de retour, donc contexte, nous allons parcourir tous les films. Où a trouvé la méthode JavaScript ? Chaque film trouvé à l'intérieur de cette boucle sera stocké dans le nom de variable du film. Cette méthode find, qui est juste JavaScript régulier exécutera cette fonction pour chaque élément du tableau. Chaque élément du tableau de films est installé à l'intérieur de cette variable de film, que nous suggérons ici. Il reviendra si l'identifiant du film à partir de nos exemples de données. Retourne le movie.id correspond à l'identifiant du film de l'avis. Mais comment accéder à l'identifiant du film à partir de la revue ? Nous y accédons en utilisant un paramètre que nous n'avons pas encore utilisé, qui est ce parent juste ici, suivi du nom de champ du film. Nous pouvons vérifier si cela est égal à parent.movie. Dans ce cas, les films sont un enfant du type d'avis. Le parent fait référence au résolveur d'un niveau supérieur. Pour comprendre comment cela fonctionne mieux, regardons ce qui se passe dans notre schéma. En regardant notre type de révision, ceci comme nous le savons a beaucoup dans le résolveur. Si le résolveur peut résoudre les valeurs d'id, révisez le texte et évaluez immédiatement car il s'agit de types scalaires. Cependant, avec ce type de film ici, il ne saura pas immédiatement quel film retourner alors nous lançons ensuite ce résolveur séparé, que nous venons de créer appelé film. Ce résolveur de film est imbriqué à l'intérieur de la revue et c' est pourquoi nous devons utiliser les parents pour obtenir des données à partir du type d'avis. Cela peut sembler un peu déroutant au début, mais nous allons regarder quelques exemples supplémentaires de cela, ce qui devrait aider. Maintenant, si nous sauvegardons ce fichier à l'avance sur le terrain de jeu GraphQL, nous pouvons relancer la requête d'avis, actualiser les terrains de jeu, cliquer sur « Play ». Maintenant, nous avons trouvé les données de film correspondantes pour chaque commentaire qui a été lié par les identifiants. Faisons-le à nouveau, mais cette fois en ajoutant un utilisateur à examiner. Dans le schema.graphql, nous ajoutons d' abord un champ utilisateur au type de révision. En bas, un nouveau champ utilisateur, qui va renvoyer un type d'objet personnalisé d'utilisateur dans les données d'exemple. Si nous allons aux commentaires, vous pouvez voir que nous avons déjà un type d'utilisateur ici, qui est lié à un identifiant de l'utilisateur afin 1002, 1001 et tout cela utilise les identifiants du haut. Maintenant, nous devons créer le résolveur pour ce champ utilisateur et le travail de ce résolveur est de faire correspondre ces identifiants. Ce résolveur suivra un modèle similaire à celui du dernier dans le fichier resolvers. Ce champ utilisateur peut également être ajouté au même type d'avis afin que nous puissions l'ajouter juste après le film, ajouter une virgule, le nom de champ de l'utilisateur, qui prend également en compte les parents, arguments, le contexte et aussi les informations. À l'intérieur, nous voulons ajouter une valeur de retour, que vous allez rechercher le contexte et le tableau des utilisateurs. Cela va également utiliser la méthode JavaScript find pour parcourir chaque élément du tableau et stocker dans une valeur appelée user. Pour chaque utilisateur qui est retourné à partir du tableau, nous allons revenir à travers si l'ID utilisateur est égal à parents.user. L' identifiant de l'utilisateur sera le champ de notre échantillon de données, brut en particulier utilisateur. Le parents.user sera l'identifiant vers le bas dans nos commentaires à partir de ce champ utilisateur juste ici. Retour dans le terrain de jeu pour enregistrer ce fichier, tête sur et recharger les commentaires, nous pouvons également ajouter notre utilisateur à la sélection. L' utilisateur, c'est aussi un objet afin que nous puissions ajouter dans certains champs. Allons juste pour le nom et puis appuyez sur « Entrée ». Maintenant, pour chaque commentaire à l'intérieur de nos exemples de données, nous avons cherché le film et tiré l'identifiant et le titre. J' ai également trouvé la correspondance dans l'utilisateur à partir de nos exemples de données par l'id. C'est toutes les relations dont nous avons maintenant besoin pour le type de révision. Nous allons continuer à obtenir une petite pratique avec des relations dans la prochaine vidéo, où nous allons lier à la fois l'utilisateur et le type de film aux critiques. 14. Créer nos relations Partie 2: Diapositive factorielle d'avant. Nous avons encore les deux relations à gauche. Nous devons lier l'utilisateur à un avis, cela nous permettra d'interroger les utilisateurs et aussi de voir les avis qu'ils ont faits. Également en bas, le même champ de commentaires pour le film Type 2. Cela nous permettra d'interroger des films, puis de voir les critiques pour chacun d'eux. Ces deux relations suivent la même personne de la dernière vidéo, nous ajoutons un nouveau champ appelé avis, puis créons un résolveur pour récupérer les données entre elles. Encore une fois, nous ajoutons ces nouveaux champs dans notre schéma. Commençons par le type d'utilisateur. Juste en bas, je vais créer nouveaux champs d'avis et cela va être un tableau du type d'avis. Puisque l'utilisateur peut placer plusieurs critiques, cela doit être un tableau. Ensuite, nous devons configurer un résolveur correspondant pour correspondre à l'ID utilisateur. Qu' est-ce qu'on va faire si on regarde les échantillons de données ? Si nous descendons aux commentaires à l'intérieur du résolveur, va parcourir tous les commentaires en utilisant JavaScript, puis trouver l'ID utilisateur pour chacun. Cela va être accessible avec les commentaires ou l'utilisateur, nous allons alors vérifier si cela est égal aux parents qui est notre user.id. Une fois que vous avez beaucoup, cela retournera vrai et fournit ensuite les informations dont nous avons besoin. Maintenant, nous pouvons enregistrer notre schéma, puis passer aux résolveurs, et créer ce résolveur pour le type d'utilisateur appelé avis. Nous avons terminé avec les résolveurs pour le type de révision, passons à la fin de ceci, puis créons une nouvelle propriété appelée utilisateur. Ce sera un objet. Depuis, comme vous le savez d'avant, nous pouvons ajouter plusieurs résolveurs à l'intérieur ici. Nous avons seulement besoin de commentaires pour le moment, ajoutons le nom de la méthode des critiques. Prenez en compte les parents, les arguments, le contexte et l'info. Ensuite, similaire à ci-dessus, nous allons utiliser une méthode et plutôt que d'utiliser la méthode find, nous allons utiliser la méthode filter, car nous pouvons renvoyer plusieurs valeurs ou plusieurs critiques. Retourne le context.reviews.filter. Encore une fois, c'est juste du JavaScript simple, nous allons filtrer tous les commentaires, puis configurer notre fonction. Chaque élément dans les avis va être stocké dans cette variable de révision. Qu' est-ce qu'on veut faire ici ? Eh bien, tout comme nous avons regardé dans les exemples de données, nous voulons correspondre à l'avis .user. Si vous faites défiler ce champ juste ici, nous voulons maintenant le faire correspondre avec un identifiant utilisateur. Nous pouvons attraper l'utilisateur en vérifiant si cela est égal au parents.id. Maintenant, donnez un coup d'arrêt et puis dirigez-vous vers le terrain de jeu. Nous pouvons aller à nos utilisateurs interroger, actualiser, quand tout cela fonctionne parce que nous n'avons pas encore ajouté le nouveau champ. Avec juste avoir l'e-mail, nous pouvons également ajouter dans les commentaires, à l'intérieur des commentaires que nous avons également besoin d'ajouter dans les champs qui veut revenir. Ajoutons le texte de révision et le taux dans et tout cela fonctionne bien. Lorsque vous récupérez cette information, nous voulons probablement obtenir le titre du film, alors sachez à quel film cette critique est destinée. Nous pouvons imbriquer cela à l'intérieur des critiques, pour que nous puissions accéder au film et ensuite aux champs que nous voulons récupérer ? Je vais juste ajouter le titre, puis imbriqué à l'intérieur, nous obtenons également ce titre pour chaque critique. Comment savez-vous que ce film fonctionnera lorsqu'il est imbriqué à l'intérieur des critiques ? Eh bien, c'est parce que vous avez déjà configuré le résolveur pour cela dans la dernière vidéo. Lorsque vous retournez un film de révision est une propriété du type de révision. De retour dans notre schéma, nous pouvons voir ceci si nous descendons à notre type de revue, nous avons le film puis nous avons un résolveur correspondant pour récupérer le film dans le resolvers.js, et il y a cette méthode juste ici. Maintenant, les choses commencent à se lier ensemble. Je vais maintenant former des relations entre nos types. Avec cela en place, nous avons juste une relation finale à ajouter et c'est également d'ajouter le même champ de commentaires au type de film. Si vous vous sentez confiant, allez-y et donnez ceci un coup de main par vous-même, cela vous fera réfléchir à la façon dont les choses vont ensemble, et vous pouvez également suivre avec moi par la suite. Commençons par le type de film dans le schéma. Nous allons ajouter les mêmes champs d'avis. Juste après le titre, cela va également retourner le type de tableau. Comme le film peut avoir plusieurs critiques, pour plus de simplicité à ce stade dans les données d'échantillon, je viens d'ajouter un seul avis plutôt qu'un tableau de plusieurs critiques, mais nous traiterons de plusieurs critiques plus tard lors de l'utilisation de PRISMA. les résolveurs, nous avons mis en place notre type de film sur la route. Enregistrez ce fichier, nous avons nos commentaires, nous avons nos résolveurs d'utilisateurs, puis ensuite nous avons également besoin de configurer nos résolveurs de déplacement et c'est un objet, puis nous ajoutons le nom de la propriété. Ce sont les commentaires, tout comme au-dessus de nous dans les quatre paramètres. Cela va également retourner un aperçu de filtre. Retournez ctx.reviews.filter et nous configurons notre fonction. À l'intérieur, nous allons ajouter une valeur de retour. Tout comme ci-dessus, nous allons retourner l'avis, mais cette fois nous voulons cibler l'ID. Si nous passons à nos exemples de données et jusqu'aux commentaires, nous allons récupérer un avis par son ID, puis nous allons vérifier si cela est égal à parents.reviews. Les parents pointent vers les films, puis l'ID stocké sur les critiques. Une fois que nous obtenons une correspondance entre ces deux valeurs, nous retournerons alors vrai chaque élément de notre tableau. De retour dans les résolveurs, finissons cela, vérifions si cela est égal à parent.reviews, donnez ceci une sauvegarde, puis sur le terrain de jeu, nous devons aller pour la requête pour les films. Rechargeons le navigateur. Après le titre, nous pouvons passer dans les commentaires, nous pouvons obtenir le texte de l'avis, la note, et nous pouvons également vérifier quel utilisateur a posté cet avis comme accès au type d'utilisateur, et nous obtenons le nom d'utilisateur, appuyez sur Entrée et maintenant voir notre vue a été retournée pour chaque film. Nous avons également l'utilisateur correspondant. Encore une fois, puisque nous avons configuré un résolveur d'utilisateur pour les avis, nous l'avons fait dans notre schéma. Si nous passons à notre type de révision, nous configurons également ce résolveur pour récupérer l'utilisateur requis. Super. Comme tous ces éléments fonctionnent maintenant correctement, c'est toutes nos relations maintenant en place. 15. Introduction aux muts: Dans la dernière section, nous nous sommes concentrés principalement sur la récupération des données, qui était déjà là en utilisant des requêtes. C' était à partir de nos échantillons de données. Ce qui sera bientôt une vraie base de données. Maintenant, nous allons changer les choses et renvoyer les nouvelles données à notre base de données. Ces mutations sont appelées et elles peuvent envoyer tout ce que vous voulez, comme un nouvel utilisateur, un nouveau film ou une nouvelle critique. Les mutations suivent un modèle similaire aux requêtes que vous avez déjà utilisées. Nous configurons les mutations que nous voulons dans le schéma, déclarant le type de données que nous voulons récupérer. Ensuite, ceux-ci ont aussi beaucoup dans le résolveur aussi. Un résolveur par mutation. Pour commencer, nous pouvons ajouter une nouvelle propriété de mutation racine à notre schéma actuellement, nous avons le type, donc ajoutons la deuxième propriété racine de mutation en tant qu'objet, afin que nous puissions regrouper toutes nos mutations ensemble. Nous avons brièvement examiné cela plus tôt lors de la configuration des devs de type. Il s'agit de l'une des trois propriétés racine. Le troisième est l'abonnement, qui couvrira également bientôt. Ensuite, comme nous l'avons fait avec les requêtes ci-dessus, nous ajoutons le nom de notre mutation, suivi du type que nous voulons retourner. Je vais créer une mutation d'inscription, inscrire un utilisateur, qui va retourner le type d'utilisateur, U. Cela peut retourner n'importe quelle échelle de types, comme la chaîne, un booléen, ou aussi nos types d'objets personnalisés, tels que cet utilisateur. Lors de la signature de l'utilisateur, ce n'est pas très utile si nous ne pouvons pas transmettre de données sur l'utilisateur, et encore une fois, nous pouvons le faire facilement en passant des arguments. Allons de l'avant et ajoutons les crochets après l'inscription. Nous pouvons ajouter un nom d'utilisateur, qui sera un type de chaîne séparé par une virgule, un e-mail, aussi avec le type de chaîne, vous pouvez remarquer que nous ne passons que deux arguments à cette mutation pour l'utilisateur. Mais si nous faisons défiler ci-dessous jusqu'au type d'utilisateur, cet utilisateur a quatre champs. Eh bien, c'est parce que l'ID sera également généré par Prisma plus tard dans le cours, et ce n'est pas quelque chose que nous attendions à ce que l'utilisateur fournisse, car il doit être unique. Étant donné que les avis ont un type d'objet personnalisé, ils peuvent avoir leur propre résolveur pour récupérer les données requises. [ inaudible] les résolveurs de chaque mutation. Enregistrez ce fichier, puis allez vers les résolveurs. La mutation est également une propriété racine, donc je vais ajouter ceci après la requête. Trouver l'accolade de fermeture, qui est juste au-dessus de l'examen, peut ajouter une mutation, enregistrer comme un objet et ajouter une virgule, séparer cela des commentaires. Il s'agit d'un objet qui prend une méthode ou un résolveur pour chaque mutation. La seule mutation que nous avons est appelée inscription, et cela prend également les mêmes quatre arguments que lors de la création d'une requête, donc ce sont les parents, les arguments, le contexte et l'info, puis les accolades. Le type d'utilisateur est un objet, nous devons donc également créer un objet utilisateur pour correspondre à la structure. Const, utilisateur, et nous pouvons définir cela égal à un objet. Le premier champ est l'ID, et cela sera également généré par Prisma plus tard, mais pour l'instant nous devons en créer un pour stocker dans nos échantillons de données. Si nous passons à nos exemples de données, puis allons jeter un oeil à l'objet utilisateur, chaque ID commence à 1 000, donc nous avons 1 001, 1 002 et 1 003, de sorte que nous pouvons faire correspondre ce modèle dans l'objet utilisateur. Encore une fois, ne vous inquiétez pas trop de ce que nous faisons ici, c'est juste pour générer un ID temporaire jusqu'à ce que nous utilisions Prisma plus tard. Nous pouvons créer l'ID, va être une chaîne de modèle, donc nous pouvons utiliser les ticks arrière. Nous voulons que l'ID commence par un double zéro, puis nous voulons que cela augmente d'un pour chaque utilisateur dans notre tableau. Nous pouvons alors rendre le quatrième chiffre dynamique en le passant en utilisant JavaScript. Nous allons parcourir le tableau des utilisateurs avec ctx.users, puis saisir la longueur du tableau. Actuellement, nous avons trois utilisateurs à l'intérieur de nos échantillons de données. Je vais augmenter cela d'un avec chaque utilisateur que nous allons ajouter. Ajoutez une virgule à la fin, puis nous pouvons aller de l'avant et ajouter les deux champs suivants, qui sont plus simples. Nous pouvons saisir le nom et l'e-mail des args comme nous l'avons déjà vu lors de l'utilisation des requêtes. Le nom va être args.name. L' email, args.email, puis nous pouvons aller de l'avant et pousser ce nouvel utilisateur à notre tableau d'utilisateurs. Prenez le context.users. Nous pouvons ensuite utiliser une méthode de tableau JavaScript pour pousser cet utilisateur à nos exemples de données. Cette méthode push est juste JavaScript régulier et rien de spécifique à GraphQL. Enfin, nous pouvons ensuite retourner le nouvel utilisateur sur la ligne suivante. Tout comme les requêtes, nous pouvons également tester nos mutations dans le terrain de jeu GraphQL. Cette fois, je vais ouvrir un nouvel onglet. C' est le type de mutation, donc nous l'avons mis en place comme ça, et ensuite nous pouvons ajouter notre inscription à l'intérieur. En fait, nous aurons besoin de rafraîchir. Maintenant que c'est aussi terminé, alors inscrivez-vous. L' inscription va prendre en compte les arguments. Tout d'abord, nous avons le nom, alors ajoutons un nom à l'intérieur ici, et aussi le second était email. Utilisateur, les deux chaînes. Vous pouvez ajouter toutes les données que vous voulez à l'intérieur de ici pour l'utilisateur. Cela va également renvoyer un type d'utilisateur. Nous devons saisir l'ID, le nom, et nous pouvons aussi saisir l'e-mail, exécuter ceci. Maintenant que notre inscription s'est déroulée avec succès, nous avons l'ID, le nom et l'e-mail. Nous voyons que l'ID a été augmenté de la valeur d'un. Si nous appuyons à nouveau sur « Entrée », vous voyez 1,005 et encore 1,006, donc cela augmente d'un pour chaque élément du tableau. Réexécutons nos requêtes d'utilisateurs et vérifions que ces utilisateurs supplémentaires ont été ajoutés. Faites défiler vers le bas, nous aurons nos données d'échantillons libres, et ensuite nous avons ceux que nous venons d'ajouter juste à ce moment-là. Comme nous n'utilisons pas encore de base de données permanente, toutes les modifications que vous apportez aux données d'échantillon seront simplement stockées en mémoire, ce qui les rendra temporaires. Nous pouvons redémarrer le serveur en enregistrant n'importe quel fichier, donc Commande ou Contrôle S. Retour au terrain de jeu. Rechargeons et nous pouvons réexécuter la requête des utilisateurs. Maintenant, défilant vers le bas, nous voyons juste ceux qui sont stockés dans nos échantillons de données et pas ceux que nous venons d'ajouter de notre mutation. Dans les applications réelles, les arguments de nom et d'e-mail seraient fournis à partir du frontend, comme l'inscription ou la page de connexion d'un site Web. Mais puisque le GraphQL est pour le backend, nous avons testé des choses dans ce terrain de jeu, et c'est tout ce que nous devons faire pour que nous puissions envoyer des données à notre serveur. Ensuite, nous allons envisager d'ajouter quelques mutations supplémentaires dont nous aurons besoin dans nos projets. 16. Les Mutations de film et d'examen: Maintenant, nous avons regardé comment fonctionnent les mutations. Ajoutons maintenant deux autres. Un pour créer une critique et un autre pour créer un nouveau film. Démarrage dans le schéma avec la mutation Créer un film. Retour à notre projet, et le schema.graphql. Nous allons utiliser les mêmes objets de mutation que nous avons utilisés pour l'inscription. Sur la nouvelle ligne, je vais appeler ce CreateMovie. Ce CreateMovie va également prendre quelques arguments. En fait, ce sera un seul argument de titre, qui va être de type chaîne. Nous devons également définir la valeur de retour, qui sera notre type de film personnalisé. Au-dessus du fichier de résolution, nous pouvons créer le résolveur correspondant à l'intérieur de cet objet de mutation. Juste après l'inscription, séparez ceci avec une virgule, CreateMovie, en prenant les parents, les arguments familiers, le contexte et les infos. Suivant un modèle similaire à l'inscription de l'utilisateur, nous allons créer un objet vidéo. Cela va également avoir un ID et un titre, et une fois de plus nous devons incrémenter l'ID d'un à chaque fois en vérifiant combien de films se trouvent à l'intérieur des données d'échantillon, puis en l'augmentant d'un dans chaque ajout. Les exemples de données que nous devrions aller au cinéma, nous allons générer l'ID et aussi le titre. Mais actuellement, nous allons laisser les commentaires vides car cela sera lié à Prisma plus tard. Allons de l'avant et créons notre film const objet. Cela sera égal à notre propriété d'identification. Ensuite, créez les backticks pour en faire un modèle littéral. Tous les ID de nos films figurant dans les données échantillons commencent par 200, 2001 et 2002. Commençons par 200, puis nous allons ajouter à la fin la valeur de context.movies.length, puis augmenter cette longueur de tableau d'un pour chaque ajout, séparé par une virgule. Ensuite, nous devons ajouter le titre, ce qui est beaucoup plus simple, nous pouvons saisir cela hors des arguments. Tout comme l'utilisateur ci-dessus, nous avons également besoin de pousser cela au tableau ctx.movies, la méthode push JavaScript, et puis je vais pousser notre objet film. La dernière chose à faire est de retourner ce film de cette méthode, et ensuite nous sommes prêts à y aller. Au terrain de jeu, testons ça. Recharger. Nous n'avons pas encore cette mutation, pour créer un film, alors ajoutons ceci à un nouvel onglet. Créer un film. Cela prend un seul argument de titre, et je vais ajouter un nom de film de The Secret Life Of Pets. Juste comme ça, et ensuite nous pouvons retourner nos valeurs pour le film. Ajoutons l'ID et aussi un titre, puis exécutons ceci, et cela semble fonctionner correctement. Nous avons maintenant nos données renvoyées sur la droite. Nous pouvons vérifier que cela fonctionne en récupérant tous les films de notre requête. Laissons ça, et en bas, nous avons notre nouveau film de The Secret Life Of Pets. Super. Ensuite, nous pouvons terminer notre mutation finale et c'est de créer une nouvelle revue. Comme toujours, nous commençons par mettre en place la mutation dans notre schéma. Au schema.graphql, nous pouvons ajouter une première mutation, qui est de créer un examen. Cela va récupérer le type d'examen et c'est nécessaire. Nous devons également transmettre l'information pour notre examen par les arguments. Je vais les ajouter sur une nouvelle ligne car ce sera pour différentes. Puisque cette critique concerne un film particulier, nous devons lier cela en ajoutant un ID de film, qui est un type scalaire d'ID. Nous devons également ajouter le texte de l'examen. Je vais ajouter ceci en tant que texte de révision, qui est un type de chaîne. Nous devons également ajouter une note, qui est un type d'entier, puis nous devons également lier cette revue à l'utilisateur que nous avons créé en ajoutant un champ d'ID utilisateur. Cela peut également renvoyer un ID, et c'est tout ce dont nous avons besoin pour créer un avis. Ensuite, notre résolveur de correspondance juste après CreateMovie, ajoutez une virgule à la fin et nous pouvons créer notre résolveur pour créer un examen, suivant un modèle similaire, donc parents, args, contexte et info. Ensuite, nous avons mis en place notre constante de révision, qui va être notre objet, que nous allons construire. Dans un exemple de données si nous regardons les avis à la fin, nous voyons l'ID commence par 300. Tout comme les deux méthodes ci-dessus, nous allons configurer notre propriété ID, puis l'incrémenter d'une à chaque fois. Commençons par 300. Nous pouvons ensuite obtenir la longueur du tableau d'avis avec ctx.reviews.length plus un. La prochaine propriété dont nous avons besoin est pour le film. On peut saisir ça avec Args.Movieid. Ensuite, nous avons le texte de révision. Ceci est ARGS.REEWText. Le suivant est pour la note, et c'est à nouveau à partir des args, donc args.rating. La dernière est de lier cette revue à un utilisateur, et nous pouvons saisir cela à partir de l'ARGS.UserId. Juste après cet objet, nous faisons nos deux choses familières. Tout d'abord, nous devons pousser cela à l'objet reviews avec ctx.reviews.push, en ajoutant dans notre objet de révision, puis finalement, nous devons retourner cet avis de notre méthode. Dans une application réelle, nous voulons limiter la notation à une valeur particulière, disons entre zéro et cinq. Mais c'est bien pour le moment puisque nous venons d'apprendre à propos de GraphQL. Donnez à ce fichier une sauvegarde et ensuite sur le terrain de jeu, nous pouvons tester cela. Rechargez le navigateur, ouvrez un nouvel onglet avec le type de mutation, et le nom de ceci était Create Review. Je vais ajouter ceci sur une nouvelle ligne puisque ces arguments multiples commencent. Le premier était une carte d'identité de film, et comme nous voulons tester si cela fonctionne vraiment, nous allons prendre une vraie carte d'identité de film. À partir de nos exemples de données, saisissons 2002, et ajoutez-le dans. Sur la ligne suivante se trouve le texte de révision. C' est une chaîne, donc nous pouvons ajouter n'importe quoi ici, le séparer par une virgule. La ligne suivante est pour la notation. Je vais donner à cela une valeur de cinq, puis enfin l'ID utilisateur, et cela doit encore correspondre à un vrai ID à l'intérieur de nos exemples de données. Disons que l'utilisateur 1 a créé celui-ci. Copiez 1001, ajoutez ceci dans. Juste après ces crochets, nous devons également ajouter les accolades pour déclarer les champs que nous voulons récupérer, l'examen que nous voulons revenir dans notre ID. On peut aussi récupérer un titre de film. Donc film, puis l'un des champs retournés sera le titre, puis retour à nos champs de révision normaux, donc c'est le texte de révision. Nous pouvons également saisir la note, et enfin, nous pouvons également saisir l'utilisateur qui a créé cela. Pour l'utilisateur, nous devons également récupérer un ensemble de champs de sélection. Je vais juste chercher le nom. Essayons ça. Nous avons reçu un message « Type attendu Int ; trouvé cinq ». Cela doit juste être sans les citations. Réexécutez ceci, et nous avons une révision créée avec succès, qui est également liée au film et aussi à l'utilisateur. En raison des résolveurs que nous avons créés précédemment pour ces types, allons maintenant tester la requête pour les révisions. On peut réexécuter ça. Faites défiler vers le bas, et nous avons l'examen que nous venons de créer. Cela signifie que toutes nos mutations fonctionnent maintenant. Nous pouvons créer des utilisateurs, des films et des critiques. Nous récupérons également toutes les données exactes que nous voulons de chacun. 17. Abonnements: Au début du cours, nous avons mentionné que nos graphiques de type ont des types re-root. Ces types sont Query, Mutation et Abonnement. Nous avons déjà couvert les deux premiers. Maintenant, nous allons jeter un oeil sur le fonctionnement des abonnements. Comme une requête, l'abonnement est un moyen d'obtenir les données que nous voulons. Cependant, l'un des inconvénients d'une requête est que nous ne savons pas toujours si les données ont changé depuis que nous les avons récupérées. Si nous voulons être sûrs, nous devons continuer à faire la même requête autant de fois que nécessaire. Ce n'est pas une façon très efficace de faire les choses. C' est pourquoi les abonnements entrent en jeu. Nous pouvons nous abonner à certaines données. Chaque fois que les données changent, les nouvelles données sont envoyées à un client, qu' il s'agisse d'un site Web ou d'un appareil mobile, ou même d'un terrain de jeu GraphQL. Il le fait en utilisant des sockets Web pour conserver une connexion ouverte avec le client. Ce que cela fera pour notre projet, c'est qu'il nous permettra de nous abonner aux critiques de films. Chaque fois qu'un nouvel avis est publié, nous en serons avertis. Dans une application du monde réel, cela pourrait être lié à un utilisateur pour l'informer lorsqu' un nouvel avis a été effectué sur un déménagement qu'il a aimé, ou même simplement pour afficher un nouvel avis sur une page Web au fur et à mesure qu'ils sont affichés. GraphQL-Yoga est également livré avec un support pour les abonnements, donc nous n'avons même pas besoin d'installer quoi que ce soit supplémentaire pour commencer. Ceux-ci sont configurés dans notre projet en utilisant un modèle similaire aux requêtes et mutations. Nous configurons l'abonnement à la racine de notre schéma dans notre fichier schema.graphql, ainsi qu'un résolveur correspondant pour chaque abonnement que nous créons. Commençons donc dans le schéma où nous avons mis en place le site d'abonnement. Donc juste après Query et Mutation, je mettrais ça sur la route. Donc tapez Abonnement, ouvrez les accolades dans. Ici, nous suivons le même modèle que les requêtes et les mutations en donnant à notre abonnement un nom. Donc, je vais donner à cela un nom de revue, suivi du type que nous voulons retourner, qui est un type d'objet personnalisé. Enregistrez ce fichier, puis dans les résolveurs, nous devons configurer l'objet d'abonnement. Donc je vais le faire après Query et Mutation. Ajoutons ceci dans. Donc Abonnement, capital S, donc c'est notre objet, puis ajouter une virgule à la toute fin. Comme toujours, le résolveur doit avoir un nom correspondant. Dans notre cas, il s'agit d'un examen. Ensuite, à l'intérieur de cet objet de revue, nous utilisons une méthode d'abonnement. La méthode subscribe prend également en compte le parent, l'argsm, le contexte, et aussi l'info. Lorsque vous travaillez avec des abonnements, nous utilisons ce qu'on appelle un modèle d'abonnement de publication, souvent montré à pubsub. éditeur est l'expéditeur du message et l'abonné sera notre application. Nous pouvons mettre en place une nouvelle instance pub-sub en important d'abord cela à partir du module de yoga GraphQL, et nous le faisons dans le index.js. Nous saisissons déjà le serveur GraphQL du paquet yoga. Alors attrapons aussi PubSub. Ensuite, nous devons créer une nouvelle instance de PubSub, ce que je vais faire juste avant le serveur. Const, nous allons observer, et cela sera égal à une nouvelle instance de PubSub comme ça. Cela nous permettra d'implémenter PubSup dans nos projets, et nous pouvons le faire en ajoutant PubSub au contexte ci-dessous. Donc, à l'intérieur est l'objet contextuel tout en bas, nous pouvons ajouter notre instance de PubSub, donc cela est disponible dans tous les résolveurs. En allant à notre résolvable peut maintenant terminer cela. À l'intérieur de la méthode subscribe, nous devons retourner quelque chose de PubSub. Donc, nous pouvons retourner ctx.pubsub. Ce que nous voulons retourner est une méthode Asynciterator. Donc PubSub.Asynciterator. Cet Asynciterator est chargé de renvoyer les données au client abonné. Nous nous sommes abonnés à cela en ajoutant un nom de chaîne de notre choix, que je vais appeler ma nouvelle revue. Donc à l'intérieur ici a une chaîne. Nous ajoutons un nom de canal de nouvelle révision, capital R et vous pouvez appeler cela tout ce que vous voulez. Donc maintenant, nous avons Asynciterator qui retournera tous les nouveaux commentaires. L' étape suivante consiste à aller à la mutation Create Review juste au-dessus, qui est celle-ci juste ici. Ici, lorsqu'une nouvelle révision est créée à l'aide de ce résolveur, nous pouvons également publier ces données sur le nouveau canal de révision. Nous le faisons à nouveau en accédant à PubSub à partir du contexte. Faisons-le juste avant de retourner notre avis. Donc ctx.pubsub, et puis nous pouvons appeler une méthode sur pubsub appelée Publish. À l'intérieur de cette méthode, nous passons d'abord le nom du canal sous forme de chaîne. Juste pour correspondre au nom de la chaîne d'ici, nous allons utiliser NewReview. Ensuite, après qu'ils sont séparés par une virgule, nous passons un objet contenant les données que vous voulez publier, qui est notre objet de révision d'en haut. Nous allons donc ajouter un objet et le nom de la revue, qui correspond à cet objet de révision juste ici. Cet examen doit correspondre au type de retour de notre schéma. Dans notre schema.graphql, si nous allons à notre abonnement, nous retournons ici un type d'avis. C' est exactement ce que nous publions pour que les choses correspondent. Les abonnements peuvent également être testés dans le terrain de jeu, alors dirigeons-nous vers le navigateur Web, puis rechargez. Créons un nouvel onglet pour l' abonnement avec une structure similaire à celle que nous avons déjà utilisée pour les requêtes et les mutations. Le nom de l'abonnement est un avis, et nous allons retourner un type d'avis, y compris un ID, une note, ainsi que le texte de la révision. Si on frappe le jeu, on voit en bas on reçoit un message d'écoute, et il tourne au milieu. Ceci est à l'écoute de toute nouvelle donnée publiée sur notre chaîne, c' est-à-dire quand une nouvelle révision est faite. Nous pouvons tester cela en ajoutant un nouvel avis. Donc, disons que le film est 2003 cette fois. L' utilisateur est 1003. Disons juste un nouvel examen à l'intérieur ici, envoyez-le et l'avis est créé. Retour à notre abonnement, super, notre nouvel avis est maintenant affiché dans l'abonnement. Nous allons simplement créer un autre, sur 2002, nouvelle revue 2 envoyer cela, et notre deuxième examen est maintenant affiché. Nous pouvons également utiliser les abonnements pour extraire toutes les données que nous voulons du serveur aussi en créant différents canaux. Ils peuvent être mis en place exactement de la même manière que nous venons de le faire pour les examens. 18. Configuration de Prisma: Nous arrivons maintenant à une partie passionnante du cours où nous arrivons à mettre en une véritable base de données de travail à la place de nos échantillons de données. Pour ce faire, nous utiliserons un service appelé Prisma, disponible à partir de prisma.io. Vous pouvez penser à Prisma comme le lien entre nos résolveurs GraphQL et la base de données. Il se trouve entre notre base de données et le serveur GraphQL créant le lien. Cela nous permettra d'effectuer des opérations CRUD sur notre base de données, afin que nous puissions créer, lire, mettre à jour et supprimer des données tout en travaillant avec des données en temps réel aussi. Nous le faisons en mettant à jour nos résolveurs pour inclure les méthodes Prisma pour interagir avec notre base de données au lieu de ce que nous faisons actuellement, qui est de pousser et de lire à partir de notre fichier de données exemple. Prisma est compatible avec de nombreuses bases de données populaires telles que MySQL, Postgre et MongoDB. Il modélise également nos données afin que nous puissions structurer l'aspect de nos données. Si vous avez utilisé quelque chose comme Mongoose auparavant, il fait un travail similaire à celui-ci. Cependant, Prisma est plus adapté pour travailler avec la flexibilité de GraphQL et est même livré avec une base de données de démonstration hébergée gratuite pour essayer les choses, et nous allons le mettre en place dans quelques instants. Pour commencer, je vais installer la CLI Prisma globalement à partir du terminal. Revenons au code VS, à l'intérieur de ce terminal, nous pouvons exécuter npm i -g, et ce flanc -g installera cela globalement et nous voulons installer le nom du paquet de Prisma et laisser ce pull dans le paquet Prisma de npm. La CLI de Prisma est un outil utilisé pour gérer et déployer nos services Prisma, nous utiliserons certaines des commandes qu'elle fournit, comme la commande init pour configurer nos projets. Lancez ceci maintenant, donc prisma init suivi du nom du dossier que vous voulez ajouter, tous nos fichiers et dossiers Prisma à l'intérieur dans ce qui s'appelle mime Prisma, puis appuyez sur Entrée. Cela déclenchera notre initialisation où nous pouvons choisir la base de données que nous voulons utiliser, nous pouvons utiliser une base de données existante si nous en avons déjà une, nous pouvons créer une nouvelle base de données locale en utilisant un conteneur docker, ou je vais choisir la démo qui est un environnement de développement gratuit hébergé par Prisma, sélectionnez ceci et puis nous avons le choix des régions, je vais sélectionner le plus proche de moi, appuyez sur Entrée. Nous pouvons sélectionner un nom pour notre service, je veux appeler la mienne la base de données de révision de film, appuyez sur Entrée et puis l'étape de développement. Ensuite, nous pouvons sélectionner la langue des clients Prisma que nous voulons utiliser, je vais utiliser JavaScript, donc je vais sélectionner les clients JavaScript Prisma. Le client Prisma est une bibliothèque générée automatiquement qui fournit toutes les opérations dont nous avons besoin lorsque nous travaillons avec notre base de données et ces opérations sont basées sur un modèle de données, nous examinerons bientôt. Nous avons créé un dossier appelé Prisma, qui est à la racine de notre répertoire ici, donc maintenant je vais utiliser le CD pour changer dans le dossier Prisma et ensuite nous pouvons déployer notre nouveau service Prisma en utilisant la commande Prisma deploy. Ajouter Prisma déploiement dans le terminal, j'ai appuyé sur Entrée. Donnez juste quelques instants à courir. Si nous faisons défiler vers le haut pour faire plus d'espace, nous pouvons voir que notre service a été déployé et nous pouvons également voir que nous avons créé un type d'utilisateur et nous allons jeter un oeil pourquoi c'est dans un instant, puis défiler vers le bas, nous avons quelques liens ici, Si nous ouvrons ceci, copions ce lien, cela ouvrira le terrain de jeu qui est lié à Prisma et ensuite l'ajouter dans le navigateur, cela ouvrira une nouvelle instance des terrains de jeux GraphQL. Plus bas, nous avons également le lien pour notre base de données, sorte que nous pouvons copier cela, revenir à Chrome et puis nous pouvons coller cela dans un nouvel onglet. Ceci est l'interface utilisateur de notre base de données de démonstration, nous pouvons voir sur le côté gauche, nous avons un type d'utilisateur et nous n'avons pas encore d'enregistrements insérés, donc vous vous demandez peut-être pourquoi nous avons seulement ce type d'utilisateur ou nous ne voyez aucune référence à nos critiques ou films. Eh bien, c'est à cause d'un fichier appelé modèle de données. Si nous ouvrons la barre latérale, allez dans le dossier Prisma qui a été créé, nous avons un fichier appelé modèle de données point Prisma. Ce modèle de données ressemble au schéma que nous avons déjà et Prisma est configuré pour ouvrir un type d'utilisateur par défaut. C' est le fichier que nous allons utiliser pour structurer tous nos types que nous voulons enregistrer dans la base de données. Ce fichier reflètera la façon dont seront nos tables de base de données. Puisque nous n'avons que le type d'utilisateur, c'est pourquoi nous ne voyons que le type d'utilisateur à l'intérieur de la base de données de démonstration. Une des choses difficiles à comprendre quand on regarde tout d' abord tout cela est pourquoi devons-nous créer nos types à la fois dans ce fichier et aussi le schéma point GraphQL. Eh bien, il y a des cas où ces deux fichiers seront un peu différents, le modèle de données, qui a juste notre utilisateur, décrira ce que nous voulons enregistrer dans la base de données tandis que le schéma décrira quelles données sont disponibles pour le client pour utilisation. Un exemple de quand ces fichiers auront l'air différent est un type d'utilisateur typique. Nous voudrions souvent qu'un champ de mot de passe pour l'utilisateur soit stocké dans la base de données, mais nous ne voulons peut-être pas ajouter un champ de mot de passe dans notre schéma, par conséquent, exposant cela au client car cela peut poser un risque de sécurité. De plus, puisque notre modèle de données est uniquement responsable de la structuration et de la mise en forme de nos données, il ne contient pas non plus de requêtes ou mutations que nous avons définies dans notre schéma. Donc, juste un résumé, notre schéma fournit toutes les informations pour notre front-end ou pour nos clients et le modèle de données reflète tout ce que nous voyons ici dans cette base de données. retour dans notre projet, également à l'intérieur de ce dossier Prisma, nous avons un dossier généré, si nous ouvrons cela, nous avons un fichier à l'intérieur appelé Prisma-schema dot js. Si nous regardons à l'intérieur, ce fichier contient beaucoup de code qui a également été généré par Prisma. Le client Prisma a généré tout cela en fonction du type d'utilisateur unique, que nous avons dans notre modèle de données. Vous verrez, par exemple, mutations ont été configurées en fonction de l'utilisateur, telles que créer un utilisateur, mettre à jour l'utilisateur et supprimer l'utilisateur. Maintenant, toutes ces actions seront disponibles pour nous d'utiliser dans les résolveurs et c'est l'un des avantages réels lors de l'utilisation de Prisma. Chaque fois que nous ajoutons quelque chose de nouveau à notre modèle de données, nous devons régénérer ce fichier et nous allons voir comment le faire bientôt. Un autre fichier ajouté lorsque nous exécutons Prisma init, était le fichier Prisma dot yml. Si on ouvre ça, ça fait plus d'espace. Il s'agit d'un fichier de configuration Prisma qui contient les points de terminaison de la base de données en haut, ce qui pointe vers notre base de données de démonstration que nous venons d'examiner auparavant. Cela peut également être utilisé pour les bases de données aussi et ensuite en dessous, nous avons l'emplacement du fichier de modèle de données, qui est dans le même dossier, puis à la fin nous avons la section de génération, où nous déclarons que nous voulons utiliser le client Prisma basé sur JavaScript pour générer automatiquement notre schéma et enfin, l'emplacement où ce fichier doit être enregistré. Pour travailler avec ce client Prisma, nous devons installer une bibliothèque client Prisma, vers le bas dans le terminal, nous pouvons le faire à partir de npm, donc npm i et le nom du paquet est Prisma-Clients-lib. Il met fin tire à partir de npm. La dernière étape de la configuration est d'ajouter Prisma à notre contexte. Tout comme nous l'avons fait avec les exemples de données, cela nous permettra d'utiliser tout ce qui est dans ce fichier généré à l'intérieur de nos résolveurs dans le fichier index dot js. Pour que cela fonctionne en haut, nous devons exiger le fichier généré automatiquement, que nous venons de regarder et de le stocker dans une variable appelée Prisma. Donc, créons une constante appelée Prisma et puis nous devons exiger le fichier généré automatiquement, que nous avons examiné avant, c'est dans un emplacement de fichier qui est point slash Prisma avant slash généré puis barre oblique avant client Prisma, qui est le nom du fichier. Nous devons ensuite ajouter cette variable Prisma au contexte, donc en bas ci-dessous les commentaires, nous pouvons également inclure Prisma dans le contexte et cela nous donnera accès à Prisma à partir de nos résolveurs et c'est ce que nous serons regarder dans les vidéos à venir. 19. Mettre à jour notre base de données: Comme nous l'avons mentionné dans la vidéo précédente, le fichier de modèle de données que vous avez ouvert ici, est livré avec un type d'utilisateur par défaut. Nous devons maintenant obtenir ce modèle de données en fonction de nos projets. À l'heure actuelle, les types de film utilisateur et de révision, seront les mêmes que dans notre schéma. Lorsque vous allez dans schema.graphql, puis copiez ces trois types, copiez l'avis, le film, ainsi que l'utilisateur, puis passez à notre modèle de données, et collez-les dans. Vous pouvez également supprimer l'utilisateur qui a été fourni par défaut. Disons ça. Nous devons ensuite ajouter les directives ID, chaque champ ID, donc @id et cela va être à notre champ ID sur l'utilisateur. La même chose pour le film et aussi pour la critique. Cette directive ID est quelque chose qui doit être ajouté à un champ sur chaque type, lors de l'utilisation de PRISMA. Une autre directive utile est unique, ce qui est utile pour des champs tels que notre email. Chaque entrée de courriel dans la base de données devra être unique. Nous pouvons ajouter ceci à notre utilisateur, votre type d'email personnel, nous pouvons ajouter @unique. Puisque nous avons changé notre modèle de données, nous devons maintenant faire deux choses. abord, nous devons exécuter un déploiement PRISMA pour mettre à jour notre service PRISMA, et nous l'exécutons à l'intérieur du terminal. Si nous faisons défiler vers le haut, nous pouvons voir une liste de tous les types et champs qui ont maintenant été créés, modifiés ou supprimés, ainsi que toutes les relations entre eux aussi. Nous avons également une chance d'obtenir notre lien de base de données à nouveau, et c'est quelque chose que vous n'avez pas ouvert dans le navigateur, ajoutant des ordures à partir du lien en bas. Si nous passons maintenant sur ce lien dans le navigateur, je vais recharger. Nous pouvons maintenant voir plus, sur la gauche, nous avons un utilisateur et un type de film et de critique. La deuxième chose que nous devons faire est de régénérer notre fichier de schéma PRISMA. C' était celui généré automatiquement que nous avons regardé avant. À l'intérieur du terminal, exécutez PRISMA génère, puis appuyez sur « Entrée ». Cela va maintenant mettre à jour notre fichier également généré avec les nouveaux types du modèle de données. Nous pouvons voir cela si nous ouvrons la barre latérale, puis allons dans généré, puis notre schéma PRISMA. Ici, si on fait défiler vers le bas, va un peu plus loin, on peut voir notre genre de film. Nous pouvons voir beaucoup de références de films quand nous descendons, et si nous faisons une recherche de mutation, vous voyez comment les mutations sont ici. Nous avons la création, mise à jour et la suppression du film. Idem pour l'examen et aussi pour le type d'utilisateur, que nous avons vu auparavant. Ces fichiers peuvent devenir assez complexes, mais PRISMA a son couvert à peu près n'importe quelle opération, nous devrons effectuer sur notre base de données. Nous commencerons à le faire dans la prochaine vidéo, où nous commencerons à changer nos résolveurs pour utiliser une vraie base de données à la place des exemples de données. 20. Rédaction dans la base de données: Maintenant que nous avons généré nos opérations Prisma, nous allons maintenant les implémenter dans nos résolveurs. Cela nous permettra d'utiliser notre base de données réelle à la place des tableaux de données échantillons dans le fichier resolvers.ts. Je vais commencer par les mutations. Puisque nous n'avons rien dans notre base de données, vous esquissez une requête. Commençons par cette mutation d'inscription et nous pouvons commencer par reconstruire notre utilisateur pour utiliser Prisma. Mettons en place notre const d'utilisateur et puis cette fois nous allons utiliser le context.prisma. Puisque nous mettons prisma dans le contexte, nous pouvons y accéder de cette façon. Ensuite, nous appelons une requête prisma sur la mutation par le nom de la méthode. Je vais utiliser la mutation de l'utilisateur de création. So.Créer un utilisateur. Comment puis-je savoir qu'il s'agit d'une mutation utilisateur de création ? Parce que prisma prendra nos types, tels que l'utilisateur et faire ou créer, mettre à jour, et supprimer une version de chacun. Tout comme nous l'avons vu dans la dernière vidéo quand nous avons vérifié le schéma de prisma. Nous avons créé, mettre à jour et supprimer des versions de notre film, révision, et aussi utilisateur. Dans ce schéma prisma généré, une chose que vous remarquerez est que prisma n'ajoute pas les arguments individuels. Par exemple, Create movie a une propriété de données, puis la propriété state pointe vers un nouveau type d'entrée et de cette façon est juste de garder les choses un peu plus organisées. Nous pouvons également rechercher un film, créer une entrée, ajouter ceci dans, et nous pouvons voir le type d'entrée juste ici. Cela prend un ID, un titre et tous les commentaires. De retour à nos résolveurs, nous pouvons mettre en place un objet pour construire notre utilisateur. A l'intérieur de créer l'utilisateur comme dans un objet, puis nous pouvons ajouter le nom, qui est égal à args.name. Utilisez également l'e-mail, qui est args.email. Nous n'avons pas besoin d'ajouter un ID. Puisque cela est maintenant généré automatiquement par Prisma, donc nous n'instillons rien comme nous l'avons fait ci-dessus. En fait, nous pouvons réellement supprimer ce const.user puisque nous n'avons plus besoin de cela avec l'outil de méthode push parce que nous ne poussons plus les données d'échantillon. Définition de cette mutation. Je vais transformer cela en une fonction asynchrone en ajoutant async devant l'inscription. Cela nous permettra d'utiliser await juste avant de créer notre utilisateur. Ceci est JavaScript standard et rien de spécifique à GraphQL. Cela signifie simplement que le code va s'interrompre ou attendre jusqu'à ce que la création de l'utilisateur soit terminée. Puis finalement à la fin, nous retournons le nouvel utilisateur avec cet endroit connu, nous pouvons tester cela va pousser à la base de données en redémarrant le serveur en utilisant npm start. On peut lancer ça et ensuite aller à Chrome, ouvrir le terrain de jeu. Nous allons ensuite à notre mutation d'inscription, entrer et nous récupérons nos données. Ensuite, la dernière chose à faire est d'aller dans notre base de données et de le recharger. Cela semble prometteur, nous avons notre utilisateur et nous avons la valeur d'un. Nous cliquons sur ceci. Nous voyons ensuite la valeur qui a été saisie dans le terrain de jeu graphique, maintenant dans notre base de données. Si nous cliquons sur cette ligne utilisateur sur le côté droit, nous voyons tous les champs comme utilisateur. Nous avons un ID qui a été généré automatiquement, le nom et l'e-mail. Ensuite, en bas, vous avez le champ des commentaires et nous connecterons l'utilisateur aux commentaires très bientôt. Allons de l'avant et créons un nouvel utilisateur à l'intérieur du terrain de jeu. Donc, je vais à cette fois comme mini-souris, changer l'e-mail et puis envoyer ce off, recharger. Maintenant, nous avons deux utilisateurs à l'intérieur de notre base de données. Maintenant, nous avons tous nos utilisateurs qui travaillent. Nous voulons faire la même chose pour créer un film. Si nous faisons défiler vers le bas, nous avons notre résolveur de films créé juste ici, que je vais convertir comme nous l'avons fait auparavant avec les utilisateurs. Donc, tout d'abord, je vais supprimer l'objet de film, crée une nouvelle constante appelée film et la séquence soit égale au contexte top Prisma. Ensuite, nous allons appeler une méthode appelée Create Movie. Vous pouvez prendre un objet. Nous allons passer le titre, qui sera égal à args.title, qui passera de l'aire de jeux. Mais je veux supprimer est la méthode push. Souhaitez-vous conserver le relevé de retour dans. La dernière chose à faire est de marquer cela comme asynchrone. Nous pouvons ensuite faire une pause jusqu'à ce que les données reviennent de créer un film. Enregistrez ceci, puis sur le terrain de jeu, rafraîchir et aller à la mutation qui est de créer un film et envoyer ce off. Je ne vois aucune erreur, donc c'est bien. Ajoutez également un nouveau film ici et envoyez également cela aussi, rechargez l'onglet de base de données. Nous voyons deux films à côté de notre base de données, que nous venons d'ajouter. Super. Nous n'avons plus qu'une mutation à mettre à jour et il s'agit de créer un examen. Nous reviendrons sur celui-ci dans la prochaine vidéo et examinerons également la connexion des données, ainsi que la façon de vérifier si un enregistrement existe dans la base de données. 21. Vérification si les données sont disponibles et la création de liens: La mutation CreateReView va être un peu plus profonde que celles que nous avons déjà créées. Cela est dû à ses liens vers un utilisateur et un film. Avant de créer cette revue devra vérifier à la fois l'utilisateur et le film existent réellement dans la base de données. Nous devons également mettre en place une connexion à l'utilisateur et aussi aux films, afin que nous puissions récupérer les données dont nous avons besoin. Commençons par CreateReView dans le fichier resolvers.js. Le CreateReView des résolveurs, et nous pouvons commencer par en faire une fonction asynchrone. Les clients de Prisma nous permettent de vérifier si un enregistrement existe dans notre base de données en fournissant une propriété appelée $exist. Nous pouvons l'utiliser pour transmettre un ID pour l'utilisateur et le film, vérifier s'ils existent tous les deux avant de créer l'avis. Faisons cela juste au-dessus de notre objet de révision. Const, nous allons commencer avec l'utilisateur, nous pouvons accéder à prisma hors du contexte, alors nous pouvons utiliser la méthode $exist, pour vérifier si un utilisateur de la table des utilisateurs, je vais passer dans un objet, vérifier si l'utilisateur ID de notre base de données correspond à l'ID utilisateur des args, donc args.userId. Juste après cela, nous allons aussi faire la même chose pour le film. Il suffit de faire un film appelé constant, alors nous pouvons accéder à prisma du contexte. Nous pouvons utiliser $exists, mais cette fois plutôt que l'utilisateur, nous voulons vérifier la table du film dans la base de données. Nous voulons également vérifier si l'ID du film est le même que celui fourni sur les args, qui est ARGS.movieID. Bien. Maintenant, avez ces deux variables, nous pouvons lancer des erreurs si l'une ou les deux n'existent pas. Nous pouvons le faire avec une simple instruction if pour vérifier si l'utilisateur n'existe pas. Le point d'exclamation fera le contraire, donc si l'utilisateur retourne false, nous allons alors exécuter le code à l'intérieur ici. Ce code va être un simple lancer nouvelle erreur avec un message d'une chaîne qui va être, « utilisateur introuvable ». Ci-dessous, la plupart veulent ajouter une seconde instruction if, vérifiez si aucun film n'existe. Si le film est faux, nous pouvons lancer une nouvelle erreur, et celui-ci va dire, « film introuvable ». Maintenant, si nous allons juste en dessous de ces deux déclarations if, si nous arrivons à ce stade, l'utilisateur et le film existent dans la base de données. Nous pouvons aller de l'avant et construire notre examen. const, examen, nous allons attendre cette marque de données de notre base de données, donc ctx.prisma, et ensuite nous pouvons utiliser la méthode prisma de CreateReView. CreateReView va prendre un objet et cet objet de révision est similaire à ce que nous avons créé juste en dessous lorsque vous travaillez avec un exemple de données. Par conséquent, nous pouvons copier toutes les propriétés de cet objet de révision. Je vais les découper. Nous pouvons également supprimer ces constantes et coller ceci à l'intérieur de notre revue. Nous pouvons également supprimer cette méthode push car nous ne sommes plus pousser dans nos données d'échantillon, ainsi que la propriété id de notre objet car cela est généré automatiquement par Prisma. Si nous enregistrons ce fichier, puis dirigeons vers le Playground GraphQL. Rechargeons ça. Ensuite, nous pouvons aller de l'avant et prendre un MovieID valide et utiliser l'identifiant de notre base de données. Pour saisir n'importe quel utilisateur, nous pouvons copier l'identifiant sur, ajouter ceci dans. Alors on peut faire la même chose pour notre film. L' un ou l'autre est bien, ajoutez-le dans le MovieID, alors nous pourrons exécuter notre mutation. Nous récupérons une erreur. C' est parce que nous devons établir une connexion entre le MovieID, fourni avec des arguments, avec un film de la base de données, et aussi la même chose pour l'utilisateur. Prisma nous permet de le faire facilement en utilisant un connecteur. Nous pouvons configurer cela dans nos résolveurs à l'intérieur de notre objet de révision. Pour l'instant, je vais juste couper l'ARGS.MovieId, mettre en place les accolades, puis nous pouvons passer dans un objet de connexion. Ici, nous pouvons transmettre comment nous voulons nous connecter à nos films, et une fois que vous utilisez le champ id, puis correspond avec le MovieID des args. Nous pouvons également le faire pour l'utilisateur, nous pouvons couper l'args.userId, mettre en place les accolades, et notre objet de connexion. Cette fois, nous voulons également nous connecter par l'identifiant. Nous connectons ceci avec l'identifiant utilisateur fourni dans les args, donnons ceci une sauvegarde, puis si nous relanceons notre examen, rechargeons le navigateur, et envoyons ceci. Nous obtiendrons une erreur, impossible de lire la publication de propriété de undefined, et ceci est dans CreateReView. Vérifions ça. Nous avons ctx.publication sur le pubsub qui semble bien. Voyons ça dans notre index. On dirait que quand on a vu le pubsub une raison ici. Sauvegardons ceci, rechargeons et vérifions que c'est correct. Maintenant, nous n'obtenons plus cette erreur de publication. Au lieu de cela, nous obtenons un ne peut pas retourner null pour le champ non nullable qui est review.movie. Cette erreur est attendue. Tout d'abord, si nous passons à notre base de données et puis rechargeons, nous voyons que nous avons maintenant nos commentaires que nous venons d'ajouter, donc la mutation fonctionne réellement. Mais le problème réside dans les données de révision, que nous récupérons. C' est parce que si nous passons à notre fichier schema.graphql. Ensuite, si nous passons à notre mutation, nous pouvons voir que nous récupérons le type de Review, faisant défiler vers le bas jusqu'à ce type de Review, qui est juste ici. Comme nous l'avons déjà regardé, les champs scalaires de ID, string et entier retourneront une valeur du résolveur. Nos objets personnalisés de Movie et aussi User auront besoin d'un résolveur séparé pour obtenir les données dont nous avons besoin dans le fichier resolvers. Si nous faisons défiler vers le bas jusqu'à notre type de vue, nous avons déjà créé ces deux résolveurs de révision du film et de l'utilisateur. Cependant, ils sont toujours à la recherche des données d'échantillon plutôt que de la méthode prisma dont nous avons besoin. Tout d'abord, nous pouvons les modifier en commentant ou en supprimant le code d'avant. Ensuite, en place, nous pouvons commencer à remplacer cela par l'équivalent prisma. Nous pouvons retourner ctx.prisma, et ce que nous voulons faire, que nous voulons rechercher à travers les commentaires. Actuellement, nous accédons aux avis à partir de notre base de données. L' étape suivante consiste à trouver l'avis actuel en faisant correspondre id avec celui des parents. Nous passons ceci en tant qu'objet, tant l'identifiant avec le parent.id. Maintenant avoir l'examen de notre base de données. Nous voulons retourner tous les films associés à cette critique. Cela peut être réalisé en chaînant à la fin un appel de méthode de film. À la fin, nous pouvons enchaîner sur la méthode du film pour récupérer tous les films associés à cette revue. Nous pouvons le faire avec toutes les données qui sont liées. Nous enchaînons efficacement pour couvrir les méthodes que nous avons telles que l'utilisateur, le film et la révision, puis filtrons les données sur chaque étape que nous allons, comme lui lorsque le premier filtre vers le bas les critiques par l'identifiant, puis récupère tout film associé à cet examen. Ci-dessous ce type d'avis a également une relation avec l'utilisateur, donc nous pouvons faire la même chose avec ces deux. Nous pouvons supprimer le code d'avant. Cette fois, nous allons retourner un ctx.prisma.review. Cela va sembler très similaire. Nous allons chercher l'ID de révision qui correspond à l'ID parent. La seule différence cette fois est que nous allons chercher un utilisateur correspondant en chaînant à la fin la méthode de l'utilisateur, enregistrer ce fichier, puis revenir à la Terrain de jeu, rechargez le navigateur, puis envoyez cela, et nous pouvons maintenant voir notre avis a été créé. Si vous allez dans une base de données, cette revue est également apparue ici, et nous pouvons cliquer dessus et vérifier notre vue. Essayons un de plus. Nous pouvons ajouter dans un autre utilisateur. Copiez l'ID utilisateur collez-le dans, puis copiez un film valide. Copiez cet identifiant aussi, ajoutez ceci à l'intérieur des args, et nous pouvons exécuter ceci et maintenant nous récupérons les données que nous voulons. Si nous rechargeons notre base de données, nous devrions voir l'examen ici. Toutes nos mutations travaillent maintenant avec Prisma et poussent vers notre base de données réelle. Ensuite, nous allons passer à la modification de nos requêtes pour travailler également avec notre nouvelle base de données. 22. Lire les données avec Prisma Partie 1: Maintenant, nous avons déjà une petite expérience de l'interaction avec notre base de données en utilisant Prisma. Mettre à jour nos requêtes pour récupérer nos données ne devrait pas être trop un problème car c'est très similaire. Notre première requête est pour les films et je veux marquer cela comme asynchrone afin que nous puissions à nouveau attendre les données de Prisma. Ensuite, nous pouvons à nouveau accéder à Prisma sur le contexte et sélectionner la méthode des films. Commentons le code d'avant et en place, nous pouvons créer une nouvelle constante appelée films. Cela aussi attend nos informations de retour de ctx.prisma, et appelez les méthodes de films Prisma, tirant tous les films de notre base de données, puis nous pouvons retourner nos films à la fin. J' aurais des déclarations de retour et nous pouvons retourner les films et nous assurer que cela correspond aux films juste au-dessus de ça. C' est tout ce que nous devons faire pour notre requête de base et nous pouvons tester cela dans le terrain de jeu. Rafraîchissons le navigateur, puis à l'onglet qui est pour les films. Il s'agit d'une requête. Nous pouvons relancer ceci et ensuite nous avons nos deux films mais cette fois-ci tiré par Prisma de notre base de données. Si nous voulons des données relationnelles cependant, par exemple, le type de film a également des critiques. Si nous regardons cette propriété d'avis, nous avons juste un tableau vide. Pour cela, nous devons modifier le résolveur pour également récupérer les commentaires. Retour dans le fichier des résolveurs, faites défiler vers le bas. Nous devons réduire ce résolveur de commentaires pour que le type de film fonctionne avec Prisma comme nous l'avons fait dans la dernière vidéo. Commentons le code d'avant et ensuite en place nous pouvons retourner ctx.prisma. Nous allons chercher nos films alors cherchons la méthode du film. En appuyant sur un objet et nous allons chercher le film que vous voulez par l'ID. Eh bien, faisons correspondre l'ID du film avec celui fourni par parents.id. Alors, comme nous l'avons regardé dans la dernière vidéo, nous pouvons également enchaîner à la fin notre méthode d'avis, tirant tous les commentaires associés à ce film particulier. Sauvons ça. Maintenant, si nous réexécutons notre requête, rechargez le navigateur, appuyez sur Entrée et maintenant nous voyons pour chaque film, nous avons un tableau d'avis. Cette fois, ce n'est pas vide. Il a tous les avis qui est lié dans notre base de données. Ensuite, nous avons le résolveur d'utilisateurs. alors sauvegardez en haut du fichier, puis accédez aux utilisateurs. Nous pourrions d'abord marquer cette fonction comme asynchrone, tirant les commandes de notre déclaration de retour d'avant. En place, nous pouvons mettre en place une constante appelée Utilisateurs qui va attendre ctx.prisma. Cette fois veulent rechercher les utilisateurs et ensuite nous pouvons retourner nos utilisateurs. Tout comme avant, cela fonctionne bien pour les requêtes simples qui ne renvoie que les types scalaires. Eh bien, nos utilisateurs ont aussi des commentaires trop bas donc près du bas du fichier, nous devons modifier le résolveur de révision pour le type d'utilisateur. Faites défiler jusqu'à notre type d'utilisation. Nous avons un résolveur d'avis. Ici, nous pouvons commenter ou découper ces lignes de code et ensuite nous pouvons remplacer cela par une méthode Prisma qui ressemblera à celles que nous avons créées auparavant. Nous allons retourner ctx.prisma. Nous allons chercher les utilisateurs, passer un objet ou nous pouvons filtrer les utilisateurs par l'ID. La carte d'identité que nous voulons vérifier est celle qui vit sur les parents. Ensuite, pour chaque utilisateur, nous pouvons également tirer tous les commentaires correspondants en chaînant la méthode des avis à la fin. Dans le terrain de jeu, nous pouvons maintenant tester ça. Si nous recherchons l'onglet qui est la requête de l'utilisateur, appuyez sur recharger et puis envoyez cette requête. Nous récupérerons ensuite tous les utilisateurs et les commentaires correspondants pour chacun d'eux. Ensuite, nous avons la requête des commentaires. Cela suivra le même modèle, donc en haut des résolveurs, nous pouvons marquer cela comme asynchrone, commenter les déclarations de retour et ensuite nous pouvons obtenir tous les commentaires de Prisma, donc const critiques. Cela va attendre nos données ctx.prisma.reviews, puis retourner nos commentaires ci-dessous. Testez cela dans le terrain de jeu, appuyez sur recharger, jusqu'à notre requête d'avis, envoyez ceci et nos commentaires et maintenant revenir de la base de données. Remarquez comment cette fois nos données relationnelles qui est le film donc avec le titre du film ici et ID et aussi le nom d'utilisateur en bas. Tout cela semble fonctionner aussi. C' est parce que nous avons déjà traité les résolveurs de ces cas plus tôt. Nous avons fait cela dans les résolveurs vers le bas dans le type de révision. Faites défiler jusqu'au type de révision. Nous avons l'utilisateur et le résolveur de films en place. Nous les avons convertis en utilisateur Prisma plus tôt lorsque vous travaillez avec des mutations, donc ils ont également réglé nos requêtes aussi. 23. Lire les données avec Prisma Partie 2: Nous avons tous terminé avec la mise à jour des requêtes existantes, elles fonctionnent maintenant avec Prisma. Mais avant de terminer cela, je vais créer une requête de plus. Ceci est pour obtenir des commentaires par un utilisateur particulier. Si vous vous sentez confiant, vous pourriez aller de l'avant et essayer cela nous-mêmes avant de suivre avec moi. Sa structure suivra le même modèle que les autres requêtes juste ici. Je veux appeler mes commentaires de requête par utilisateur, ce qui prendra n'importe quel ID d'utilisateur comme son seul argument. Ensuite, vous devez créer un résolveur correspondant qui vérifie d'abord si l'utilisateur existe, puis retourne tous les commentaires pour cet utilisateur particulier. Ok, donc commençons dans notre schéma en ajoutant dans notre requête. Donc c'est schema.graftql. En haut avec le type de requête. Nous pouvons ajouter des avis par utilisateur. Cela va prendre comme son seul et unique argument, l'ID utilisateur, qui retournera le type d'ID. C' est un champ obligatoire, donc nous utilisons le point d'exclamation. Un utilisateur peut avoir plusieurs commentaires, il va donc retourner un tableau du type de révision. Une fois cela fait, nous pouvons enregistrer ceci et ensuite aller aux résolveurs pour cette requête. Les résolveurs sont .jsfile. Ensuite, après les commentaires, nous pouvons ajouter une virgule. Je vais aussi faire ce asynchrone. Le nom était commentaires par utilisateur, qui vient deuxième, les parents, les args, les contacts et aussi les informations. Configurez nos accolades. La première étape consiste à vérifier si un utilisateur existe dans notre base de données. Créons une constante appelée utilisateur existe. Ensuite, nous allons attendre les données de ctx dot prisma. Je vais utiliser la méthode $ symbole existe pour vérifier si un utilisateur existe par un ID particulier. Nous pouvons passer son ID dans l'objet, vérifiant si cet ID est égal à celui fourni par args, qui était args dot user ID. Ensuite, nous pouvons vérifier si l'utilisateur existe dans une instruction conditionnelle. Donc, si l'utilisateur n'existe pas, nous allons alors lancer une nouvelle erreur. Transmission d'un message d'erreur sous la forme d'une chaîne d'utilisateur introuvable. Sur la ligne ci-dessous, si nous arrivons à ce stade, l'utilisateur existe. Alors allez-y et mettez dans les critiques. Donc const critiques, nous allons attendre, ctx.prisma. Le premier que je vais faire est de vérifier les utilisateurs et de les filtrer par l'ID fourni pour vous rechercher tous les utilisateurs dans la base de données correspondant à l'ID des args. Donc l'ID d'utilisateur. Ensuite, nous pouvons enchaîner à la fin les commentaires de cet utilisateur particulier. La dernière étape consiste à retourner les commentaires, puis à le tester sur le terrain de jeu. Rechargez le terrain de jeu, puis nous devons créer un nouvel onglet pour créer notre nouvelle requête. Cette requête a été appelée avis par utilisateur, que vous allez prendre dans l'ID utilisateur. Cet ID utilisateur doit être un ID valide de notre base de données. Donc, évidemment, les utilisateurs, nous pouvons sélectionner n'importe quel utilisateur, copier l'ID, coller cela dans, à l'intérieur des accolades. Nous devons sélectionner les champs que nous voulons récupérer. Nous allons ajouter l'ID, le texte de l'avis, la note et ensuite le film auquel cette critique est associée. C' est aussi un objet. Donc, nous devons le passer dans les accolades, les champs que nous voulons récupérer, Notre réponse pour ajouter le titre. Exécutez cette requête. Nous avons donc 1, 2, 3 commentaires différents, ce qui correspond à de jolis commentaires à l'intérieur de notre base de données. Un dernier test, si nous supprimons les chiffres de notre identifiant d'utilisateur et puis nous exécutons ceci, nous obtenons notre message d'utilisateur introuvable. Grand espoir que vous avez réussi à donner cela un aller par vous-même. Sinon, ne vous inquiétez pas trop. C' est une bonne expérience d'apprentissage et tout cela est maintenant pour nos requêtes en utilisant Prisma. 24. Merci et prochaines étapes: Félicitations, vous avez maintenant atteint la fin de ce cours. Si non, il s'agit d'un cours d'introduction. Nous avons couvert un peu de terrain et espérons que vous avez beaucoup appris sur GraphQL et Prisma. Nous avons commencé par examiner ce qu' est GraphQL et certaines des bases telles que la configuration de notre serveur, configuration de nos types, requêtes et mutations, ainsi que la façon de créer des résolveurs. Après cela, nous avons examiné les relations entre différents types de résolveurs pour obtenir nos données relationnelles avant de passer aux mutations et aux données en temps réel à l'aide d'abonnements. Une fois que tous ces éléments ont été couverts, nous avons commencé à mettre en place une vraie base de données et à interagir avec elle en utilisant Prisma. Nous avons ensuite converti nos projets de revue de films pour travailler avec cette base de données plutôt que les exemples de données que nous avons commencé avec. Maintenant, vous devriez avoir une bonne compréhension de ce que sont GraphQL et Prisma et de ce qu'ils peuvent faire pour le backend de nos projets. Vous pouvez, bien sûr, le laisser là, si vous suivez simplement ce cours pour échantillonner GraphQL. Eh bien, si vous voulez aller plus loin, il y a quelques chemins que vous pouvez prendre. Une façon évidente mais vraiment efficace de s'améliorer à GraphQL est de simplement construire plus de projets. Prenez ce que vous avez jusqu'à présent et appliquez-le à n'importe quel projet que vous aimez. Cela pourrait être un passe-temps ou un intérêt personnel, quelque chose de lié au travail, ou tout autre chose à laquelle vous pouvez penser. Quelque chose d'autre que vous pouvez faire est de faire de ce projet votre propre en apportant des modifications. Vous pouvez le personnaliser en changeant la rubrique, en modifiant les données que vous récupérez, ou même en ajoutant de nouvelles fonctionnalités. Si vous vous sentez un peu plus confiant, vous pouvez même ajouter une authentification utilisateur avec une fonctionnalité de connexion et d'enregistrement. Vous pouvez ajouter une fonctionnalité pour supprimer ou mettre à jour avis ou tout autre élément qui vous convient. Une autre option consiste à s'éloigner de la base de données de démonstration Prisma et à configurer la vôtre. Il y a un lien ici vers les documents de Prisma qui a quelques guides à ce sujet. Une autre grande étape, sera de créer un front-end pour interagir avec nos données. Nous n'avons pas couvert le front end dans ce cours puisque GraphQL est une technologie liée au backend. Mais c'est certainement quelque chose qui vaut la peine d'être examiné. Nous avons utilisé le terrain de jeu GraphQL pour obtenir nos données, mais GraphQL est compatible avec presque tous les fronts populaires, y compris React, Vue JS, Angular et iOS pour n'en nommer que quelques-uns ou voici un lien vers la documentation Apollo GraphQL. Apollo GraphQL a des implémentations pour travailler avec GraphQL sur le serveur, ce qui en fait une alternative à GraphQL-Yoga, que nous avons utilisé dans ce cours. En outre, le client Apollo peut être utilisé pour construire le côté client de l'extrémité frontale de votre application. Si vous allez dans le menu et survolez les options client ici, il y a des liens vers des guides pour de nombreux choix de fronts populaires. N' hésitez pas à jeter un coup d'oeil sur certains d'entre eux. La dernière chose que je veux vous montrer est ces Boilerplates GraphSQL. Ce sont des plaques standard basées sur Node, Typescript, React ou Vue. Chacun d'entre eux a trois niveaux de chaudron à partir d'un simple exemple de bonjour monde. Deux fonctionnalités avancées utilisant l'authentification et les bases de données. Ceux-ci sont vraiment utiles à utiliser comme point de départ de projet ou même juste comme référence. C' est maintenant pour le cours. J' espère que vous l'avez vraiment apprécié et j'espère que je vous verrai bientôt dans le cours. 25. Retrouvez-moi sur Skillshare: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en aurez connaissance. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur le partage de compétences, et aussi de me suivre pour toute mise à jour et aussi être informé de tout nouveau cours au fur et à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je vous reverrai dans un futur cours.