graphql-workshop:研讨会学习如何将GraphQL与REST进行比较

  • t3_754443
    了解作者
  • 530.3KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-07 03:27
    上传日期
GraphQL Web最佳研讨会 此研讨会由和在准备,旨在教您如何使用 。 介绍 持续约3个小时,该研讨会将指导您逐步将使用REST API创建的基本博客迁移到完整的GraphQL实现。 每个部分都将以研讨会主持人的简短介绍开始,以解释其中涵盖的要点,然后候选人将按照陈述来完成所讨论的部分。 步骤完成后,主持人将回答问题并继续进行下一部分。 与相同需求的REST相比,每个步骤都将向您展示GraphQL的优点(和缺点)。 该研讨会是为GraphQLJavaScript开发人员设计的。 首先,请确保您具有以下先决条件,然后继续进行Workshop项目的安装。 安装完成后,将等待您对项目的描述。 先决条件 要参加此研讨会,您将需要: 在 , 和前端开发方面具有知识。 首次使用 。 从安装在6.14.2和以上版本。 出于兼容性原因,后端实现与Node的版本6. *兼容。Node是目前仍保
graphql-workshop-master.zip
  • graphql-workshop-master
  • .gitignore
    50B
  • package.json
    1008B
  • server
  • route
  • rest.js
    1.3KB
  • graphql.js
    461B
  • index.js
    767B
  • service
  • index.js
    2.1KB
  • logger-conf.js
    453B
  • package-lock.json
    595.3KB
  • src
  • components
  • CommentsSection.jsx
    1.2KB
  • Navbar.jsx
    2KB
  • Feed.jsx
    548B
  • Post.jsx
    1.5KB
  • PostCreationView.jsx
    2.2KB
  • index.js
    254B
  • logo.svg
    2.6KB
  • App.js
    1.4KB
  • registerServiceWorker.js
    4.3KB
  • App.css
    742B
  • clients
  • rest.js
    513B
  • graphql.js
    180B
  • index.css
    63B
  • App.test.js
    248B
  • .nvmrc
    6B
  • public
  • index.html
    1.6KB
  • favicon.ico
    1.1KB
  • manifest.json
    333B
  • bulma.min.css
    155.1KB
  • README.md
    18.4KB
  • migrations
  • 001-initial-schema.sql
    4.4KB
  • docs
  • createPost-graphiql.png
    149.6KB
  • bow-logo.png
    60.1KB
  • blog-screenshot.png
    137.5KB
  • graphiql-screenshot.png
    83.6KB
内容介绍
# GraphQL Workshop for Best Of Web Ce workshop préparé au sein de [JS-Republic](http://js-republic.com/) par [Michael Romain](http://twitter.com/michaeldotjs) et [Mathieu Breton](https://twitter.com/matbreton) a pour but de vous apprendre à utiliser [GraphQL](https://graphql.org/). ## Introduction D'une durée approximative de 3h, ce workshop vous guidera étape par étape dans la migration d'un blog basique fait avec une API REST vers une implémentation full GraphQL. Chaque partie débutera par une courte présentation faite par l'animateur du workshop afin d'expliquer les points qui seront traités dans celle-ci, puis les candidats suivront l'énoncé pour accomplir la partie en question. Une fois l'étape terminée, l'animateur répondra aux questions et passera à la partie suivante. Chaque étape vous démontrera les avantages (et inconvénients) de GraphQL comparé à REST pour les mêmes besoins. Ce workshop est conçu pour des développeurs JavaScript, débutants en GraphQL. Pour commencer, assurez-vous d'avoir les pré-requis ci-dessous puis procéder à l'installation du projet de workshop. Une description du projet vous attend une fois l'installation terminée. ## Pré-requis Pour suivre ce workshop, vous aurez besoin : - De connaissances confirmées dans le langage [JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript), en [NodeJS](https://nodejs.org/en/) et en développement Front-End. - D'une prémière expérience avec les [API REST](https://openclassrooms.com/courses/utilisez-des-api-rest-dans-vos-projets-web). - De [NodeJS](https://nodejs.org/en/) installé en version **6.14.2 et plus**. Dans un soucis de compatibilité, l'implémentation back-end fonctionne avec la version 6.\* de Node, version la plus vielle actuellement encore maintenue. Si vous utilisez [nvm](https://github.com/creationix/nvm), vous pouvez faire un `nvm use` à la racine du projet pour passer directement dans la bonne version de NodeJS. - D'un éditeur de code. [Visual Studio Code](https://code.visualstudio.com/) fait désormais référence. ## Installation Une fois n'est pas coutume, nous récupérons ce projet depuis Github et installerons ses dépendances : ```bash git clone https://github.com/js-republic/graphql-workshop.git cd graphql-workshop npm install ``` Il ne reste plus qu'à le démarrer : ```bash npm start ``` Votre navigateur s'ouvre à l'adresse <http://localhost:3000>, vous devriez découvrir cette interface : ![alt Interface du blog](./docs/blog-screenshot.png) Prenez quelques instants pour vous familiariser avec le blog en l'état. Vous remarquerez notamment que, pour l'instant, il communique avec le back-end via l'API REST. ## Description du projet du workshop : Le projet est organisé comme suit : ``` . ├── ... ├── blog.sqlite <-- Fichier de base de données SQlite du blog ├── migrations <-- Dossier contenant les scripts d'initialisation SQL ├── public <-- Dossier public exposé sur localhost:3000 │   ├── index.html │   └── ... ├── server <-- Sources du serveur en NodeJS exposant les données │   ├── ... │   ├── route <-- Dossier contenant les routes exposées par le serveur │   │   ├── graphql.js <-- Script pour exposer les données en GraphQL (à modifier) │   │   ├── rest.js <-- Script pour exposer les données en REST │   │   └── ... │   └── service │   └── index.js <-- Service qui permet d'accéder et modifier les données en base └── src <-- Sources du front en React (architecture create-react-app) ├── ...     ├── clients <-- Dossier contenant les routes exposées par le serveur │ ├── rest.js <-- Script permettant la récupération et manipulation des données via REST │ └── graphq.js <-- Script permettant la récupération et manipulation des données via GraphQL (à modifier) └── components    └── ... ``` Quand le projet est démarré (via `npm start`) deux tâches sont lancées en parallèle : - Un webpack-dev-server avec hot reload qui compile les sources du front en React (dans le dossier `/src`) et les expose sur l'adresse <http://localhost:3000>. Ce webpack-dev-server fait aussi proxy pour envoyer les requêtes XHR vers le serveur. - Un serveur NodeJS qui expose une api REST sur <http://localhost:3001/rest> et une api GraphQL sur <http://localhost:3001/graphql> Si vous faites ce workshop hors de la session Best Of Web, nous vous invitons à d'abord prendre connaissance du début de cette présentation jusqu'à la diapositive _Premier exercice_ : <https://slides.com/mbreton/graphql-workshop> > Les données sont enregistrées dans SQLite, sous la forme d'un fichier `blog.sqlite` à la racine du projet. Si vous souhaitez réinitialiser vos données, il vous suffit de supprimer ce fichier et redémarrer. ## Exercices ### Familiarisation avec GraphQL Dans cette première partie, vous allez vous familiariser avec le requêtage GraphQL et l'implémentation côté serveur pour lire des données. Présentation des points abordés : <https://slides.com/mbreton/graphql-workshop#/1> Énoncé : 1. Rendez-vous dans le ficher `server/route/graphql.js` pour y ajouter un type Query `posts` permettant de récupérer une liste de `Post`. <details> <summary style="color: #ccc;"><i>Découvrir la solution ici</i></summary> <pre> // ... const typeDefs = ` type Post { id: ID! title: String! content: String! } type Query { posts: [Post] } `); // ... </pre> </details> 2. Ajouter un resolver correspondant à la Query que venez d'ajouter. Vous pouvez vous appuyer sur la fonction `getPosts` du script `server/service/index.js` déjà importé dans `server/route/graphql.js`. Petite subtilité, cette fonction retourne une promesse. (plus d'information sur les resolvers asynchrones [ici](https://graphql.org/learn/execution/#asynchronous-resolvers)) <details> <summary style="color: #ccc;"><i>Découvrir la solution ici</i></summary> <pre> // ... const typeDefs = ` type Post { id: ID! title: String! content: String! } type Query { posts: [Post] } `); router.use( graphqlHTTP({ schema, rootValue: { posts() { return service.getPosts(); } }, graphiql: true }) ); // ... </pre> </details> Vous devez maintenant pouvoir requêter la liste des articles via GraphQL dans GraphiQL. <details> <summary style="color: #ccc;"><i>Comment requêter les données ?</i></summary> <pre> { posts { id title content } } </pre> </details> ### Graphql, partie client Nos données désormais disponibles via GraphQL sur notre serveur, il est temps de les afficher ! Présentation des points abordés : <https://slides.com/mbreton/graphql-workshop#/2> Énoncé : 1. Aller dans le fichier `src/clients/graphql.js`. Ce fichier est responsable de toutes les requêtes GraphQL envoyées par le front vers le backend. Implémenter la fonction `getPosts`, pour l'instant vide, afin de charger l'`id`, le `title` et le `content` des articles : ```javascript export async function getPosts() {} ``` Vous pouvez utiliser la librairie [axios](https://github.com/axios/axios) pour faire vos appels HTTP. Vérifiez que vous avez bien implémenté la fonction en retournant sur le blog <http://localhost:3000> voir que la liste des articles se charge bien avec l'interrupteur en mode GraphQL, si
评论
    相关推荐