graphql with node.js intro to server - frontend masters...2019/10/14 · node.js scott moss...
TRANSCRIPT
![Page 1: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/1.jpg)
Intro to Server GraphQL with Node.js
Scott MossFrontend Masters
![Page 2: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/2.jpg)
GraphQL, the big picture
![Page 3: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/3.jpg)
What is GraphQL?
A spec that describes a declarative query language that your
clients can use to ask an API for the exact data they want. This
is achieved by creating a strongly typed Schema for your API,
ultimate flexibility in how your API can resolve data, and client
queries validated against your Schema.
![Page 4: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/4.jpg)
It’s just a spec. There are several implementations and variations
![Page 5: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/5.jpg)
Server Side
● Type Definitions
● Resolvers
● Query Definitions
● Mutation Definitions
● Composition
● Schema
![Page 6: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/6.jpg)
Client Side
● Queries
● Mutations
● Fragments
![Page 7: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/7.jpg)
Where does GraphQL fit in?
● A GraphQL server with a connected DB (most greenfields)
● A GraphQL server as a layer in front of many 3rd party
services and connects them all with one GraphQL API
● A hybrid approach where a GraphQL server has a
connected DB and also communicates with 3rd party
services
![Page 8: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/8.jpg)
Node GraphQL Tools
● Servers○ Apollo server○ GraphQL Yoga○ … Others
● Services○ Amplify○ … others
● Tools○ Prisma○ … many many others
![Page 9: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/9.jpg)
Schemas
![Page 10: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/10.jpg)
Creating a Schema
● Using Schema Definition Language (SDL)
● Programmatically Creating a Schema using language
constructs
![Page 11: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/11.jpg)
Use the SDL to create your Schemas
![Page 12: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/12.jpg)
Basic parts
● Types - a construct defining a shape with fields
● Fields - keys on a Type that have a name and a value type
● Scalars - primitive value type built into GraphQL
● Query - type that defines how clients can access data
● Mutation- type that defines how clients can modify or
create data
![Page 13: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/13.jpg)
Hello World GraphQL API
Follow along
![Page 14: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/14.jpg)
Query Type
![Page 15: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/15.jpg)
What is a Query?
A Type on a Schema that defines operations clients can
perform to access data that resembles the shape of the other
Types in the Schema.
![Page 16: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/16.jpg)
Creating Queries
● Create Query Type in the Schema using SDL
● Add fields to the Query Type
● Create Resolvers that for the fields
![Page 17: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/17.jpg)
What are Resolvers?
Functions that are responsible for returning values for fields
that exist on Types in a Schema. Resolvers execution is
dependent on the incoming client Query.
![Page 18: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/18.jpg)
Creating Resolvers
● Resolver names must match the exact field name on your
Schema’s Types
● Resolvers must return the value type declared for the
matching field
● Resolvers can be async
● Can retrieve data from any source
![Page 19: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/19.jpg)
Schema + Resolvers ⇒ Server
To create a server, at minimum, we need a Query Type with a
field, and a Resolver for that field.
![Page 20: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/20.jpg)
Your turn
● Define a Query Type in your Schema
● Define fields on your Query Type
● Create Resolvers for the fields on your Query Type
● Create a server from your Schema and Resolvers
![Page 21: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/21.jpg)
Arguments and Input Types
![Page 22: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/22.jpg)
Arguments
● Allows clients to pass variables along with Queries that
can be used in your Resolvers to get data
● Must be defined in your Schema
● Can be added to any field
● Either have to be Scalars or Input Types
![Page 23: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/23.jpg)
Input Type
● Just like Types, but used for Arguments
● All field value types must be other Input Types or Scalars
![Page 24: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/24.jpg)
Arguments in Resolvers
● Arguments will be passed to field Resolvers as the second
argument
● The argument object will strictly follow the argument
names and field types
● Do whatever you want with them
![Page 25: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/25.jpg)
Your turn
● Create input Types for Query arguments
● Add arguments for your Queries
● Use arguments in your Query field resolvers to filter data
![Page 26: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/26.jpg)
Mutation Type
![Page 27: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/27.jpg)
What are Mutations?
A Type on a Schema that defines operations clients can
perform to mutate data (create, update, delete).
![Page 28: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/28.jpg)
Creating Mutations
● Define Mutation Type on Schema using SDL
● Add fields for Mutation type
● Add arguments for Mutation fields
● Create Resolvers for Mutation fields
![Page 29: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/29.jpg)
Return values for Mutation fields
● Dependent on your clients and use case
● If using a client side GraphQL cache, you should return the
exact values Queries return
![Page 30: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/30.jpg)
Your turn
● Define a Mutation Type in your Schema
● Add fields on your Mutation Type
● Create Input Types for your Mutation field arguments
● Create Resolvers for your Mutation Fields
![Page 31: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/31.jpg)
Advanced SDL
![Page 32: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/32.jpg)
Enums
A set of discrete values that can be used in place of Scalars. An
enum field must resolve to one of the values in the Enum.
Great for limiting a field to only a few different options.
![Page 33: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/33.jpg)
Interfaces
Abstract Types that can’t be used as field values but instead
used as foundations for explicit Types. Great for when you
have Types that share common fields, but differ slightly.
![Page 34: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/34.jpg)
Unions
Like interfaces, but without any defined common fields
amongst the Types. Useful when you need to access more than
one disjoint Type from one Query, like a search.
![Page 35: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/35.jpg)
Relationships
![Page 36: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/36.jpg)
Thinking in Graphs
Your API is no longer a predefined list of operations that
always return the same shapes. Instead, your API is a set of
Nodes that know how to resolve themselves and have links to
other Nodes. This allows a client to ask for Nodes and then
follow those links to get related Nodes.
![Page 37: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/37.jpg)
Adding Relationships
● Add a Type as a field value on another Type
● Create resolvers for those fields on the Type
![Page 38: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/38.jpg)
Your turn
● Add new fields on Types the reference other Types
● Create resolvers for field Types that point to Types
![Page 39: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/39.jpg)
![Page 40: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/40.jpg)
GraphQL, the big picture
![Page 41: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/41.jpg)
What is GraphQL?
A spec that describes a declarative query language that your
clients can use to ask an API for the exact data they want. This
is achieved by creating a strongly typed Schema for your API,
ultimate flexibility in how your API can resolve data, and client
queries validated against your Schema.
![Page 42: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/42.jpg)
It’s just a spec. There are several implementations and variations
![Page 43: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/43.jpg)
Server Side
● Type Definitions
● Resolvers
● Query Definitions
● Mutation Definitions
● Composition
● Schema
![Page 44: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/44.jpg)
Client Side
● Queries
● Mutations
● Fragments
![Page 45: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/45.jpg)
Where does GraphQL fit in?
● A GraphQL server with a connected DB (most greenfields)
● A GraphQL server as a layer in front of many 3rd party
services and connects them all with one GraphQL API
● A hybrid approach where a GraphQL server has a
connected DB and also communicates with 3rd party
services
![Page 46: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/46.jpg)
Queries and Mutations from the client
![Page 47: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/47.jpg)
Operation names
Unique names for your client side Query and Mutation
operations. Used for client side caching, indexing inside of
tools like GraphQL playground, etc. Like naming your
functions in JS vs keeping them anonymous.
![Page 48: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/48.jpg)
Variables with operations
Operations can define arguments, very much like a function in
most programming languages. Those variables can then be
passed to query / mutation calls inside the operation as
arguments. Variables are expected to be given at run time
during operation execution from your client.
![Page 49: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/49.jpg)
Apollo Client
![Page 50: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/50.jpg)
What is Apollo Client
Encapsulates HTTP logic used to interact with a GraphQL API.
Doubles as a client side state management alternative as well.
If your GraphQL API is also an Apollo Server, provides some
extra features. Offers a plug approach for extending its
capabilities. It’s also framework independent.
![Page 51: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/51.jpg)
Storing data from your API
● All nodes are stored flat by an unique ID
● Unique ID is defaulted to .id or ._id from nodes. You can
change this
● Every node should send an .id or ._id, or none at all. Or you
have to customize that logic
![Page 52: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/52.jpg)
Queries in React
![Page 53: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/53.jpg)
Mutations in React
![Page 54: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/54.jpg)
Keeping Cache in Sync
![Page 55: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/55.jpg)
Why is the cache out of sync?
If you perform a mutation that updates or creates a single
node, then apollo will update your cache automatically given
the mutation and query has the same fields and id.
If you perform a mutation that updates a node in a list or removes a node, you are responsible for updating any queries referencing that list or node. There are many ways to do this with apollo.
![Page 56: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/56.jpg)
Keeping cache in sync
● Refetch matching queries after a mutation
● Use update method on mutation
● Watch Queries
![Page 57: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/57.jpg)
Optimistic UI
![Page 58: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/58.jpg)
What is a Optimistic UI?
Your UI does not wait until after a mutation operation to
update itself. Instead, it anticipates the response from the API
and proceeds as if the API call was sync. The the API response
replaces the generated one. This gives the illusion of your
being really fast.
![Page 59: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/59.jpg)
Optimistic UI with mutations
Apollo provides a simple hook that allows you to write to the
local cache after a mutation.
![Page 60: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/60.jpg)
Client Side Schemas
![Page 61: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/61.jpg)
Why?
In addition to managing data from your API, apollo client can
also local state originated from your front end app. Stuff you
would normally store in something like Redux or Vuex. You
can create a schema to define that state which allows you to
query for that state the same way you query your API for data.
![Page 62: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/62.jpg)
How?
The exact same way as the server. You just have to extend the
Types from your server schema. You then use a directive to
access local state from your queries and mutations.
![Page 63: GraphQL with Node.js Intro to Server - Frontend Masters...2019/10/14 · Node.js Scott Moss Frontend Masters GraphQL, the big picture What is GraphQL? A spec that describes a declarative](https://reader033.vdocuments.net/reader033/viewer/2022060818/60af45bf3d52366e081358ed/html5/thumbnails/63.jpg)
You made it 💯