All Projects → FrontendMasters → Intro To Graphql

FrontendMasters / Intro To Graphql

[Course] Introduction to GraphQL

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Intro To Graphql

Graphql Advanced Projection
Fully customizable Mongoose/MongoDB projection generator.
Stars: ✭ 46 (-73.71%)
Mutual labels:  graphql, apollo-server, mongoose, mongodb
Frisky
🍿 Open Source GraphQL API for Online Shows
Stars: ✭ 161 (-8%)
Mutual labels:  graphql, mongoose, mongodb, express
Boilerplate Vue Apollo Graphql Mongodb
Start your magical stack journey!
Stars: ✭ 85 (-51.43%)
Mutual labels:  graphql, mongoose, mongodb, express
Apollo2 Subscriptions How To
Apollo Server 2 how to setup subscriptions
Stars: ✭ 125 (-28.57%)
Mutual labels:  graphql, apollo-server, mongoose, mongodb
Express Graphql Mongodb Boilerplate
A boilerplate for Node.js apps / GraphQL-API / Authentication from scratch - express, graphql - (graphql compose), mongodb (mongoose).
Stars: ✭ 288 (+64.57%)
Mutual labels:  graphql, mongoose, mongodb, express
Blog Service
blog service @nestjs
Stars: ✭ 188 (+7.43%)
Mutual labels:  graphql, mongoose, mongodb, express
Next Graphql Blog
🖊 A Blog including a server and a client. Server is built with Node, Express & a customized GraphQL-yoga server. Client is built with React, Next js & Apollo client.
Stars: ✭ 152 (-13.14%)
Mutual labels:  graphql, mongoose, mongodb, express
Nest Angular
NestJS, Angular 6, Server Side Rendering (Angular Universal), GraphQL, JWT (JSON Web Tokens) and Facebook/Twitter/Google Authentication, Mongoose, MongoDB, Webpack, TypeScript
Stars: ✭ 307 (+75.43%)
Mutual labels:  graphql, mongoose, mongodb, express
Nest User Auth
A starter build for a back end which implements managing users with MongoDB, Mongoose, NestJS, Passport-JWT, and GraphQL.
Stars: ✭ 145 (-17.14%)
Mutual labels:  graphql, apollo-server, mongoose, mongodb
Mern Boilerplate
Fullstack boilerplate with React, Redux, Express, Mongoose, Passport Local, JWT, Facebook and Google OAuth out of the box.
Stars: ✭ 112 (-36%)
Mutual labels:  mongoose, mongodb, express
Express Rest Boilerplate
⌛️ Express starter for building RESTful APIs
Stars: ✭ 1,794 (+925.14%)
Mutual labels:  mongoose, mongodb, express
Graphql Nodejs Hapi Api
How to set-up a powerful API with Nodejs, GraphQL, MongoDB, Hapi, and Swagger
Stars: ✭ 116 (-33.71%)
Mutual labels:  graphql, mongoose, mongodb
Nightcat
个人博客,技术栈:NodeJS + Express + mongoose + GraphQL + Vue 全家桶
Stars: ✭ 97 (-44.57%)
Mutual labels:  graphql, mongoose, express
Angular Full Stack
Angular Full Stack project built using Angular, Express, Mongoose and Node. Whole stack in TypeScript.
Stars: ✭ 1,261 (+620.57%)
Mutual labels:  mongoose, mongodb, express
Fullstack Shopping Cart
MERN stack shopping cart, written in TypeScript
Stars: ✭ 82 (-53.14%)
Mutual labels:  mongoose, mongodb, express
Isomorphic Redux Cnode
😊👻基于react->express->mongo技术栈的同构SPA
Stars: ✭ 123 (-29.71%)
Mutual labels:  mongoose, mongodb, express
Questionnaire
📋 问卷系统
Stars: ✭ 128 (-26.86%)
Mutual labels:  mongoose, mongodb, express
Ecommerce Site Template
A beautiful e-commerce template powered by React, Redux and other modern web tech.
Stars: ✭ 167 (-4.57%)
Mutual labels:  mongoose, mongodb, express
Node Elm
基于 node.js + Mongodb 构建的后台系统
Stars: ✭ 11,224 (+6313.71%)
Mutual labels:  mongoose, mongodb, express
Api.xiaoduyu.com
🐟小度鱼 - 年轻人的交流社区 https://www.xiaoduyu.com
Stars: ✭ 168 (-4%)
Mutual labels:  graphql, mongodb, express

Intro to GraphQL

Scott Moss & Frontend Masters

Resources

Course

This course has two parts, slides and excercises. The slides describe the excerices in detail. Each excercise has a starting branch and solution branch. Example lesson-1 and lesson-1-solution.

Excercises

Hello world GraphQL server with Apollo Server

  • branch - lesson-1

Note: ensure that you have MongoDB installed, and the server is running. See their website

In this lesson you'll be creating a simple GraphQL server using Apollo Server.

  • [ ] install dependencies with yarn (prefered for version locking) or npm
  • [ ] create a schema with at least one Type
  • [ ] create a query from that Type
  • [ ] create a mutation for that Type
  • [ ] create mock resolvers for query and mutation
  • [ ] start the server
  • [ ] using GraphQL playground, perform query and mutation

Creating Schema with SDL

  • branch - lesson-2
  • test command - yarn test-schema or npm run test-schema

This exercise will have you creating a GraphQL Schema based on the the mongoose models already created

  • [ ] create Type for product
  • [ ] create inputs for product
  • [ ] create queries for product
  • [ ] create mutations for product
  • [ ] ensure all tests pass by running test command

Resolving Queries and Mutations

  • branch - lesson-3
  • test command - yarn test-resolvers or npm run test-resolvers

In this exercise, you'll be creating resolvers for the Queries and Mutations on the product type. You'll be using Mongoose models to perform CRUD in your resolvers.

  • [ ] create resolvers for product queries
  • [ ] create resolvers for product mutations
  • [ ] create resolvers for prouduct createdBy field
  • [ ] ensure all tests pass by running test command

Interfaces and Unions

  • branch - lesson-4
  • test command - yarn test-interfaces or npm run test-interfaces

Now that you know about schemas and resolvers, we need to make some changes. Our product model in mongoose is split between 3 different product types. We need to make the product type an interface and then create types for each possible type in our mongoose model. Don't forget to create resolver to resolve the type.

  • [ ] change product type to an interface
  • [ ] create Bike type that implements product
  • [ ] create GamingPc type that implements product
  • [ ] create Drone type that implements product
  • [ ] create resolver for product interface that resolves the type
  • [ ] ensure all tests pass by running test command

Authentication

  • branch - lesson-5
  • test command - yarn test-auth or npm run test-auth

There are many many ways to authenticate with GraphQL. Our API is a public API, so we'll use API keys. Some queries need authentication, and some queries also need the correct role. Authenticate the request and update the product resolvers!

  • [ ] authenticate the request and add use to context
  • [ ] block all product queries and mutations if no user
  • [ ] block all product mutations if not an admin role
  • [ ] ensure all tests pass by running test command

Testing

The other types don't have any test, go ahead and write some!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].