You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: web-app/stories/Level.stories.tsx
+10-5Lines changed: 10 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -211,15 +211,17 @@ storiesOf('Level', module)
211
211
id:'L2',
212
212
title:'TypeDefs & Resolvers',
213
213
description:'Build endpoints for a User',
214
-
content:'Something about typeDefs & resolvers',
214
+
content:
215
+
'TypeDefs & Resolvers are the building blocks of GraphQL.\nTypeDefs are the "what", they spell out the shape of the graph. Think of typeDefs like a blueprint.\nResolvers define the "how" and "where", as in how the data is put into the graph and where it comes from.\nNote that there are a few special typeDefs you should know about, but we can start with one: `Query`. `Query` is the entry point for requests.\n',
215
216
setup:{
216
217
commits:['0d7543c'],
217
218
commands:['npm install'],
218
219
},
219
220
steps:[
220
221
{
221
222
id:'L2:S1',
222
-
content:'Setup typeDefs for viewer',
223
+
content:
224
+
'Start by defining **typeDefs** for the current user, we can call the user `Viewer`.\n```\ntype Query {\n viewer: User\n}\n```\nBut now you will have to define what `User` is below.\n```\ntype User {\n id: ID!\n firstName: String\n lastName: String\n}\n```',
223
225
setup:{
224
226
files:['src/typeDefs.ts'],
225
227
commits:['76890db'],
@@ -230,7 +232,8 @@ storiesOf('Level', module)
230
232
},
231
233
{
232
234
id:'L2:S2',
233
-
content:'viewer resolvers',
235
+
content:
236
+
'Now that we have typeDefs for `Viewer` and `User` we can define the **resolvers**.\nNotice there is user data located in the `src/data/users.ts` file. Import it.\n```ts\nimport users from "./data/users"\n```\nJust to keep things simple, you can resolve the `viewer` as the user with an id of `1`.\n```ts\nviewer() {\n return users.find(user => user.id === "1")\n}\n```\nRun the server and try your solution in the Playground to see if it worked. The query should look something like\n```\nquery {\n viewer\n}\n```\nHow can it work without resolving the User?',
234
237
setup:{
235
238
files:['src/resolvers.ts'],
236
239
commits:['646f930'],
@@ -241,7 +244,8 @@ storiesOf('Level', module)
241
244
},
242
245
{
243
246
id:'L2:S3',
244
-
content:'User friends typeDefs',
247
+
content:
248
+
'In GraphQL we follow a process: typeDefs then resolvers. We can practice the pattern\nAdd a list of friends to the user typeDef.\n```\ntype User {\n id: ID!\n firstName: String\n lastName: String\n friends: [User]\n }\n```\nNote that a typesDef can even call itself!',
245
249
setup:{
246
250
files:['src/typeDefs.ts'],
247
251
commits:['f00e6e6'],
@@ -252,7 +256,8 @@ storiesOf('Level', module)
252
256
},
253
257
{
254
258
id:'L2:S3',
255
-
content:'User friends resolver',
259
+
content:
260
+
'Next we can load the friends with resolvers. If you look in `src/data/users` you can see that users are stored as user ids.\n```json\n{\n id: 1,\n jsonfriends: [ "19", "22", "30" ]\n}\n```\nWe need to tell graphql to resolve the user ids on friends. We can use the first param passed into resolvers - often called **parent**. The parent `Viewer` passes params down to the child `User` which uses the ids to resolve the next users.\n```ts\nUser: {\n friends(parent) {\n const userFriends = parent.friends\n return users.filter(user => userFriends.includes(user.id))\n }\n}\n```',