├── .eslintrc ├── .gitattributes ├── .gitignore ├── README.md ├── babel.config.js ├── data ├── schema.graphql └── schema.json ├── package.json ├── relay.config.js ├── src ├── App.tsx ├── UserList.tsx ├── __tests__ │ └── app.test.tsx ├── index.html ├── index.tsx └── relay │ ├── Environment.tsx │ ├── ExecuteEnvironment.tsx │ ├── cacheHandler.tsx │ ├── createQueryRendererModern.tsx │ ├── fetchQuery.tsx │ ├── fetchWithRetries.tsx │ ├── helpers.tsx │ ├── index.tsx │ └── mutationUtils.tsx ├── test_utils └── stub.js ├── tsconfig.json ├── webpackCommonConfig.js ├── webpackDevConfig.js ├── webpackProdConfig.js └── yarn.lock /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "jest": true 7 | }, 8 | "parserOptions": { 9 | "ecmaVersion": 6, 10 | "sourceType": "module", 11 | "ecmaFeatures": { 12 | "jsx": true, 13 | "modules": true 14 | } 15 | }, 16 | "settings": { 17 | "react": { 18 | "createClass": "createReactClass", 19 | "pragma": "React", 20 | "version": "16.6" 21 | } 22 | }, 23 | "plugins": [ 24 | "react" 25 | ], 26 | "extends": [ 27 | "eslint:recommended", 28 | "plugin:react/recommended" 29 | ] 30 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | schema.json linguist-generated 2 | *.pbxproj -text 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **/node_modules 3 | npm-debug.log 4 | .DS_Store 5 | dist 6 | build 7 | .idea 8 | yarn-error.log 9 | .cache 10 | .vs/ 11 | 12 | # IDE/Editor GraphQL Extensions 13 | graphql.*.json 14 | .gqlconfig 15 | 16 | .env 17 | 18 | # Relay modern 19 | __generated__/ 20 | 21 | # Flow log 22 | flow.log 23 | 24 | # Jest junit file 25 | coverage 26 | junit.xml 27 | 28 | # Random things to ignore 29 | ignore/ 30 | package-lock.json 31 | yarn-offline-cache 32 | 33 | hard-source-cache/ 34 | **/hard-source-cache/ 35 | 36 | # Cypress 37 | cypress/videos 38 | cypress/screenshots 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Relay Modern Typescript 2 | 3 | Starter of Relay Modern with Typescript using Webpack on Web 4 | 5 | ### Setup 6 | 7 | - Install dependencies 8 | ```bash 9 | yarn install 10 | ``` 11 | 12 | - Run relay-compiler to generate GraphQL artifacts (static queries) 13 | ```bash 14 | yarn relay 15 | ``` 16 | 17 | - Start web app 18 | ```bash 19 | yarn start 20 | ``` 21 | 22 | Open web app at: 23 | 24 | http://[::]:55555 (ipv6) or 25 | http://localhost:55555 (ipv4) 26 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | api.cache.using(() => process.env.NODE_ENV); 3 | 4 | const enableFastRefresh = !api.env("production") && !api.env("test"); 5 | 6 | return { 7 | presets: [ 8 | "@babel/preset-react", 9 | [ 10 | "@babel/preset-env", 11 | { 12 | corejs: 3, 13 | modules: false, 14 | useBuiltIns: "usage", 15 | }, 16 | ], 17 | "@babel/preset-typescript", 18 | ], 19 | plugins: [ 20 | [ 21 | "relay", 22 | { 23 | schema: "./data/schema.json", 24 | }, 25 | ], 26 | "@babel/plugin-proposal-object-rest-spread", 27 | "@babel/plugin-proposal-class-properties", 28 | "@babel/plugin-proposal-export-default-from", 29 | "@babel/plugin-proposal-export-namespace-from", 30 | // Applies the react-refresh Babel plugin on non-production modes only 31 | ...(enableFastRefresh ? ["react-refresh/babel"] : []), 32 | ], 33 | }; 34 | }; 35 | -------------------------------------------------------------------------------- /data/schema.graphql: -------------------------------------------------------------------------------- 1 | type Mutation { 2 | UserChangePassword(input: UserChangePasswordInput!): UserChangePasswordPayload 3 | UserLoginWithEmail(input: UserLoginWithEmailInput!): UserLoginWithEmailPayload 4 | UserRegisterWithEmail(input: UserRegisterWithEmailInput!): UserRegisterWithEmailPayload 5 | } 6 | 7 | """An object with an ID""" 8 | interface Node { 9 | """The id of the object.""" 10 | id: ID! 11 | } 12 | 13 | """Information about pagination in a connection.""" 14 | type PageInfoExtended { 15 | """When paginating forwards, are there more items?""" 16 | hasNextPage: Boolean! 17 | 18 | """When paginating backwards, are there more items?""" 19 | hasPreviousPage: Boolean! 20 | 21 | """When paginating backwards, the cursor to continue.""" 22 | startCursor: String 23 | 24 | """When paginating forwards, the cursor to continue.""" 25 | endCursor: String 26 | } 27 | 28 | """The root of all... queries""" 29 | type Query { 30 | """Fetches an object given its ID""" 31 | node( 32 | """The ID of an object""" 33 | id: ID! 34 | ): Node 35 | me: User 36 | user(id: ID!): User 37 | users(after: String, first: Int, before: String, last: Int, search: String): UserConnection 38 | } 39 | 40 | type Subscription { 41 | UserAdded: UserAddedPayload 42 | } 43 | 44 | """User data""" 45 | type User implements Node { 46 | """The ID of an object""" 47 | id: ID! 48 | _id: String 49 | name: String 50 | email: String 51 | active: Boolean 52 | } 53 | 54 | type UserAddedPayload { 55 | userEdge: UserEdge 56 | } 57 | 58 | input UserChangePasswordInput { 59 | oldPassword: String! 60 | 61 | """user new password""" 62 | password: String! 63 | clientMutationId: String 64 | } 65 | 66 | type UserChangePasswordPayload { 67 | error: String 68 | me: User 69 | clientMutationId: String 70 | } 71 | 72 | """A connection to a list of items.""" 73 | type UserConnection { 74 | """Number of items in this connection""" 75 | count: Int! 76 | 77 | """ 78 | A count of the total number of objects in this connection, ignoring pagination. 79 | This allows a client to fetch the first five objects by passing "5" as the 80 | argument to "first", then fetch the total count so it could display "5 of 83", 81 | for example. 82 | """ 83 | totalCount: Int! 84 | 85 | """Offset from start""" 86 | startCursorOffset: Int! 87 | 88 | """Offset till end""" 89 | endCursorOffset: Int! 90 | 91 | """Information to aid in pagination.""" 92 | pageInfo: PageInfoExtended! 93 | 94 | """A list of edges.""" 95 | edges: [UserEdge]! 96 | } 97 | 98 | """An edge in a connection.""" 99 | type UserEdge { 100 | """The item at the end of the edge""" 101 | node: User! 102 | 103 | """A cursor for use in pagination""" 104 | cursor: String! 105 | } 106 | 107 | input UserLoginWithEmailInput { 108 | email: String! 109 | password: String! 110 | clientMutationId: String 111 | } 112 | 113 | type UserLoginWithEmailPayload { 114 | token: String 115 | error: String 116 | clientMutationId: String 117 | } 118 | 119 | input UserRegisterWithEmailInput { 120 | name: String! 121 | email: String! 122 | password: String! 123 | clientMutationId: String 124 | } 125 | 126 | type UserRegisterWithEmailPayload { 127 | token: String 128 | error: String 129 | clientMutationId: String 130 | } 131 | -------------------------------------------------------------------------------- /data/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": { 3 | "__schema": { 4 | "queryType": { 5 | "name": "Query" 6 | }, 7 | "mutationType": { 8 | "name": "Mutation" 9 | }, 10 | "subscriptionType": { 11 | "name": "Subscription" 12 | }, 13 | "types": [ 14 | { 15 | "kind": "OBJECT", 16 | "name": "Query", 17 | "description": "The root of all... queries", 18 | "fields": [ 19 | { 20 | "name": "node", 21 | "description": "Fetches an object given its ID", 22 | "args": [ 23 | { 24 | "name": "id", 25 | "description": "The ID of an object", 26 | "type": { 27 | "kind": "NON_NULL", 28 | "name": null, 29 | "ofType": { 30 | "kind": "SCALAR", 31 | "name": "ID", 32 | "ofType": null 33 | } 34 | }, 35 | "defaultValue": null 36 | } 37 | ], 38 | "type": { 39 | "kind": "INTERFACE", 40 | "name": "Node", 41 | "ofType": null 42 | }, 43 | "isDeprecated": false, 44 | "deprecationReason": null 45 | }, 46 | { 47 | "name": "me", 48 | "description": null, 49 | "args": [], 50 | "type": { 51 | "kind": "OBJECT", 52 | "name": "User", 53 | "ofType": null 54 | }, 55 | "isDeprecated": false, 56 | "deprecationReason": null 57 | }, 58 | { 59 | "name": "user", 60 | "description": null, 61 | "args": [ 62 | { 63 | "name": "id", 64 | "description": null, 65 | "type": { 66 | "kind": "NON_NULL", 67 | "name": null, 68 | "ofType": { 69 | "kind": "SCALAR", 70 | "name": "ID", 71 | "ofType": null 72 | } 73 | }, 74 | "defaultValue": null 75 | } 76 | ], 77 | "type": { 78 | "kind": "OBJECT", 79 | "name": "User", 80 | "ofType": null 81 | }, 82 | "isDeprecated": false, 83 | "deprecationReason": null 84 | }, 85 | { 86 | "name": "users", 87 | "description": null, 88 | "args": [ 89 | { 90 | "name": "after", 91 | "description": null, 92 | "type": { 93 | "kind": "SCALAR", 94 | "name": "String", 95 | "ofType": null 96 | }, 97 | "defaultValue": null 98 | }, 99 | { 100 | "name": "first", 101 | "description": null, 102 | "type": { 103 | "kind": "SCALAR", 104 | "name": "Int", 105 | "ofType": null 106 | }, 107 | "defaultValue": null 108 | }, 109 | { 110 | "name": "before", 111 | "description": null, 112 | "type": { 113 | "kind": "SCALAR", 114 | "name": "String", 115 | "ofType": null 116 | }, 117 | "defaultValue": null 118 | }, 119 | { 120 | "name": "last", 121 | "description": null, 122 | "type": { 123 | "kind": "SCALAR", 124 | "name": "Int", 125 | "ofType": null 126 | }, 127 | "defaultValue": null 128 | }, 129 | { 130 | "name": "search", 131 | "description": null, 132 | "type": { 133 | "kind": "SCALAR", 134 | "name": "String", 135 | "ofType": null 136 | }, 137 | "defaultValue": null 138 | } 139 | ], 140 | "type": { 141 | "kind": "OBJECT", 142 | "name": "UserConnection", 143 | "ofType": null 144 | }, 145 | "isDeprecated": false, 146 | "deprecationReason": null 147 | } 148 | ], 149 | "inputFields": null, 150 | "interfaces": [], 151 | "enumValues": null, 152 | "possibleTypes": null 153 | }, 154 | { 155 | "kind": "SCALAR", 156 | "name": "ID", 157 | "description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.", 158 | "fields": null, 159 | "inputFields": null, 160 | "interfaces": null, 161 | "enumValues": null, 162 | "possibleTypes": null 163 | }, 164 | { 165 | "kind": "INTERFACE", 166 | "name": "Node", 167 | "description": "An object with an ID", 168 | "fields": [ 169 | { 170 | "name": "id", 171 | "description": "The id of the object.", 172 | "args": [], 173 | "type": { 174 | "kind": "NON_NULL", 175 | "name": null, 176 | "ofType": { 177 | "kind": "SCALAR", 178 | "name": "ID", 179 | "ofType": null 180 | } 181 | }, 182 | "isDeprecated": false, 183 | "deprecationReason": null 184 | } 185 | ], 186 | "inputFields": null, 187 | "interfaces": null, 188 | "enumValues": null, 189 | "possibleTypes": [ 190 | { 191 | "kind": "OBJECT", 192 | "name": "User", 193 | "ofType": null 194 | } 195 | ] 196 | }, 197 | { 198 | "kind": "OBJECT", 199 | "name": "User", 200 | "description": "User data", 201 | "fields": [ 202 | { 203 | "name": "id", 204 | "description": "The ID of an object", 205 | "args": [], 206 | "type": { 207 | "kind": "NON_NULL", 208 | "name": null, 209 | "ofType": { 210 | "kind": "SCALAR", 211 | "name": "ID", 212 | "ofType": null 213 | } 214 | }, 215 | "isDeprecated": false, 216 | "deprecationReason": null 217 | }, 218 | { 219 | "name": "_id", 220 | "description": null, 221 | "args": [], 222 | "type": { 223 | "kind": "SCALAR", 224 | "name": "String", 225 | "ofType": null 226 | }, 227 | "isDeprecated": false, 228 | "deprecationReason": null 229 | }, 230 | { 231 | "name": "name", 232 | "description": null, 233 | "args": [], 234 | "type": { 235 | "kind": "SCALAR", 236 | "name": "String", 237 | "ofType": null 238 | }, 239 | "isDeprecated": false, 240 | "deprecationReason": null 241 | }, 242 | { 243 | "name": "email", 244 | "description": null, 245 | "args": [], 246 | "type": { 247 | "kind": "SCALAR", 248 | "name": "String", 249 | "ofType": null 250 | }, 251 | "isDeprecated": false, 252 | "deprecationReason": null 253 | }, 254 | { 255 | "name": "active", 256 | "description": null, 257 | "args": [], 258 | "type": { 259 | "kind": "SCALAR", 260 | "name": "Boolean", 261 | "ofType": null 262 | }, 263 | "isDeprecated": false, 264 | "deprecationReason": null 265 | } 266 | ], 267 | "inputFields": null, 268 | "interfaces": [ 269 | { 270 | "kind": "INTERFACE", 271 | "name": "Node", 272 | "ofType": null 273 | } 274 | ], 275 | "enumValues": null, 276 | "possibleTypes": null 277 | }, 278 | { 279 | "kind": "SCALAR", 280 | "name": "String", 281 | "description": "The `String` scalar type represents textual data, represented as UTF-8 character sequences. The String type is most often used by GraphQL to represent free-form human-readable text.", 282 | "fields": null, 283 | "inputFields": null, 284 | "interfaces": null, 285 | "enumValues": null, 286 | "possibleTypes": null 287 | }, 288 | { 289 | "kind": "SCALAR", 290 | "name": "Boolean", 291 | "description": "The `Boolean` scalar type represents `true` or `false`.", 292 | "fields": null, 293 | "inputFields": null, 294 | "interfaces": null, 295 | "enumValues": null, 296 | "possibleTypes": null 297 | }, 298 | { 299 | "kind": "SCALAR", 300 | "name": "Int", 301 | "description": "The `Int` scalar type represents non-fractional signed whole numeric values. Int can represent values between -(2^31) and 2^31 - 1. ", 302 | "fields": null, 303 | "inputFields": null, 304 | "interfaces": null, 305 | "enumValues": null, 306 | "possibleTypes": null 307 | }, 308 | { 309 | "kind": "OBJECT", 310 | "name": "UserConnection", 311 | "description": "A connection to a list of items.", 312 | "fields": [ 313 | { 314 | "name": "count", 315 | "description": "Number of items in this connection", 316 | "args": [], 317 | "type": { 318 | "kind": "NON_NULL", 319 | "name": null, 320 | "ofType": { 321 | "kind": "SCALAR", 322 | "name": "Int", 323 | "ofType": null 324 | } 325 | }, 326 | "isDeprecated": false, 327 | "deprecationReason": null 328 | }, 329 | { 330 | "name": "totalCount", 331 | "description": "A count of the total number of objects in this connection, ignoring pagination.\n This allows a client to fetch the first five objects by passing \"5\" as the\n argument to \"first\", then fetch the total count so it could display \"5 of 83\",\n for example.", 332 | "args": [], 333 | "type": { 334 | "kind": "NON_NULL", 335 | "name": null, 336 | "ofType": { 337 | "kind": "SCALAR", 338 | "name": "Int", 339 | "ofType": null 340 | } 341 | }, 342 | "isDeprecated": false, 343 | "deprecationReason": null 344 | }, 345 | { 346 | "name": "startCursorOffset", 347 | "description": "Offset from start", 348 | "args": [], 349 | "type": { 350 | "kind": "NON_NULL", 351 | "name": null, 352 | "ofType": { 353 | "kind": "SCALAR", 354 | "name": "Int", 355 | "ofType": null 356 | } 357 | }, 358 | "isDeprecated": false, 359 | "deprecationReason": null 360 | }, 361 | { 362 | "name": "endCursorOffset", 363 | "description": "Offset till end", 364 | "args": [], 365 | "type": { 366 | "kind": "NON_NULL", 367 | "name": null, 368 | "ofType": { 369 | "kind": "SCALAR", 370 | "name": "Int", 371 | "ofType": null 372 | } 373 | }, 374 | "isDeprecated": false, 375 | "deprecationReason": null 376 | }, 377 | { 378 | "name": "pageInfo", 379 | "description": "Information to aid in pagination.", 380 | "args": [], 381 | "type": { 382 | "kind": "NON_NULL", 383 | "name": null, 384 | "ofType": { 385 | "kind": "OBJECT", 386 | "name": "PageInfoExtended", 387 | "ofType": null 388 | } 389 | }, 390 | "isDeprecated": false, 391 | "deprecationReason": null 392 | }, 393 | { 394 | "name": "edges", 395 | "description": "A list of edges.", 396 | "args": [], 397 | "type": { 398 | "kind": "NON_NULL", 399 | "name": null, 400 | "ofType": { 401 | "kind": "LIST", 402 | "name": null, 403 | "ofType": { 404 | "kind": "OBJECT", 405 | "name": "UserEdge", 406 | "ofType": null 407 | } 408 | } 409 | }, 410 | "isDeprecated": false, 411 | "deprecationReason": null 412 | } 413 | ], 414 | "inputFields": null, 415 | "interfaces": [], 416 | "enumValues": null, 417 | "possibleTypes": null 418 | }, 419 | { 420 | "kind": "OBJECT", 421 | "name": "PageInfoExtended", 422 | "description": "Information about pagination in a connection.", 423 | "fields": [ 424 | { 425 | "name": "hasNextPage", 426 | "description": "When paginating forwards, are there more items?", 427 | "args": [], 428 | "type": { 429 | "kind": "NON_NULL", 430 | "name": null, 431 | "ofType": { 432 | "kind": "SCALAR", 433 | "name": "Boolean", 434 | "ofType": null 435 | } 436 | }, 437 | "isDeprecated": false, 438 | "deprecationReason": null 439 | }, 440 | { 441 | "name": "hasPreviousPage", 442 | "description": "When paginating backwards, are there more items?", 443 | "args": [], 444 | "type": { 445 | "kind": "NON_NULL", 446 | "name": null, 447 | "ofType": { 448 | "kind": "SCALAR", 449 | "name": "Boolean", 450 | "ofType": null 451 | } 452 | }, 453 | "isDeprecated": false, 454 | "deprecationReason": null 455 | }, 456 | { 457 | "name": "startCursor", 458 | "description": "When paginating backwards, the cursor to continue.", 459 | "args": [], 460 | "type": { 461 | "kind": "SCALAR", 462 | "name": "String", 463 | "ofType": null 464 | }, 465 | "isDeprecated": false, 466 | "deprecationReason": null 467 | }, 468 | { 469 | "name": "endCursor", 470 | "description": "When paginating forwards, the cursor to continue.", 471 | "args": [], 472 | "type": { 473 | "kind": "SCALAR", 474 | "name": "String", 475 | "ofType": null 476 | }, 477 | "isDeprecated": false, 478 | "deprecationReason": null 479 | } 480 | ], 481 | "inputFields": null, 482 | "interfaces": [], 483 | "enumValues": null, 484 | "possibleTypes": null 485 | }, 486 | { 487 | "kind": "OBJECT", 488 | "name": "UserEdge", 489 | "description": "An edge in a connection.", 490 | "fields": [ 491 | { 492 | "name": "node", 493 | "description": "The item at the end of the edge", 494 | "args": [], 495 | "type": { 496 | "kind": "NON_NULL", 497 | "name": null, 498 | "ofType": { 499 | "kind": "OBJECT", 500 | "name": "User", 501 | "ofType": null 502 | } 503 | }, 504 | "isDeprecated": false, 505 | "deprecationReason": null 506 | }, 507 | { 508 | "name": "cursor", 509 | "description": "A cursor for use in pagination", 510 | "args": [], 511 | "type": { 512 | "kind": "NON_NULL", 513 | "name": null, 514 | "ofType": { 515 | "kind": "SCALAR", 516 | "name": "String", 517 | "ofType": null 518 | } 519 | }, 520 | "isDeprecated": false, 521 | "deprecationReason": null 522 | } 523 | ], 524 | "inputFields": null, 525 | "interfaces": [], 526 | "enumValues": null, 527 | "possibleTypes": null 528 | }, 529 | { 530 | "kind": "OBJECT", 531 | "name": "Mutation", 532 | "description": null, 533 | "fields": [ 534 | { 535 | "name": "UserChangePassword", 536 | "description": null, 537 | "args": [ 538 | { 539 | "name": "input", 540 | "description": null, 541 | "type": { 542 | "kind": "NON_NULL", 543 | "name": null, 544 | "ofType": { 545 | "kind": "INPUT_OBJECT", 546 | "name": "UserChangePasswordInput", 547 | "ofType": null 548 | } 549 | }, 550 | "defaultValue": null 551 | } 552 | ], 553 | "type": { 554 | "kind": "OBJECT", 555 | "name": "UserChangePasswordPayload", 556 | "ofType": null 557 | }, 558 | "isDeprecated": false, 559 | "deprecationReason": null 560 | }, 561 | { 562 | "name": "UserLoginWithEmail", 563 | "description": null, 564 | "args": [ 565 | { 566 | "name": "input", 567 | "description": null, 568 | "type": { 569 | "kind": "NON_NULL", 570 | "name": null, 571 | "ofType": { 572 | "kind": "INPUT_OBJECT", 573 | "name": "UserLoginWithEmailInput", 574 | "ofType": null 575 | } 576 | }, 577 | "defaultValue": null 578 | } 579 | ], 580 | "type": { 581 | "kind": "OBJECT", 582 | "name": "UserLoginWithEmailPayload", 583 | "ofType": null 584 | }, 585 | "isDeprecated": false, 586 | "deprecationReason": null 587 | }, 588 | { 589 | "name": "UserRegisterWithEmail", 590 | "description": null, 591 | "args": [ 592 | { 593 | "name": "input", 594 | "description": null, 595 | "type": { 596 | "kind": "NON_NULL", 597 | "name": null, 598 | "ofType": { 599 | "kind": "INPUT_OBJECT", 600 | "name": "UserRegisterWithEmailInput", 601 | "ofType": null 602 | } 603 | }, 604 | "defaultValue": null 605 | } 606 | ], 607 | "type": { 608 | "kind": "OBJECT", 609 | "name": "UserRegisterWithEmailPayload", 610 | "ofType": null 611 | }, 612 | "isDeprecated": false, 613 | "deprecationReason": null 614 | } 615 | ], 616 | "inputFields": null, 617 | "interfaces": [], 618 | "enumValues": null, 619 | "possibleTypes": null 620 | }, 621 | { 622 | "kind": "INPUT_OBJECT", 623 | "name": "UserChangePasswordInput", 624 | "description": null, 625 | "fields": null, 626 | "inputFields": [ 627 | { 628 | "name": "oldPassword", 629 | "description": null, 630 | "type": { 631 | "kind": "NON_NULL", 632 | "name": null, 633 | "ofType": { 634 | "kind": "SCALAR", 635 | "name": "String", 636 | "ofType": null 637 | } 638 | }, 639 | "defaultValue": null 640 | }, 641 | { 642 | "name": "password", 643 | "description": "user new password", 644 | "type": { 645 | "kind": "NON_NULL", 646 | "name": null, 647 | "ofType": { 648 | "kind": "SCALAR", 649 | "name": "String", 650 | "ofType": null 651 | } 652 | }, 653 | "defaultValue": null 654 | }, 655 | { 656 | "name": "clientMutationId", 657 | "description": null, 658 | "type": { 659 | "kind": "SCALAR", 660 | "name": "String", 661 | "ofType": null 662 | }, 663 | "defaultValue": null 664 | } 665 | ], 666 | "interfaces": null, 667 | "enumValues": null, 668 | "possibleTypes": null 669 | }, 670 | { 671 | "kind": "OBJECT", 672 | "name": "UserChangePasswordPayload", 673 | "description": null, 674 | "fields": [ 675 | { 676 | "name": "error", 677 | "description": null, 678 | "args": [], 679 | "type": { 680 | "kind": "SCALAR", 681 | "name": "String", 682 | "ofType": null 683 | }, 684 | "isDeprecated": false, 685 | "deprecationReason": null 686 | }, 687 | { 688 | "name": "me", 689 | "description": null, 690 | "args": [], 691 | "type": { 692 | "kind": "OBJECT", 693 | "name": "User", 694 | "ofType": null 695 | }, 696 | "isDeprecated": false, 697 | "deprecationReason": null 698 | }, 699 | { 700 | "name": "clientMutationId", 701 | "description": null, 702 | "args": [], 703 | "type": { 704 | "kind": "SCALAR", 705 | "name": "String", 706 | "ofType": null 707 | }, 708 | "isDeprecated": false, 709 | "deprecationReason": null 710 | } 711 | ], 712 | "inputFields": null, 713 | "interfaces": [], 714 | "enumValues": null, 715 | "possibleTypes": null 716 | }, 717 | { 718 | "kind": "INPUT_OBJECT", 719 | "name": "UserLoginWithEmailInput", 720 | "description": null, 721 | "fields": null, 722 | "inputFields": [ 723 | { 724 | "name": "email", 725 | "description": null, 726 | "type": { 727 | "kind": "NON_NULL", 728 | "name": null, 729 | "ofType": { 730 | "kind": "SCALAR", 731 | "name": "String", 732 | "ofType": null 733 | } 734 | }, 735 | "defaultValue": null 736 | }, 737 | { 738 | "name": "password", 739 | "description": null, 740 | "type": { 741 | "kind": "NON_NULL", 742 | "name": null, 743 | "ofType": { 744 | "kind": "SCALAR", 745 | "name": "String", 746 | "ofType": null 747 | } 748 | }, 749 | "defaultValue": null 750 | }, 751 | { 752 | "name": "clientMutationId", 753 | "description": null, 754 | "type": { 755 | "kind": "SCALAR", 756 | "name": "String", 757 | "ofType": null 758 | }, 759 | "defaultValue": null 760 | } 761 | ], 762 | "interfaces": null, 763 | "enumValues": null, 764 | "possibleTypes": null 765 | }, 766 | { 767 | "kind": "OBJECT", 768 | "name": "UserLoginWithEmailPayload", 769 | "description": null, 770 | "fields": [ 771 | { 772 | "name": "token", 773 | "description": null, 774 | "args": [], 775 | "type": { 776 | "kind": "SCALAR", 777 | "name": "String", 778 | "ofType": null 779 | }, 780 | "isDeprecated": false, 781 | "deprecationReason": null 782 | }, 783 | { 784 | "name": "error", 785 | "description": null, 786 | "args": [], 787 | "type": { 788 | "kind": "SCALAR", 789 | "name": "String", 790 | "ofType": null 791 | }, 792 | "isDeprecated": false, 793 | "deprecationReason": null 794 | }, 795 | { 796 | "name": "clientMutationId", 797 | "description": null, 798 | "args": [], 799 | "type": { 800 | "kind": "SCALAR", 801 | "name": "String", 802 | "ofType": null 803 | }, 804 | "isDeprecated": false, 805 | "deprecationReason": null 806 | } 807 | ], 808 | "inputFields": null, 809 | "interfaces": [], 810 | "enumValues": null, 811 | "possibleTypes": null 812 | }, 813 | { 814 | "kind": "INPUT_OBJECT", 815 | "name": "UserRegisterWithEmailInput", 816 | "description": null, 817 | "fields": null, 818 | "inputFields": [ 819 | { 820 | "name": "name", 821 | "description": null, 822 | "type": { 823 | "kind": "NON_NULL", 824 | "name": null, 825 | "ofType": { 826 | "kind": "SCALAR", 827 | "name": "String", 828 | "ofType": null 829 | } 830 | }, 831 | "defaultValue": null 832 | }, 833 | { 834 | "name": "email", 835 | "description": null, 836 | "type": { 837 | "kind": "NON_NULL", 838 | "name": null, 839 | "ofType": { 840 | "kind": "SCALAR", 841 | "name": "String", 842 | "ofType": null 843 | } 844 | }, 845 | "defaultValue": null 846 | }, 847 | { 848 | "name": "password", 849 | "description": null, 850 | "type": { 851 | "kind": "NON_NULL", 852 | "name": null, 853 | "ofType": { 854 | "kind": "SCALAR", 855 | "name": "String", 856 | "ofType": null 857 | } 858 | }, 859 | "defaultValue": null 860 | }, 861 | { 862 | "name": "clientMutationId", 863 | "description": null, 864 | "type": { 865 | "kind": "SCALAR", 866 | "name": "String", 867 | "ofType": null 868 | }, 869 | "defaultValue": null 870 | } 871 | ], 872 | "interfaces": null, 873 | "enumValues": null, 874 | "possibleTypes": null 875 | }, 876 | { 877 | "kind": "OBJECT", 878 | "name": "UserRegisterWithEmailPayload", 879 | "description": null, 880 | "fields": [ 881 | { 882 | "name": "token", 883 | "description": null, 884 | "args": [], 885 | "type": { 886 | "kind": "SCALAR", 887 | "name": "String", 888 | "ofType": null 889 | }, 890 | "isDeprecated": false, 891 | "deprecationReason": null 892 | }, 893 | { 894 | "name": "error", 895 | "description": null, 896 | "args": [], 897 | "type": { 898 | "kind": "SCALAR", 899 | "name": "String", 900 | "ofType": null 901 | }, 902 | "isDeprecated": false, 903 | "deprecationReason": null 904 | }, 905 | { 906 | "name": "clientMutationId", 907 | "description": null, 908 | "args": [], 909 | "type": { 910 | "kind": "SCALAR", 911 | "name": "String", 912 | "ofType": null 913 | }, 914 | "isDeprecated": false, 915 | "deprecationReason": null 916 | } 917 | ], 918 | "inputFields": null, 919 | "interfaces": [], 920 | "enumValues": null, 921 | "possibleTypes": null 922 | }, 923 | { 924 | "kind": "OBJECT", 925 | "name": "Subscription", 926 | "description": null, 927 | "fields": [ 928 | { 929 | "name": "UserAdded", 930 | "description": null, 931 | "args": [], 932 | "type": { 933 | "kind": "OBJECT", 934 | "name": "UserAddedPayload", 935 | "ofType": null 936 | }, 937 | "isDeprecated": false, 938 | "deprecationReason": null 939 | } 940 | ], 941 | "inputFields": null, 942 | "interfaces": [], 943 | "enumValues": null, 944 | "possibleTypes": null 945 | }, 946 | { 947 | "kind": "OBJECT", 948 | "name": "UserAddedPayload", 949 | "description": null, 950 | "fields": [ 951 | { 952 | "name": "userEdge", 953 | "description": null, 954 | "args": [], 955 | "type": { 956 | "kind": "OBJECT", 957 | "name": "UserEdge", 958 | "ofType": null 959 | }, 960 | "isDeprecated": false, 961 | "deprecationReason": null 962 | } 963 | ], 964 | "inputFields": null, 965 | "interfaces": [], 966 | "enumValues": null, 967 | "possibleTypes": null 968 | }, 969 | { 970 | "kind": "OBJECT", 971 | "name": "__Schema", 972 | "description": "A GraphQL Schema defines the capabilities of a GraphQL server. It exposes all available types and directives on the server, as well as the entry points for query, mutation, and subscription operations.", 973 | "fields": [ 974 | { 975 | "name": "types", 976 | "description": "A list of all types supported by this server.", 977 | "args": [], 978 | "type": { 979 | "kind": "NON_NULL", 980 | "name": null, 981 | "ofType": { 982 | "kind": "LIST", 983 | "name": null, 984 | "ofType": { 985 | "kind": "NON_NULL", 986 | "name": null, 987 | "ofType": { 988 | "kind": "OBJECT", 989 | "name": "__Type", 990 | "ofType": null 991 | } 992 | } 993 | } 994 | }, 995 | "isDeprecated": false, 996 | "deprecationReason": null 997 | }, 998 | { 999 | "name": "queryType", 1000 | "description": "The type that query operations will be rooted at.", 1001 | "args": [], 1002 | "type": { 1003 | "kind": "NON_NULL", 1004 | "name": null, 1005 | "ofType": { 1006 | "kind": "OBJECT", 1007 | "name": "__Type", 1008 | "ofType": null 1009 | } 1010 | }, 1011 | "isDeprecated": false, 1012 | "deprecationReason": null 1013 | }, 1014 | { 1015 | "name": "mutationType", 1016 | "description": "If this server supports mutation, the type that mutation operations will be rooted at.", 1017 | "args": [], 1018 | "type": { 1019 | "kind": "OBJECT", 1020 | "name": "__Type", 1021 | "ofType": null 1022 | }, 1023 | "isDeprecated": false, 1024 | "deprecationReason": null 1025 | }, 1026 | { 1027 | "name": "subscriptionType", 1028 | "description": "If this server support subscription, the type that subscription operations will be rooted at.", 1029 | "args": [], 1030 | "type": { 1031 | "kind": "OBJECT", 1032 | "name": "__Type", 1033 | "ofType": null 1034 | }, 1035 | "isDeprecated": false, 1036 | "deprecationReason": null 1037 | }, 1038 | { 1039 | "name": "directives", 1040 | "description": "A list of all directives supported by this server.", 1041 | "args": [], 1042 | "type": { 1043 | "kind": "NON_NULL", 1044 | "name": null, 1045 | "ofType": { 1046 | "kind": "LIST", 1047 | "name": null, 1048 | "ofType": { 1049 | "kind": "NON_NULL", 1050 | "name": null, 1051 | "ofType": { 1052 | "kind": "OBJECT", 1053 | "name": "__Directive", 1054 | "ofType": null 1055 | } 1056 | } 1057 | } 1058 | }, 1059 | "isDeprecated": false, 1060 | "deprecationReason": null 1061 | } 1062 | ], 1063 | "inputFields": null, 1064 | "interfaces": [], 1065 | "enumValues": null, 1066 | "possibleTypes": null 1067 | }, 1068 | { 1069 | "kind": "OBJECT", 1070 | "name": "__Type", 1071 | "description": "The fundamental unit of any GraphQL Schema is the type. There are many kinds of types in GraphQL as represented by the `__TypeKind` enum.\n\nDepending on the kind of a type, certain fields describe information about that type. Scalar types provide no information beyond a name and description, while Enum types provide their values. Object and Interface types provide the fields they describe. Abstract types, Union and Interface, provide the Object types possible at runtime. List and NonNull types compose other types.", 1072 | "fields": [ 1073 | { 1074 | "name": "kind", 1075 | "description": null, 1076 | "args": [], 1077 | "type": { 1078 | "kind": "NON_NULL", 1079 | "name": null, 1080 | "ofType": { 1081 | "kind": "ENUM", 1082 | "name": "__TypeKind", 1083 | "ofType": null 1084 | } 1085 | }, 1086 | "isDeprecated": false, 1087 | "deprecationReason": null 1088 | }, 1089 | { 1090 | "name": "name", 1091 | "description": null, 1092 | "args": [], 1093 | "type": { 1094 | "kind": "SCALAR", 1095 | "name": "String", 1096 | "ofType": null 1097 | }, 1098 | "isDeprecated": false, 1099 | "deprecationReason": null 1100 | }, 1101 | { 1102 | "name": "description", 1103 | "description": null, 1104 | "args": [], 1105 | "type": { 1106 | "kind": "SCALAR", 1107 | "name": "String", 1108 | "ofType": null 1109 | }, 1110 | "isDeprecated": false, 1111 | "deprecationReason": null 1112 | }, 1113 | { 1114 | "name": "fields", 1115 | "description": null, 1116 | "args": [ 1117 | { 1118 | "name": "includeDeprecated", 1119 | "description": null, 1120 | "type": { 1121 | "kind": "SCALAR", 1122 | "name": "Boolean", 1123 | "ofType": null 1124 | }, 1125 | "defaultValue": "false" 1126 | } 1127 | ], 1128 | "type": { 1129 | "kind": "LIST", 1130 | "name": null, 1131 | "ofType": { 1132 | "kind": "NON_NULL", 1133 | "name": null, 1134 | "ofType": { 1135 | "kind": "OBJECT", 1136 | "name": "__Field", 1137 | "ofType": null 1138 | } 1139 | } 1140 | }, 1141 | "isDeprecated": false, 1142 | "deprecationReason": null 1143 | }, 1144 | { 1145 | "name": "interfaces", 1146 | "description": null, 1147 | "args": [], 1148 | "type": { 1149 | "kind": "LIST", 1150 | "name": null, 1151 | "ofType": { 1152 | "kind": "NON_NULL", 1153 | "name": null, 1154 | "ofType": { 1155 | "kind": "OBJECT", 1156 | "name": "__Type", 1157 | "ofType": null 1158 | } 1159 | } 1160 | }, 1161 | "isDeprecated": false, 1162 | "deprecationReason": null 1163 | }, 1164 | { 1165 | "name": "possibleTypes", 1166 | "description": null, 1167 | "args": [], 1168 | "type": { 1169 | "kind": "LIST", 1170 | "name": null, 1171 | "ofType": { 1172 | "kind": "NON_NULL", 1173 | "name": null, 1174 | "ofType": { 1175 | "kind": "OBJECT", 1176 | "name": "__Type", 1177 | "ofType": null 1178 | } 1179 | } 1180 | }, 1181 | "isDeprecated": false, 1182 | "deprecationReason": null 1183 | }, 1184 | { 1185 | "name": "enumValues", 1186 | "description": null, 1187 | "args": [ 1188 | { 1189 | "name": "includeDeprecated", 1190 | "description": null, 1191 | "type": { 1192 | "kind": "SCALAR", 1193 | "name": "Boolean", 1194 | "ofType": null 1195 | }, 1196 | "defaultValue": "false" 1197 | } 1198 | ], 1199 | "type": { 1200 | "kind": "LIST", 1201 | "name": null, 1202 | "ofType": { 1203 | "kind": "NON_NULL", 1204 | "name": null, 1205 | "ofType": { 1206 | "kind": "OBJECT", 1207 | "name": "__EnumValue", 1208 | "ofType": null 1209 | } 1210 | } 1211 | }, 1212 | "isDeprecated": false, 1213 | "deprecationReason": null 1214 | }, 1215 | { 1216 | "name": "inputFields", 1217 | "description": null, 1218 | "args": [], 1219 | "type": { 1220 | "kind": "LIST", 1221 | "name": null, 1222 | "ofType": { 1223 | "kind": "NON_NULL", 1224 | "name": null, 1225 | "ofType": { 1226 | "kind": "OBJECT", 1227 | "name": "__InputValue", 1228 | "ofType": null 1229 | } 1230 | } 1231 | }, 1232 | "isDeprecated": false, 1233 | "deprecationReason": null 1234 | }, 1235 | { 1236 | "name": "ofType", 1237 | "description": null, 1238 | "args": [], 1239 | "type": { 1240 | "kind": "OBJECT", 1241 | "name": "__Type", 1242 | "ofType": null 1243 | }, 1244 | "isDeprecated": false, 1245 | "deprecationReason": null 1246 | } 1247 | ], 1248 | "inputFields": null, 1249 | "interfaces": [], 1250 | "enumValues": null, 1251 | "possibleTypes": null 1252 | }, 1253 | { 1254 | "kind": "ENUM", 1255 | "name": "__TypeKind", 1256 | "description": "An enum describing what kind of type a given `__Type` is.", 1257 | "fields": null, 1258 | "inputFields": null, 1259 | "interfaces": null, 1260 | "enumValues": [ 1261 | { 1262 | "name": "SCALAR", 1263 | "description": "Indicates this type is a scalar.", 1264 | "isDeprecated": false, 1265 | "deprecationReason": null 1266 | }, 1267 | { 1268 | "name": "OBJECT", 1269 | "description": "Indicates this type is an object. `fields` and `interfaces` are valid fields.", 1270 | "isDeprecated": false, 1271 | "deprecationReason": null 1272 | }, 1273 | { 1274 | "name": "INTERFACE", 1275 | "description": "Indicates this type is an interface. `fields` and `possibleTypes` are valid fields.", 1276 | "isDeprecated": false, 1277 | "deprecationReason": null 1278 | }, 1279 | { 1280 | "name": "UNION", 1281 | "description": "Indicates this type is a union. `possibleTypes` is a valid field.", 1282 | "isDeprecated": false, 1283 | "deprecationReason": null 1284 | }, 1285 | { 1286 | "name": "ENUM", 1287 | "description": "Indicates this type is an enum. `enumValues` is a valid field.", 1288 | "isDeprecated": false, 1289 | "deprecationReason": null 1290 | }, 1291 | { 1292 | "name": "INPUT_OBJECT", 1293 | "description": "Indicates this type is an input object. `inputFields` is a valid field.", 1294 | "isDeprecated": false, 1295 | "deprecationReason": null 1296 | }, 1297 | { 1298 | "name": "LIST", 1299 | "description": "Indicates this type is a list. `ofType` is a valid field.", 1300 | "isDeprecated": false, 1301 | "deprecationReason": null 1302 | }, 1303 | { 1304 | "name": "NON_NULL", 1305 | "description": "Indicates this type is a non-null. `ofType` is a valid field.", 1306 | "isDeprecated": false, 1307 | "deprecationReason": null 1308 | } 1309 | ], 1310 | "possibleTypes": null 1311 | }, 1312 | { 1313 | "kind": "OBJECT", 1314 | "name": "__Field", 1315 | "description": "Object and Interface types are described by a list of Fields, each of which has a name, potentially a list of arguments, and a return type.", 1316 | "fields": [ 1317 | { 1318 | "name": "name", 1319 | "description": null, 1320 | "args": [], 1321 | "type": { 1322 | "kind": "NON_NULL", 1323 | "name": null, 1324 | "ofType": { 1325 | "kind": "SCALAR", 1326 | "name": "String", 1327 | "ofType": null 1328 | } 1329 | }, 1330 | "isDeprecated": false, 1331 | "deprecationReason": null 1332 | }, 1333 | { 1334 | "name": "description", 1335 | "description": null, 1336 | "args": [], 1337 | "type": { 1338 | "kind": "SCALAR", 1339 | "name": "String", 1340 | "ofType": null 1341 | }, 1342 | "isDeprecated": false, 1343 | "deprecationReason": null 1344 | }, 1345 | { 1346 | "name": "args", 1347 | "description": null, 1348 | "args": [], 1349 | "type": { 1350 | "kind": "NON_NULL", 1351 | "name": null, 1352 | "ofType": { 1353 | "kind": "LIST", 1354 | "name": null, 1355 | "ofType": { 1356 | "kind": "NON_NULL", 1357 | "name": null, 1358 | "ofType": { 1359 | "kind": "OBJECT", 1360 | "name": "__InputValue", 1361 | "ofType": null 1362 | } 1363 | } 1364 | } 1365 | }, 1366 | "isDeprecated": false, 1367 | "deprecationReason": null 1368 | }, 1369 | { 1370 | "name": "type", 1371 | "description": null, 1372 | "args": [], 1373 | "type": { 1374 | "kind": "NON_NULL", 1375 | "name": null, 1376 | "ofType": { 1377 | "kind": "OBJECT", 1378 | "name": "__Type", 1379 | "ofType": null 1380 | } 1381 | }, 1382 | "isDeprecated": false, 1383 | "deprecationReason": null 1384 | }, 1385 | { 1386 | "name": "isDeprecated", 1387 | "description": null, 1388 | "args": [], 1389 | "type": { 1390 | "kind": "NON_NULL", 1391 | "name": null, 1392 | "ofType": { 1393 | "kind": "SCALAR", 1394 | "name": "Boolean", 1395 | "ofType": null 1396 | } 1397 | }, 1398 | "isDeprecated": false, 1399 | "deprecationReason": null 1400 | }, 1401 | { 1402 | "name": "deprecationReason", 1403 | "description": null, 1404 | "args": [], 1405 | "type": { 1406 | "kind": "SCALAR", 1407 | "name": "String", 1408 | "ofType": null 1409 | }, 1410 | "isDeprecated": false, 1411 | "deprecationReason": null 1412 | } 1413 | ], 1414 | "inputFields": null, 1415 | "interfaces": [], 1416 | "enumValues": null, 1417 | "possibleTypes": null 1418 | }, 1419 | { 1420 | "kind": "OBJECT", 1421 | "name": "__InputValue", 1422 | "description": "Arguments provided to Fields or Directives and the input fields of an InputObject are represented as Input Values which describe their type and optionally a default value.", 1423 | "fields": [ 1424 | { 1425 | "name": "name", 1426 | "description": null, 1427 | "args": [], 1428 | "type": { 1429 | "kind": "NON_NULL", 1430 | "name": null, 1431 | "ofType": { 1432 | "kind": "SCALAR", 1433 | "name": "String", 1434 | "ofType": null 1435 | } 1436 | }, 1437 | "isDeprecated": false, 1438 | "deprecationReason": null 1439 | }, 1440 | { 1441 | "name": "description", 1442 | "description": null, 1443 | "args": [], 1444 | "type": { 1445 | "kind": "SCALAR", 1446 | "name": "String", 1447 | "ofType": null 1448 | }, 1449 | "isDeprecated": false, 1450 | "deprecationReason": null 1451 | }, 1452 | { 1453 | "name": "type", 1454 | "description": null, 1455 | "args": [], 1456 | "type": { 1457 | "kind": "NON_NULL", 1458 | "name": null, 1459 | "ofType": { 1460 | "kind": "OBJECT", 1461 | "name": "__Type", 1462 | "ofType": null 1463 | } 1464 | }, 1465 | "isDeprecated": false, 1466 | "deprecationReason": null 1467 | }, 1468 | { 1469 | "name": "defaultValue", 1470 | "description": "A GraphQL-formatted string representing the default value for this input value.", 1471 | "args": [], 1472 | "type": { 1473 | "kind": "SCALAR", 1474 | "name": "String", 1475 | "ofType": null 1476 | }, 1477 | "isDeprecated": false, 1478 | "deprecationReason": null 1479 | } 1480 | ], 1481 | "inputFields": null, 1482 | "interfaces": [], 1483 | "enumValues": null, 1484 | "possibleTypes": null 1485 | }, 1486 | { 1487 | "kind": "OBJECT", 1488 | "name": "__EnumValue", 1489 | "description": "One possible value for a given Enum. Enum values are unique values, not a placeholder for a string or numeric value. However an Enum value is returned in a JSON response as a string.", 1490 | "fields": [ 1491 | { 1492 | "name": "name", 1493 | "description": null, 1494 | "args": [], 1495 | "type": { 1496 | "kind": "NON_NULL", 1497 | "name": null, 1498 | "ofType": { 1499 | "kind": "SCALAR", 1500 | "name": "String", 1501 | "ofType": null 1502 | } 1503 | }, 1504 | "isDeprecated": false, 1505 | "deprecationReason": null 1506 | }, 1507 | { 1508 | "name": "description", 1509 | "description": null, 1510 | "args": [], 1511 | "type": { 1512 | "kind": "SCALAR", 1513 | "name": "String", 1514 | "ofType": null 1515 | }, 1516 | "isDeprecated": false, 1517 | "deprecationReason": null 1518 | }, 1519 | { 1520 | "name": "isDeprecated", 1521 | "description": null, 1522 | "args": [], 1523 | "type": { 1524 | "kind": "NON_NULL", 1525 | "name": null, 1526 | "ofType": { 1527 | "kind": "SCALAR", 1528 | "name": "Boolean", 1529 | "ofType": null 1530 | } 1531 | }, 1532 | "isDeprecated": false, 1533 | "deprecationReason": null 1534 | }, 1535 | { 1536 | "name": "deprecationReason", 1537 | "description": null, 1538 | "args": [], 1539 | "type": { 1540 | "kind": "SCALAR", 1541 | "name": "String", 1542 | "ofType": null 1543 | }, 1544 | "isDeprecated": false, 1545 | "deprecationReason": null 1546 | } 1547 | ], 1548 | "inputFields": null, 1549 | "interfaces": [], 1550 | "enumValues": null, 1551 | "possibleTypes": null 1552 | }, 1553 | { 1554 | "kind": "OBJECT", 1555 | "name": "__Directive", 1556 | "description": "A Directive provides a way to describe alternate runtime execution and type validation behavior in a GraphQL document.\n\nIn some cases, you need to provide options to alter GraphQL's execution behavior in ways field arguments will not suffice, such as conditionally including or skipping a field. Directives provide this by describing additional information to the executor.", 1557 | "fields": [ 1558 | { 1559 | "name": "name", 1560 | "description": null, 1561 | "args": [], 1562 | "type": { 1563 | "kind": "NON_NULL", 1564 | "name": null, 1565 | "ofType": { 1566 | "kind": "SCALAR", 1567 | "name": "String", 1568 | "ofType": null 1569 | } 1570 | }, 1571 | "isDeprecated": false, 1572 | "deprecationReason": null 1573 | }, 1574 | { 1575 | "name": "description", 1576 | "description": null, 1577 | "args": [], 1578 | "type": { 1579 | "kind": "SCALAR", 1580 | "name": "String", 1581 | "ofType": null 1582 | }, 1583 | "isDeprecated": false, 1584 | "deprecationReason": null 1585 | }, 1586 | { 1587 | "name": "locations", 1588 | "description": null, 1589 | "args": [], 1590 | "type": { 1591 | "kind": "NON_NULL", 1592 | "name": null, 1593 | "ofType": { 1594 | "kind": "LIST", 1595 | "name": null, 1596 | "ofType": { 1597 | "kind": "NON_NULL", 1598 | "name": null, 1599 | "ofType": { 1600 | "kind": "ENUM", 1601 | "name": "__DirectiveLocation", 1602 | "ofType": null 1603 | } 1604 | } 1605 | } 1606 | }, 1607 | "isDeprecated": false, 1608 | "deprecationReason": null 1609 | }, 1610 | { 1611 | "name": "args", 1612 | "description": null, 1613 | "args": [], 1614 | "type": { 1615 | "kind": "NON_NULL", 1616 | "name": null, 1617 | "ofType": { 1618 | "kind": "LIST", 1619 | "name": null, 1620 | "ofType": { 1621 | "kind": "NON_NULL", 1622 | "name": null, 1623 | "ofType": { 1624 | "kind": "OBJECT", 1625 | "name": "__InputValue", 1626 | "ofType": null 1627 | } 1628 | } 1629 | } 1630 | }, 1631 | "isDeprecated": false, 1632 | "deprecationReason": null 1633 | }, 1634 | { 1635 | "name": "onOperation", 1636 | "description": null, 1637 | "args": [], 1638 | "type": { 1639 | "kind": "NON_NULL", 1640 | "name": null, 1641 | "ofType": { 1642 | "kind": "SCALAR", 1643 | "name": "Boolean", 1644 | "ofType": null 1645 | } 1646 | }, 1647 | "isDeprecated": true, 1648 | "deprecationReason": "Use `locations`." 1649 | }, 1650 | { 1651 | "name": "onFragment", 1652 | "description": null, 1653 | "args": [], 1654 | "type": { 1655 | "kind": "NON_NULL", 1656 | "name": null, 1657 | "ofType": { 1658 | "kind": "SCALAR", 1659 | "name": "Boolean", 1660 | "ofType": null 1661 | } 1662 | }, 1663 | "isDeprecated": true, 1664 | "deprecationReason": "Use `locations`." 1665 | }, 1666 | { 1667 | "name": "onField", 1668 | "description": null, 1669 | "args": [], 1670 | "type": { 1671 | "kind": "NON_NULL", 1672 | "name": null, 1673 | "ofType": { 1674 | "kind": "SCALAR", 1675 | "name": "Boolean", 1676 | "ofType": null 1677 | } 1678 | }, 1679 | "isDeprecated": true, 1680 | "deprecationReason": "Use `locations`." 1681 | } 1682 | ], 1683 | "inputFields": null, 1684 | "interfaces": [], 1685 | "enumValues": null, 1686 | "possibleTypes": null 1687 | }, 1688 | { 1689 | "kind": "ENUM", 1690 | "name": "__DirectiveLocation", 1691 | "description": "A Directive can be adjacent to many parts of the GraphQL language, a __DirectiveLocation describes one such possible adjacencies.", 1692 | "fields": null, 1693 | "inputFields": null, 1694 | "interfaces": null, 1695 | "enumValues": [ 1696 | { 1697 | "name": "QUERY", 1698 | "description": "Location adjacent to a query operation.", 1699 | "isDeprecated": false, 1700 | "deprecationReason": null 1701 | }, 1702 | { 1703 | "name": "MUTATION", 1704 | "description": "Location adjacent to a mutation operation.", 1705 | "isDeprecated": false, 1706 | "deprecationReason": null 1707 | }, 1708 | { 1709 | "name": "SUBSCRIPTION", 1710 | "description": "Location adjacent to a subscription operation.", 1711 | "isDeprecated": false, 1712 | "deprecationReason": null 1713 | }, 1714 | { 1715 | "name": "FIELD", 1716 | "description": "Location adjacent to a field.", 1717 | "isDeprecated": false, 1718 | "deprecationReason": null 1719 | }, 1720 | { 1721 | "name": "FRAGMENT_DEFINITION", 1722 | "description": "Location adjacent to a fragment definition.", 1723 | "isDeprecated": false, 1724 | "deprecationReason": null 1725 | }, 1726 | { 1727 | "name": "FRAGMENT_SPREAD", 1728 | "description": "Location adjacent to a fragment spread.", 1729 | "isDeprecated": false, 1730 | "deprecationReason": null 1731 | }, 1732 | { 1733 | "name": "INLINE_FRAGMENT", 1734 | "description": "Location adjacent to an inline fragment.", 1735 | "isDeprecated": false, 1736 | "deprecationReason": null 1737 | }, 1738 | { 1739 | "name": "SCHEMA", 1740 | "description": "Location adjacent to a schema definition.", 1741 | "isDeprecated": false, 1742 | "deprecationReason": null 1743 | }, 1744 | { 1745 | "name": "SCALAR", 1746 | "description": "Location adjacent to a scalar definition.", 1747 | "isDeprecated": false, 1748 | "deprecationReason": null 1749 | }, 1750 | { 1751 | "name": "OBJECT", 1752 | "description": "Location adjacent to an object type definition.", 1753 | "isDeprecated": false, 1754 | "deprecationReason": null 1755 | }, 1756 | { 1757 | "name": "FIELD_DEFINITION", 1758 | "description": "Location adjacent to a field definition.", 1759 | "isDeprecated": false, 1760 | "deprecationReason": null 1761 | }, 1762 | { 1763 | "name": "ARGUMENT_DEFINITION", 1764 | "description": "Location adjacent to an argument definition.", 1765 | "isDeprecated": false, 1766 | "deprecationReason": null 1767 | }, 1768 | { 1769 | "name": "INTERFACE", 1770 | "description": "Location adjacent to an interface definition.", 1771 | "isDeprecated": false, 1772 | "deprecationReason": null 1773 | }, 1774 | { 1775 | "name": "UNION", 1776 | "description": "Location adjacent to a union definition.", 1777 | "isDeprecated": false, 1778 | "deprecationReason": null 1779 | }, 1780 | { 1781 | "name": "ENUM", 1782 | "description": "Location adjacent to an enum definition.", 1783 | "isDeprecated": false, 1784 | "deprecationReason": null 1785 | }, 1786 | { 1787 | "name": "ENUM_VALUE", 1788 | "description": "Location adjacent to an enum value definition.", 1789 | "isDeprecated": false, 1790 | "deprecationReason": null 1791 | }, 1792 | { 1793 | "name": "INPUT_OBJECT", 1794 | "description": "Location adjacent to an input object type definition.", 1795 | "isDeprecated": false, 1796 | "deprecationReason": null 1797 | }, 1798 | { 1799 | "name": "INPUT_FIELD_DEFINITION", 1800 | "description": "Location adjacent to an input object field definition.", 1801 | "isDeprecated": false, 1802 | "deprecationReason": null 1803 | } 1804 | ], 1805 | "possibleTypes": null 1806 | } 1807 | ], 1808 | "directives": [ 1809 | { 1810 | "name": "include", 1811 | "description": "Directs the executor to include this field or fragment only when the `if` argument is true.", 1812 | "locations": [ 1813 | "FIELD", 1814 | "FRAGMENT_SPREAD", 1815 | "INLINE_FRAGMENT" 1816 | ], 1817 | "args": [ 1818 | { 1819 | "name": "if", 1820 | "description": "Included when true.", 1821 | "type": { 1822 | "kind": "NON_NULL", 1823 | "name": null, 1824 | "ofType": { 1825 | "kind": "SCALAR", 1826 | "name": "Boolean", 1827 | "ofType": null 1828 | } 1829 | }, 1830 | "defaultValue": null 1831 | } 1832 | ] 1833 | }, 1834 | { 1835 | "name": "skip", 1836 | "description": "Directs the executor to skip this field or fragment when the `if` argument is true.", 1837 | "locations": [ 1838 | "FIELD", 1839 | "FRAGMENT_SPREAD", 1840 | "INLINE_FRAGMENT" 1841 | ], 1842 | "args": [ 1843 | { 1844 | "name": "if", 1845 | "description": "Skipped when true.", 1846 | "type": { 1847 | "kind": "NON_NULL", 1848 | "name": null, 1849 | "ofType": { 1850 | "kind": "SCALAR", 1851 | "name": "Boolean", 1852 | "ofType": null 1853 | } 1854 | }, 1855 | "defaultValue": null 1856 | } 1857 | ] 1858 | }, 1859 | { 1860 | "name": "deprecated", 1861 | "description": "Marks an element of a GraphQL schema as no longer supported.", 1862 | "locations": [ 1863 | "FIELD_DEFINITION", 1864 | "ENUM_VALUE" 1865 | ], 1866 | "args": [ 1867 | { 1868 | "name": "reason", 1869 | "description": "Explains why this element was deprecated, usually also including a suggestion for how to access supported similar data. Formatted in [Markdown](https://daringfireball.net/projects/markdown/).", 1870 | "type": { 1871 | "kind": "SCALAR", 1872 | "name": "String", 1873 | "ofType": null 1874 | }, 1875 | "defaultValue": "\"No longer supported\"" 1876 | } 1877 | ] 1878 | } 1879 | ] 1880 | } 1881 | } 1882 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "relay-modern-typescript", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "core-js": "^3.8.3", 6 | "hoist-non-react-statics": "^3.3.2", 7 | "react": "17.0.1", 8 | "react-dom": "17.0.1", 9 | "react-refresh": "^0.9.0", 10 | "react-relay": "10.1.3", 11 | "rebass": "^4.0.7", 12 | "styled-components": "^5.2.1", 13 | "styled-system": "^5.1.5" 14 | }, 15 | "devDependencies": { 16 | "@babel/cli": "^7.12.10", 17 | "@babel/core": "^7.12.10", 18 | "@babel/plugin-proposal-class-properties": "^7.12.1", 19 | "@babel/plugin-proposal-export-default-from": "^7.12.1", 20 | "@babel/plugin-proposal-export-namespace-from": "^7.12.1", 21 | "@babel/plugin-transform-react-jsx-source": "^7.12.1", 22 | "@babel/plugin-transform-typescript": "^7.12.1", 23 | "@babel/polyfill": "^7.12.1", 24 | "@babel/preset-env": "^7.12.11", 25 | "@babel/preset-react": "^7.12.10", 26 | "@babel/preset-typescript": "^7.12.7", 27 | "@babel/runtime": "^7.12.5", 28 | "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", 29 | "@types/http-proxy-middleware": "^0.19.3", 30 | "@types/jest": "^26.0.20", 31 | "@types/lodash": "^4.14.168", 32 | "@types/react": "^17.0.0", 33 | "@types/react-dom": "^17.0.0", 34 | "@types/react-relay": "^7.0.17", 35 | "@types/rebass": "^4.0.7", 36 | "@types/relay-runtime": "^10.1.8", 37 | "@types/styled-system": "^5.1.10", 38 | "babel-core": "^7.0.0-bridge.0", 39 | "babel-eslint": "^10.1.0", 40 | "babel-jest": "26.6.3", 41 | "babel-loader": "^8.2.2", 42 | "babel-plugin-lodash": "^3.3.4", 43 | "babel-plugin-material-ui": "^0.3.1", 44 | "babel-plugin-relay": "10.1.3", 45 | "babel-plugin-styled-components": "^1.12.0", 46 | "cross-env": "^7.0.3", 47 | "css-loader": "^5.0.1", 48 | "eslint": "^7.19.0", 49 | "eslint-plugin-react": "^7.22.0", 50 | "file-loader": "^6.2.0", 51 | "graphql": "^15.5.0", 52 | "html-webpack-plugin": "^4.5.1", 53 | "jest": "^26.6.3", 54 | "jest-cli": "^26.6.3", 55 | "jest-dom": "^4.0.0", 56 | "jest-runner-eslint": "^0.10.0", 57 | "jest-serializer-html": "^7.0.0", 58 | "mini-css-extract-plugin": "^1.3.5", 59 | "react-hot-loader": "^4.13.0", 60 | "react-testing-library": "^8.0.1", 61 | "regenerator-runtime": "^0.13.7", 62 | "relay-compiler": "10.1.3", 63 | "relay-compiler-language-typescript": "13.0.2", 64 | "relay-config": "10.1.3", 65 | "relay-devtools": "^1.4.0", 66 | "relay-runtime": "10.1.3", 67 | "relay-test-utils": "10.1.3", 68 | "style-loader": "^2.0.0", 69 | "typescript": "^4.1.3", 70 | "url-loader": "^4.1.1", 71 | "webpack": "^5.19.0", 72 | "webpack-cli": "^4.4.0", 73 | "webpack-dev-server": "^3.11.2", 74 | "webpack-nano": "^1.1.1", 75 | "webpack-plugin-serve": "^1.2.1" 76 | }, 77 | "main": "src/index.tsx", 78 | "scripts": { 79 | "build": "cross-env NODE_ENV=production webpack --config webpackProdConfig.js --progress", 80 | "relay": "relay-compiler", 81 | "start": "cross-env NODE_ENV=development webpack serve --hot --config webpackDevConfig.js --progress", 82 | "test": "jest --coverage", 83 | "ts:check": "tsc" 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /relay.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | src: './src', 3 | schema: './data/schema.graphql', 4 | language: 'typescript', 5 | }; 6 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import UserList from './UserList'; 4 | 5 | export default UserList; 6 | -------------------------------------------------------------------------------- /src/UserList.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { graphql, createFragmentContainer } from 'react-relay'; 3 | import { createQueryRendererModern } from './relay'; 4 | import { Flex } from 'rebass'; 5 | import { alignItems, flexDirection, justifyContent, space } from 'styled-system'; 6 | import styled from 'styled-components'; 7 | 8 | import { UserList_query } from './__generated__/UserList_query.graphql'; 9 | 10 | const Card = styled.a` 11 | border-radius: 2px; 12 | display: flex; 13 | max-width: 265px; 14 | width: 200px; 15 | background-color: #ffffff; 16 | box-shadow: 0 1px 5px 0 #dfdfdf, 0 1px 5px 0 #dfdfdf; 17 | flex-direction: column; 18 | cursor: pointer; 19 | margin: 10px; 20 | ${space} 21 | ${flexDirection} 22 | ${alignItems} 23 | ${justifyContent} 24 | `; 25 | 26 | type Props = { 27 | query: UserList_query 28 | } 29 | class UserList extends React.Component { 30 | render() { 31 | const { query } = this.props; 32 | const { users } = query; 33 | 34 | return ( 35 | 36 | {users.edges.map(({node}) => ( 37 | 38 | User: {node.name} 39 | Email: {node.name} 40 | 41 | ))} 42 | 43 | ) 44 | } 45 | } 46 | 47 | const UserListFragmentContainer = createFragmentContainer(UserList, { 48 | query: graphql` 49 | fragment UserList_query on Query { 50 | users(first: 10) @connection(key: "UserList_users", filters: []) { 51 | edges { 52 | node { 53 | id 54 | name 55 | email 56 | } 57 | } 58 | } 59 | } 60 | ` 61 | }); 62 | 63 | export default createQueryRendererModern(UserListFragmentContainer, UserList, { 64 | query: graphql` 65 | query UserListQuery { 66 | ...UserList_query 67 | } 68 | `, 69 | }); 70 | -------------------------------------------------------------------------------- /src/__tests__/app.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from '../App'; 3 | import { render } from 'react-testing-library'; 4 | 5 | describe('', () => { 6 | it('should render the component', () => { 7 | const { getByText } = render(); 8 | expect(getByText('Hi my world')).toBeTruthy(); 9 | }); 10 | }) 11 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Relay Modern Typescript 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | const render = () => { 7 | const rootEl = document.getElementById('root'); 8 | 9 | ReactDOM.render(, rootEl); 10 | }; 11 | 12 | render(); 13 | -------------------------------------------------------------------------------- /src/relay/Environment.tsx: -------------------------------------------------------------------------------- 1 | import { installRelayDevTools } from 'relay-devtools'; 2 | import { Environment, Network, RecordSource, Store } from 'relay-runtime'; 3 | 4 | import cacheHandler from './cacheHandler'; 5 | 6 | const __DEV__ = process.env.NODE_ENV === 'development'; 7 | if (__DEV__) { 8 | installRelayDevTools(); 9 | } 10 | 11 | const network = Network.create(cacheHandler); 12 | 13 | const source = new RecordSource(); 14 | const store = new Store(source); 15 | 16 | // export const inspector = new RecordSourceInspector(source); 17 | 18 | const env = new Environment({ 19 | network, 20 | store, 21 | }); 22 | 23 | export default env; 24 | -------------------------------------------------------------------------------- /src/relay/ExecuteEnvironment.tsx: -------------------------------------------------------------------------------- 1 | const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); 2 | 3 | /** 4 | * Simple, lightweight module assisting with the detection and context of 5 | * Worker. Helps avoid circular dependencies and allows code to reason about 6 | * whether or not they are in a Worker, even if they never include the main 7 | * `ReactWorker` dependency. 8 | */ 9 | const ExecutionEnvironment = { 10 | canUseDOM: canUseDOM, 11 | 12 | canUseWorkers: typeof Worker !== 'undefined', 13 | 14 | canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent), 15 | 16 | canUseViewport: canUseDOM && !!window.screen, 17 | 18 | isInWorker: !canUseDOM, // For now, this is true - might change in the future. 19 | }; 20 | 21 | export default ExecutionEnvironment; 22 | -------------------------------------------------------------------------------- /src/relay/cacheHandler.tsx: -------------------------------------------------------------------------------- 1 | import { Variables, UploadableMap, CacheConfig } from 'react-relay'; 2 | 3 | import { RequestNode, QueryResponseCache } from 'relay-runtime'; 4 | 5 | import fetchQuery from './fetchQuery'; 6 | import { isMutation, isQuery, forceFetch } from './helpers'; 7 | 8 | const oneMinute = 60 * 1000; 9 | const queryResponseCache = new QueryResponseCache({ size: 250, ttl: oneMinute }); 10 | 11 | const cacheHandler = async ( 12 | request: RequestNode, 13 | variables: Variables, 14 | cacheConfig: CacheConfig, 15 | uploadables: UploadableMap, 16 | ) => { 17 | const queryID = request.text; 18 | 19 | if (isMutation(request)) { 20 | queryResponseCache.clear(); 21 | return fetchQuery(request, variables, uploadables); 22 | } 23 | 24 | const fromCache = queryResponseCache.get(queryID, variables); 25 | if (isQuery(request) && fromCache !== null && !forceFetch(cacheConfig)) { 26 | return fromCache; 27 | } 28 | 29 | const fromServer = await fetchQuery(request, variables, uploadables); 30 | if (fromServer) { 31 | queryResponseCache.set(queryID, variables, fromServer); 32 | } 33 | 34 | return fromServer; 35 | }; 36 | 37 | export default cacheHandler; 38 | -------------------------------------------------------------------------------- /src/relay/createQueryRendererModern.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from 'react'; 3 | import hoistStatics from 'hoist-non-react-statics'; 4 | import { QueryRenderer } from 'react-relay'; 5 | 6 | import { GraphQLTaggedNode, Variables } from 'react-relay'; 7 | 8 | import Environment from './Environment'; 9 | 10 | type Config = { 11 | query: GraphQLTaggedNode, 12 | queriesParams?: (props: Object) => object, 13 | variables?: Variables, 14 | hideSplash?: boolean, 15 | }; 16 | 17 | export default function createQueryRenderer( 18 | FragmentComponent, 19 | Component, 20 | config: Config, 21 | ) { 22 | const { query, queriesParams } = config; 23 | 24 | class QueryRendererWrapper extends React.Component<{}> { 25 | render() { 26 | const variables = queriesParams ? queriesParams(this.props) : config.variables; 27 | 28 | return ( 29 | { 34 | if (error) { 35 | return {error.toString()}; 36 | } 37 | 38 | if (props) { 39 | return ; 40 | } 41 | 42 | return loading; 43 | }} 44 | /> 45 | ); 46 | } 47 | } 48 | 49 | return hoistStatics(QueryRendererWrapper, Component); 50 | } 51 | -------------------------------------------------------------------------------- /src/relay/fetchQuery.tsx: -------------------------------------------------------------------------------- 1 | import { Variables, UploadableMap } from 'react-relay'; 2 | 3 | import { RequestNode } from 'relay-runtime'; 4 | 5 | import { handleData, getRequestBody, getHeaders, isMutation } from './helpers'; 6 | import fetchWithRetries from './fetchWithRetries'; 7 | 8 | export const GRAPHQL_URL = 'http://localhost:5000/graphql'; 9 | 10 | // Define a function that fetches the results of a request (query/mutation/etc) 11 | // and returns its results as a Promise: 12 | const fetchQuery = async (request: RequestNode, variables: Variables, uploadables: UploadableMap) => { 13 | try { 14 | const body = getRequestBody(request, variables, uploadables); 15 | const headers = { 16 | ...getHeaders(uploadables), 17 | }; 18 | 19 | const response = await fetchWithRetries(GRAPHQL_URL, { 20 | method: 'POST', 21 | headers, 22 | body, 23 | fetchTimeout: 20000, 24 | retryDelays: [1000, 3000, 5000], 25 | }); 26 | 27 | const data = await handleData(response); 28 | 29 | if (response.status === 401) { 30 | throw data.errors; 31 | } 32 | 33 | if (isMutation(request) && data.errors) { 34 | throw data; 35 | } 36 | 37 | if (!data.data) { 38 | throw data.errors; 39 | } 40 | 41 | return data; 42 | } catch (err) { 43 | // eslint-disable-next-line 44 | console.log('err: ', err); 45 | 46 | const timeoutRegexp = new RegExp(/Still no successful response after/); 47 | const serverUnavailableRegexp = new RegExp(/Failed to fetch/); 48 | if (timeoutRegexp.test(err.message) || serverUnavailableRegexp.test(err.message)) { 49 | 50 | throw new Error('Unavailable service. Try again later.'); 51 | } 52 | 53 | throw err; 54 | } 55 | }; 56 | 57 | export default fetchQuery; 58 | -------------------------------------------------------------------------------- /src/relay/fetchWithRetries.tsx: -------------------------------------------------------------------------------- 1 | import ExecutionEnvironment from './ExecuteEnvironment'; 2 | 3 | export type InitWithRetries = { 4 | body?: unknown, 5 | cache?: string | null, 6 | credentials?: string | null, 7 | fetchTimeout?: number | null, 8 | headers?: unknown, 9 | method?: string | null, 10 | mode?: string | null, 11 | retryDelays?: Array | null, 12 | }; 13 | 14 | const DEFAULT_TIMEOUT = 15000; 15 | const DEFAULT_RETRIES = [1000, 3000]; 16 | 17 | /** 18 | * Makes a POST request to the server with the given data as the payload. 19 | * Automatic retries are done based on the values in `retryDelays`. 20 | */ 21 | function fetchWithRetries(uri: string, initWithRetries?: InitWithRetries | null): Promise { 22 | const { fetchTimeout, retryDelays, ...init } = initWithRetries || {}; 23 | const _fetchTimeout = fetchTimeout != null ? fetchTimeout : DEFAULT_TIMEOUT; 24 | const _retryDelays = retryDelays != null ? retryDelays : DEFAULT_RETRIES; 25 | 26 | let requestsAttempted = 0; 27 | let requestStartTime = 0; 28 | return new Promise((resolve, reject) => { 29 | /** 30 | * Sends a request to the server that will timeout after `fetchTimeout`. 31 | * If the request fails or times out a new request might be scheduled. 32 | */ 33 | function sendTimedRequest(): void { 34 | requestsAttempted++; 35 | requestStartTime = Date.now(); 36 | let isRequestAlive = true; 37 | const request = fetch(uri, init); 38 | const requestTimeout = setTimeout(() => { 39 | isRequestAlive = false; 40 | if (shouldRetry(requestsAttempted)) { 41 | // eslint-disable-next-line 42 | console.log(false, 'fetchWithRetries: HTTP timeout, retrying.'); 43 | retryRequest(); 44 | } else { 45 | reject( 46 | new Error(`fetchWithRetries(): Failed to get response from server, tried ${requestsAttempted} times.`), 47 | ); 48 | } 49 | }, _fetchTimeout); 50 | 51 | request 52 | .then(response => { 53 | clearTimeout(requestTimeout); 54 | if (isRequestAlive) { 55 | // We got a response, we can clear the timeout. 56 | if (response.status >= 200 && response.status < 300) { 57 | // Got a response code that indicates success, resolve the promise. 58 | resolve(response); 59 | } else if (response.status === 401) { 60 | resolve(response); 61 | } else if (shouldRetry(requestsAttempted)) { 62 | // Fetch was not successful, retrying. 63 | // TODO(#7595849): Only retry on transient HTTP errors. 64 | // eslint-disable-next-line 65 | console.log(false, 'fetchWithRetries: HTTP error, retrying.'), retryRequest(); 66 | } else { 67 | // Request was not successful, giving up. 68 | const error: any = new Error( 69 | `fetchWithRetries(): Still no successful response after ${requestsAttempted} retries, giving up.`, 70 | ); 71 | error.response = response; 72 | reject(error); 73 | } 74 | } 75 | }) 76 | .catch(error => { 77 | clearTimeout(requestTimeout); 78 | if (shouldRetry(requestsAttempted)) { 79 | retryRequest(); 80 | } else { 81 | reject(error); 82 | } 83 | }); 84 | } 85 | 86 | /** 87 | * Schedules another run of sendTimedRequest based on how much time has 88 | * passed between the time the last request was sent and now. 89 | */ 90 | function retryRequest(): void { 91 | const retryDelay = _retryDelays[requestsAttempted - 1]; 92 | const retryStartTime = requestStartTime + retryDelay; 93 | // Schedule retry for a configured duration after last request started. 94 | setTimeout(sendTimedRequest, retryStartTime - Date.now()); 95 | } 96 | 97 | /** 98 | * Checks if another attempt should be done to send a request to the server. 99 | */ 100 | function shouldRetry(attempt: number): boolean { 101 | return ExecutionEnvironment.canUseDOM && attempt <= _retryDelays.length; 102 | } 103 | 104 | sendTimedRequest(); 105 | }); 106 | } 107 | 108 | export default fetchWithRetries; 109 | -------------------------------------------------------------------------------- /src/relay/helpers.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Variables, UploadableMap, CacheConfig } from 'react-relay'; 3 | import { RequestNode } from 'relay-runtime'; 4 | 5 | export const isMutation = (request: RequestNode) => request.operationKind === 'mutation'; 6 | export const isQuery = (request: RequestNode) => request.operationKind === 'query'; 7 | export const forceFetch = (cacheConfig: CacheConfig) => !!(cacheConfig && cacheConfig.force); 8 | 9 | export const handleData = (response: any) => { 10 | const contentType = response.headers.get('content-type'); 11 | if (contentType && contentType.indexOf('application/json') !== -1) { 12 | return response.json(); 13 | } 14 | 15 | return response.text(); 16 | }; 17 | 18 | function getRequestBodyWithUploadables(request, variables, uploadables) { 19 | let formData = new FormData(); 20 | formData.append('name', request.name); 21 | formData.append('query', request.text); 22 | formData.append('variables', JSON.stringify(variables)); 23 | 24 | Object.keys(uploadables).forEach(key => { 25 | if (Object.prototype.hasOwnProperty.call(uploadables, key)) { 26 | formData.append(key, uploadables[key]); 27 | } 28 | }); 29 | 30 | return formData; 31 | } 32 | 33 | function getRequestBodyWithoutUplodables(request, variables) { 34 | return JSON.stringify({ 35 | name: request.name, // used by graphql mock on tests 36 | query: request.text, // GraphQL text from input 37 | variables, 38 | }); 39 | } 40 | 41 | export function getRequestBody(request: RequestNode, variables: Variables, uploadables?: UploadableMap) { 42 | if (uploadables) { 43 | return getRequestBodyWithUploadables(request, variables, uploadables); 44 | } 45 | 46 | return getRequestBodyWithoutUplodables(request, variables); 47 | } 48 | 49 | export const getHeaders = (uploadables?: UploadableMap) => { 50 | if (uploadables) { 51 | return { 52 | Accept: '*/*', 53 | }; 54 | } 55 | 56 | return { 57 | Accept: 'application/json', 58 | 'Content-type': 'application/json', 59 | }; 60 | }; 61 | -------------------------------------------------------------------------------- /src/relay/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as createQueryRendererModern } from './createQueryRendererModern'; 2 | export { default as Environment } from './Environment'; 3 | -------------------------------------------------------------------------------- /src/relay/mutationUtils.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { ConnectionHandler } from 'relay-runtime'; 3 | import { isObject, isArray } from 'lodash/fp'; 4 | 5 | import { Store, RecordProxy, ConcreteNode } from 'relay-runtime'; 6 | 7 | type ListRecordRemoveUpdaterOptions = { 8 | parentId: string, 9 | itemId: string, 10 | parentFieldName: string, 11 | store: Store, 12 | }; 13 | 14 | type ListRecordAddUpdaterOptions = { 15 | parentId: string, 16 | item: Object, 17 | type: string, 18 | parentFieldName: string, 19 | store: Store, 20 | }; 21 | 22 | type OptimisticConnectionUpdaterOptions = { 23 | parentId: string, 24 | store: Store, 25 | connectionName: string, 26 | item: Object, 27 | customNode: ?ConcreteNode, 28 | itemType: string, 29 | }; 30 | 31 | type ConnectionDeleteEdgeUpdaterOptions = { 32 | parentId: string, 33 | connectionName: string, 34 | nodeId: string, 35 | store: Store, 36 | }; 37 | 38 | type CopyObjScalarsToProxyOptions = { 39 | object: Object, 40 | proxy: RecordProxy, 41 | }; 42 | 43 | export function listRecordRemoveUpdater({ parentId, itemId, parentFieldName, store }: ListRecordRemoveUpdaterOptions) { 44 | const parentProxy = store.get(parentId); 45 | const items = parentProxy.getLinkedRecords(parentFieldName); 46 | 47 | parentProxy.setLinkedRecords(items.filter(record => record._dataID !== itemId), parentFieldName); 48 | } 49 | 50 | export function listRecordAddUpdater({ parentId, item, type, parentFieldName, store }: ListRecordAddUpdaterOptions) { 51 | const node = store.create(item.id, type); 52 | 53 | Object.keys(item).forEach(key => { 54 | node.setValue(item[key], key); 55 | }); 56 | 57 | const parentProxy = store.get(parentId); 58 | const items = parentProxy.getLinkedRecords(parentFieldName); 59 | 60 | parentProxy.setLinkedRecords([...items, node], parentFieldName); 61 | } 62 | 63 | export function connectionUpdater( 64 | store: Store, 65 | parentId: string, 66 | connectionName: string, 67 | edge: RecordProxy, 68 | before?: boolean = false, 69 | ) { 70 | if (edge) { 71 | const parentProxy = store.get(parentId); 72 | const conn = ConnectionHandler.getConnection(parentProxy, connectionName); 73 | if (!conn) { 74 | return; 75 | } 76 | 77 | if (before) { 78 | ConnectionHandler.insertEdgeBefore(conn, edge); 79 | } else { 80 | ConnectionHandler.insertEdgeAfter(conn, edge); 81 | } 82 | } 83 | } 84 | 85 | export function optimisticConnectionUpdater({ 86 | parentId, 87 | store, 88 | connectionName, 89 | item, 90 | customNode, 91 | itemType, 92 | }: OptimisticConnectionUpdaterOptions) { 93 | const node = customNode || store.create(item.id, itemType); 94 | 95 | !customNode && 96 | Object.keys(item).forEach(key => { 97 | node.setValue(item[key], key); 98 | }); 99 | 100 | const edge = store.create('client:newEdge:' + node._dataID.match(/[^:]+$/)[0], `${itemType}Edge`); 101 | edge.setLinkedRecord(node, 'node'); 102 | 103 | connectionUpdater(store, parentId, connectionName, edge); 104 | } 105 | 106 | export function connectionDeleteEdgeUpdater({ 107 | parentId, 108 | connectionName, 109 | nodeId, 110 | store, 111 | }: ConnectionDeleteEdgeUpdaterOptions) { 112 | const parentProxy = store.get(parentId); 113 | const conn = ConnectionHandler.getConnection(parentProxy, connectionName); 114 | 115 | if (!conn) { 116 | // eslint-disable-next-line 117 | console.warn(`Connection ${connectionName} not found on ${parentId}`); 118 | return; 119 | } 120 | 121 | ConnectionHandler.deleteNode(conn, nodeId); 122 | } 123 | 124 | export function copyObjScalarsToProxy({ object, proxy }: CopyObjScalarsToProxyOptions) { 125 | Object.keys(object).forEach(key => { 126 | if (isObject(object[key]) || isArray(object[key])) return; 127 | proxy.setValue(object[key], key); 128 | }); 129 | } 130 | -------------------------------------------------------------------------------- /test_utils/stub.js: -------------------------------------------------------------------------------- 1 | module.exports = {} -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "es2017", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | "lib": [ /* Specify library files to be included in the compilation. */ 7 | "esnext", 8 | "dom" 9 | ], 10 | // "allowJs": true, /* Allow javascript files to be compiled. */ 11 | // "checkJs": true, /* Report errors in .js files. */ 12 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 13 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 15 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 16 | // "outFile": "./", /* Concatenate and emit output to single file. */ 17 | "outDir": "./distTs", /* Redirect output structure to the directory. */ 18 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 19 | // "composite": true, /* Enable project compilation */ 20 | // "removeComments": true, /* Do not emit comments to output. */ 21 | "noEmit": true, /* Do not emit outputs. */ 22 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 23 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 24 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 25 | 26 | /* Strict Type-Checking Options */ 27 | "strict": true, /* Enable all strict type-checking options. */ 28 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 29 | // "strictNullChecks": true, /* Enable strict null checks. */ 30 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | "baseUrl": ".", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "resolveJsonModule": true, 50 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 51 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 52 | 53 | /* Source Map Options */ 54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 58 | 59 | /* Experimental Options */ 60 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 62 | }, 63 | "include": [ 64 | "./src/**/*" 65 | ] 66 | } 67 | -------------------------------------------------------------------------------- /webpackCommonConfig.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | const cwd = process.cwd(); 6 | const outputPath = path.join(cwd, 'build'); 7 | 8 | module.exports = { 9 | context: path.resolve(cwd, './'), 10 | entry: ['./src/index.tsx'], 11 | output: { 12 | path: outputPath, 13 | publicPath: '/', 14 | pathinfo: false, 15 | }, 16 | resolve: { 17 | extensions: ['.ts', '.tsx', '.js', '.json', '.mjs'], 18 | }, 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.(js|jsx|ts|tsx)?$/, 23 | exclude: [/node_modules/], 24 | use: ['babel-loader?cacheDirectory'], 25 | }, 26 | ], 27 | }, 28 | plugins: [ 29 | new HtmlWebpackPlugin({ 30 | template: './src/index.html', 31 | }), 32 | ], 33 | }; 34 | -------------------------------------------------------------------------------- /webpackDevConfig.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const { merge } = require('webpack-merge'); 4 | 5 | const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); 6 | 7 | const webpackCommonConfig = require('./webpackCommonConfig'); 8 | 9 | const cwd = process.cwd(); 10 | const outputPath = path.join(cwd, 'build'); 11 | 12 | module.exports = merge(webpackCommonConfig, { 13 | mode: 'development', 14 | devtool: 'cheap-module-source-map', 15 | plugins: [ 16 | new ReactRefreshPlugin(), 17 | ], 18 | watch: true, 19 | devServer: { 20 | contentBase: outputPath, 21 | disableHostCheck: true, 22 | historyApiFallback: { 23 | disableDotRule: true, 24 | }, 25 | hot: true, 26 | hotOnly: false, 27 | compress: true, 28 | open: true, 29 | }, 30 | // uncomment to have less warnings 31 | // stats: { warnings: false }, 32 | }); 33 | -------------------------------------------------------------------------------- /webpackProdConfig.js: -------------------------------------------------------------------------------- 1 | const webpackCommonConfig = require('./webpackCommonConfig'); 2 | const { merge } = require('webpack-merge'); 3 | 4 | const TerserPlugin = require("terser-webpack-plugin"); 5 | 6 | module.exports = merge(webpackCommonConfig, { 7 | mode: 'production', 8 | devtool: 'source-map', 9 | optimization: { 10 | minimizer: [new TerserPlugin({ 11 | parallel: 4, 12 | })], 13 | }, 14 | }); 15 | --------------------------------------------------------------------------------