• Stars
    star
    191
  • Rank 202,877 (Top 4 %)
  • Language
    JavaScript
  • Created almost 6 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

[Course] Introduction to GraphQL

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!

More Repositories

1

front-end-handbook-2018

2018 edition of our front-end development handbook
HTML
4,187
star
2

front-end-handbook-2019

[Book] 2019 edition of our front-end development handbook
HTML
4,107
star
3

front-end-handbook-2017

2017 edition of our front-end development guide
HTML
3,824
star
4

front-end-handbook

The resources and tools for learning about the practice of front-end development.
HTML
1,799
star
5

front-end-handbook-2024

A guide to modern front-end web development / engineering.
HTML
1,182
star
6

learning-roadmap

The Front-End Developer Learning Roadmap by Frontend Masters
HTML
1,014
star
7

bootcamp

Frontend Masters Bootcamp
HTML
701
star
8

api-design-node-v3

[Course] API design in Node with Express v3
JavaScript
696
star
9

react-enlightenment

A thoughtful and complete introduction to React.
HTML
429
star
10

intro-node-js

[Course] Code for Introduction to Node.js
JavaScript
372
star
11

fullstack-graphql

JavaScript
370
star
12

fmmn

frontend masters minneapolis workshop notes
JavaScript
369
star
13

javascript-enlightenment

[Book] JavaScript (ES2015+) Enlightenment
HTML
308
star
14

api-design-node

[Course] API Design in Node.js code
JavaScript
256
star
15

remix-fundamentals

Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. Get a jumpstart on Remix with this workshop.
TypeScript
255
star
16

gatsby-intro

Code for the Introduction to Gatsby course.
JavaScript
253
star
17

api-design-node-v2

[Course] API Design in Node.js, v2: REST & GraphQL code
JavaScript
232
star
18

advanced-remix

Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll look at some more advanced use cases when building Remix applications.
TypeScript
186
star
19

intro-mongo-db

[Course] Introduction to MongoDB code
JavaScript
181
star
20

2015-02-13-React

[Course] Code for the 2015 React.js workshop with Ryan Florence
JavaScript
170
star
21

grid-flexbox-v2

Version 2 of the Flexbox and Grid course at Frontend Masters.
CSS
152
star
22

hardcore-functional-js-v2

Code for the Hardcore Functional JavaScript, v2 course
JavaScript
142
star
23

service-workers-offline

Code for the Service Workers / PWA section of the Service Workers & Offline course by Kyle Simpson
JavaScript
138
star
24

pure-react-state-management

Pure React State Management course documentation
134
star
25

serverless-with-aws

[Course] Serverless with AWS: Get a quick start into the world of Serverless functions with AWS Lambda.
JavaScript
134
star
26

fm-snippets

Code snippets for course annotations.
JavaScript
119
star
27

advanced-graphql

[Course] Advanced GraphQL - Learn advanced practices and techniques when when building a GraphQL API.
JavaScript
111
star
28

advanced-gql-v2

Code for the Advanced GraphQL Course on Frontend Masters
JavaScript
108
star
29

fm-transcripts

Transcripts of Frontend Masters Courses
91
star
30

ai-nodejs

JavaScript
85
star
31

react-state-management

64
star
32

hardcore-functional-architecture

JavaScript
57
star
33

angular-components

[Course] Code for the AngularJS 1.x Components & ES6 Course
JavaScript
57
star
34

react-web-starter

[Course] starter for react web app
JavaScript
53
star
35

ember-octane

Mike North's Ember Octane workshop
JavaScript
39
star
36

react-native-todo

[Course] Todo app for the React Native Course
Objective-C
32
star
37

ember-github-ui

[Course] Code for the Ember 2.x Course on Frontend Masters
JavaScript
28
star
38

getting-a-job-v3

Watch the course on Frontend Masters
28
star
39

sweat-book

[Course] Work out demo app for the React Native Course
26
star
40

observablish-values

JavaScript
25
star
41

web-workers

Code for the Web Workers section of the Service Workers course by Kyle Simpson
JavaScript
16
star
42

ember-commently

[Course] Code for the Comment.ly Ember.js app for the Advanced Ember 2.x course
CSS
12
star
43

ios-issues

Repository for managing publicly reported issues with the Frontend Masters iOS App
10
star
44

android-issues

Repository for managing publicly reported issues with the Frontend Masters Android App
6
star
45

fullstack-app-next-starter

TypeScript
5
star
46

blazingly-fast-js

JavaScript
5
star
47

javascript-fundamentals-v3

JavaScript
3
star
48

fem-htmx

JavaScript
2
star
49

gitbook-plugin-open-graph

Adds open graph and twitter share meta tags to gitbook
HTML
1
star
50

cielo24_php

[ARCHIVED] A PHP client library for the cielo24.com API
PHP
1
star