├── .gitignore ├── .graphql_ppx_cache ├── graphql_schema.json.hash └── graphql_schema.json.marshaled ├── README.md ├── bsconfig.json ├── build ├── Index.js └── index.html ├── graphql_schema.json ├── package-lock.json ├── package.json ├── src ├── App.re ├── Client.re ├── Index.re ├── VideoGame.re └── VideoGameList.re └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .merlin 3 | .bsb.lock 4 | npm-debug.log 5 | /lib/bs/ 6 | /node_modules/ 7 | *.bs.js -------------------------------------------------------------------------------- /.graphql_ppx_cache/graphql_schema.json.hash: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwilsonq/reason-graphql-tutorial/6694dcb3f51c929a41212efdf9fbb2e772d55a81/.graphql_ppx_cache/graphql_schema.json.hash -------------------------------------------------------------------------------- /.graphql_ppx_cache/graphql_schema.json.marshaled: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwilsonq/reason-graphql-tutorial/6694dcb3f51c929a41212efdf9fbb2e772d55a81/.graphql_ppx_cache/graphql_schema.json.marshaled -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # reason-graphql-tutorial 2 | 3 | ## Run Project 4 | 5 | ```sh 6 | npm install 7 | npm start 8 | # in another tab 9 | npm run webpack 10 | ``` 11 | 12 | After you see the webpack compilation succeed (the `npm run webpack` step), open up `src/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes. 13 | 14 | **For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example 15 | 16 | ## Build for Production 17 | 18 | ```sh 19 | npm run build 20 | npm run webpack:production 21 | ``` 22 | 23 | This will replace the development artifact `build/Index.js` for an optimized version. 24 | 25 | **To enable dead code elimination**, change `bsconfig.json`'s `package-specs` `module` from `"commonjs"` to `"es6"`. Then re-run the above 2 commands. This will allow Webpack to remove unused code. 26 | # reason-graphql-tutorial 27 | -------------------------------------------------------------------------------- /bsconfig.json: -------------------------------------------------------------------------------- 1 | /* This is the BuckleScript configuration file. Note that this is a comment; 2 | BuckleScript comes with a JSON parser that supports comments and trailing 3 | comma. If this screws with your editor highlighting, please tell us by filing 4 | an issue! */ 5 | { 6 | "name": "react-template", 7 | "reason": { 8 | "react-jsx": 2 9 | }, 10 | "sources": { 11 | "dir" : "src", 12 | "subdirs" : true 13 | }, 14 | "package-specs": [{ 15 | "module": "commonjs", 16 | "in-source": true 17 | }], 18 | "suffix": ".bs.js", 19 | "namespace": true, 20 | "bs-dependencies": [ 21 | "reason-react", 22 | "reason-apollo" 23 | ], 24 | "ppx-flags": [ 25 | "graphql_ppx/ppx" 26 | ], 27 | "refmt": 3 28 | } 29 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ReasonReact Examples 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /graphql_schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": { 3 | "__schema": { 4 | "queryType": { 5 | "name": "Query" 6 | }, 7 | "mutationType": { 8 | "name": "Mutation" 9 | }, 10 | "subscriptionType": null, 11 | "types": [ 12 | { 13 | "kind": "OBJECT", 14 | "name": "Query", 15 | "description": "", 16 | "fields": [ 17 | { 18 | "name": "videoGames", 19 | "description": "", 20 | "args": [], 21 | "type": { 22 | "kind": "NON_NULL", 23 | "name": null, 24 | "ofType": { 25 | "kind": "LIST", 26 | "name": null, 27 | "ofType": { 28 | "kind": "NON_NULL", 29 | "name": null, 30 | "ofType": { 31 | "kind": "OBJECT", 32 | "name": "VideoGame", 33 | "ofType": null 34 | } 35 | } 36 | } 37 | }, 38 | "isDeprecated": false, 39 | "deprecationReason": null 40 | } 41 | ], 42 | "inputFields": null, 43 | "interfaces": [], 44 | "enumValues": null, 45 | "possibleTypes": null 46 | }, 47 | { 48 | "kind": "OBJECT", 49 | "name": "VideoGame", 50 | "description": "", 51 | "fields": [ 52 | { 53 | "name": "id", 54 | "description": "", 55 | "args": [], 56 | "type": { 57 | "kind": "NON_NULL", 58 | "name": null, 59 | "ofType": { 60 | "kind": "SCALAR", 61 | "name": "ID", 62 | "ofType": null 63 | } 64 | }, 65 | "isDeprecated": false, 66 | "deprecationReason": null 67 | }, 68 | { 69 | "name": "title", 70 | "description": "", 71 | "args": [], 72 | "type": { 73 | "kind": "NON_NULL", 74 | "name": null, 75 | "ofType": { 76 | "kind": "SCALAR", 77 | "name": "String", 78 | "ofType": null 79 | } 80 | }, 81 | "isDeprecated": false, 82 | "deprecationReason": null 83 | }, 84 | { 85 | "name": "developer", 86 | "description": "", 87 | "args": [], 88 | "type": { 89 | "kind": "NON_NULL", 90 | "name": null, 91 | "ofType": { 92 | "kind": "SCALAR", 93 | "name": "String", 94 | "ofType": null 95 | } 96 | }, 97 | "isDeprecated": false, 98 | "deprecationReason": null 99 | }, 100 | { 101 | "name": "completed", 102 | "description": "", 103 | "args": [], 104 | "type": { 105 | "kind": "NON_NULL", 106 | "name": null, 107 | "ofType": { 108 | "kind": "SCALAR", 109 | "name": "Boolean", 110 | "ofType": null 111 | } 112 | }, 113 | "isDeprecated": false, 114 | "deprecationReason": null 115 | } 116 | ], 117 | "inputFields": null, 118 | "interfaces": [], 119 | "enumValues": null, 120 | "possibleTypes": null 121 | }, 122 | { 123 | "kind": "SCALAR", 124 | "name": "ID", 125 | "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.", 126 | "fields": null, 127 | "inputFields": null, 128 | "interfaces": null, 129 | "enumValues": null, 130 | "possibleTypes": null 131 | }, 132 | { 133 | "kind": "SCALAR", 134 | "name": "String", 135 | "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.", 136 | "fields": null, 137 | "inputFields": null, 138 | "interfaces": null, 139 | "enumValues": null, 140 | "possibleTypes": null 141 | }, 142 | { 143 | "kind": "SCALAR", 144 | "name": "Boolean", 145 | "description": "The `Boolean` scalar type represents `true` or `false`.", 146 | "fields": null, 147 | "inputFields": null, 148 | "interfaces": null, 149 | "enumValues": null, 150 | "possibleTypes": null 151 | }, 152 | { 153 | "kind": "OBJECT", 154 | "name": "Mutation", 155 | "description": "", 156 | "fields": [ 157 | { 158 | "name": "completeGame", 159 | "description": "", 160 | "args": [ 161 | { 162 | "name": "id", 163 | "description": "", 164 | "type": { 165 | "kind": "NON_NULL", 166 | "name": null, 167 | "ofType": { 168 | "kind": "SCALAR", 169 | "name": "ID", 170 | "ofType": null 171 | } 172 | }, 173 | "defaultValue": null 174 | } 175 | ], 176 | "type": { 177 | "kind": "NON_NULL", 178 | "name": null, 179 | "ofType": { 180 | "kind": "OBJECT", 181 | "name": "VideoGame", 182 | "ofType": null 183 | } 184 | }, 185 | "isDeprecated": false, 186 | "deprecationReason": null 187 | } 188 | ], 189 | "inputFields": null, 190 | "interfaces": [], 191 | "enumValues": null, 192 | "possibleTypes": null 193 | }, 194 | { 195 | "kind": "OBJECT", 196 | "name": "__Schema", 197 | "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.", 198 | "fields": [ 199 | { 200 | "name": "types", 201 | "description": "A list of all types supported by this server.", 202 | "args": [], 203 | "type": { 204 | "kind": "NON_NULL", 205 | "name": null, 206 | "ofType": { 207 | "kind": "LIST", 208 | "name": null, 209 | "ofType": { 210 | "kind": "NON_NULL", 211 | "name": null, 212 | "ofType": { 213 | "kind": "OBJECT", 214 | "name": "__Type", 215 | "ofType": null 216 | } 217 | } 218 | } 219 | }, 220 | "isDeprecated": false, 221 | "deprecationReason": null 222 | }, 223 | { 224 | "name": "queryType", 225 | "description": "The type that query operations will be rooted at.", 226 | "args": [], 227 | "type": { 228 | "kind": "NON_NULL", 229 | "name": null, 230 | "ofType": { 231 | "kind": "OBJECT", 232 | "name": "__Type", 233 | "ofType": null 234 | } 235 | }, 236 | "isDeprecated": false, 237 | "deprecationReason": null 238 | }, 239 | { 240 | "name": "mutationType", 241 | "description": "If this server supports mutation, the type that mutation operations will be rooted at.", 242 | "args": [], 243 | "type": { 244 | "kind": "OBJECT", 245 | "name": "__Type", 246 | "ofType": null 247 | }, 248 | "isDeprecated": false, 249 | "deprecationReason": null 250 | }, 251 | { 252 | "name": "subscriptionType", 253 | "description": "If this server support subscription, the type that subscription operations will be rooted at.", 254 | "args": [], 255 | "type": { 256 | "kind": "OBJECT", 257 | "name": "__Type", 258 | "ofType": null 259 | }, 260 | "isDeprecated": false, 261 | "deprecationReason": null 262 | }, 263 | { 264 | "name": "directives", 265 | "description": "A list of all directives supported by this server.", 266 | "args": [], 267 | "type": { 268 | "kind": "NON_NULL", 269 | "name": null, 270 | "ofType": { 271 | "kind": "LIST", 272 | "name": null, 273 | "ofType": { 274 | "kind": "NON_NULL", 275 | "name": null, 276 | "ofType": { 277 | "kind": "OBJECT", 278 | "name": "__Directive", 279 | "ofType": null 280 | } 281 | } 282 | } 283 | }, 284 | "isDeprecated": false, 285 | "deprecationReason": null 286 | } 287 | ], 288 | "inputFields": null, 289 | "interfaces": [], 290 | "enumValues": null, 291 | "possibleTypes": null 292 | }, 293 | { 294 | "kind": "OBJECT", 295 | "name": "__Type", 296 | "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.", 297 | "fields": [ 298 | { 299 | "name": "kind", 300 | "description": null, 301 | "args": [], 302 | "type": { 303 | "kind": "NON_NULL", 304 | "name": null, 305 | "ofType": { 306 | "kind": "ENUM", 307 | "name": "__TypeKind", 308 | "ofType": null 309 | } 310 | }, 311 | "isDeprecated": false, 312 | "deprecationReason": null 313 | }, 314 | { 315 | "name": "name", 316 | "description": null, 317 | "args": [], 318 | "type": { 319 | "kind": "SCALAR", 320 | "name": "String", 321 | "ofType": null 322 | }, 323 | "isDeprecated": false, 324 | "deprecationReason": null 325 | }, 326 | { 327 | "name": "description", 328 | "description": null, 329 | "args": [], 330 | "type": { 331 | "kind": "SCALAR", 332 | "name": "String", 333 | "ofType": null 334 | }, 335 | "isDeprecated": false, 336 | "deprecationReason": null 337 | }, 338 | { 339 | "name": "fields", 340 | "description": null, 341 | "args": [ 342 | { 343 | "name": "includeDeprecated", 344 | "description": null, 345 | "type": { 346 | "kind": "SCALAR", 347 | "name": "Boolean", 348 | "ofType": null 349 | }, 350 | "defaultValue": "false" 351 | } 352 | ], 353 | "type": { 354 | "kind": "LIST", 355 | "name": null, 356 | "ofType": { 357 | "kind": "NON_NULL", 358 | "name": null, 359 | "ofType": { 360 | "kind": "OBJECT", 361 | "name": "__Field", 362 | "ofType": null 363 | } 364 | } 365 | }, 366 | "isDeprecated": false, 367 | "deprecationReason": null 368 | }, 369 | { 370 | "name": "interfaces", 371 | "description": null, 372 | "args": [], 373 | "type": { 374 | "kind": "LIST", 375 | "name": null, 376 | "ofType": { 377 | "kind": "NON_NULL", 378 | "name": null, 379 | "ofType": { 380 | "kind": "OBJECT", 381 | "name": "__Type", 382 | "ofType": null 383 | } 384 | } 385 | }, 386 | "isDeprecated": false, 387 | "deprecationReason": null 388 | }, 389 | { 390 | "name": "possibleTypes", 391 | "description": null, 392 | "args": [], 393 | "type": { 394 | "kind": "LIST", 395 | "name": null, 396 | "ofType": { 397 | "kind": "NON_NULL", 398 | "name": null, 399 | "ofType": { 400 | "kind": "OBJECT", 401 | "name": "__Type", 402 | "ofType": null 403 | } 404 | } 405 | }, 406 | "isDeprecated": false, 407 | "deprecationReason": null 408 | }, 409 | { 410 | "name": "enumValues", 411 | "description": null, 412 | "args": [ 413 | { 414 | "name": "includeDeprecated", 415 | "description": null, 416 | "type": { 417 | "kind": "SCALAR", 418 | "name": "Boolean", 419 | "ofType": null 420 | }, 421 | "defaultValue": "false" 422 | } 423 | ], 424 | "type": { 425 | "kind": "LIST", 426 | "name": null, 427 | "ofType": { 428 | "kind": "NON_NULL", 429 | "name": null, 430 | "ofType": { 431 | "kind": "OBJECT", 432 | "name": "__EnumValue", 433 | "ofType": null 434 | } 435 | } 436 | }, 437 | "isDeprecated": false, 438 | "deprecationReason": null 439 | }, 440 | { 441 | "name": "inputFields", 442 | "description": null, 443 | "args": [], 444 | "type": { 445 | "kind": "LIST", 446 | "name": null, 447 | "ofType": { 448 | "kind": "NON_NULL", 449 | "name": null, 450 | "ofType": { 451 | "kind": "OBJECT", 452 | "name": "__InputValue", 453 | "ofType": null 454 | } 455 | } 456 | }, 457 | "isDeprecated": false, 458 | "deprecationReason": null 459 | }, 460 | { 461 | "name": "ofType", 462 | "description": null, 463 | "args": [], 464 | "type": { 465 | "kind": "OBJECT", 466 | "name": "__Type", 467 | "ofType": null 468 | }, 469 | "isDeprecated": false, 470 | "deprecationReason": null 471 | } 472 | ], 473 | "inputFields": null, 474 | "interfaces": [], 475 | "enumValues": null, 476 | "possibleTypes": null 477 | }, 478 | { 479 | "kind": "ENUM", 480 | "name": "__TypeKind", 481 | "description": "An enum describing what kind of type a given `__Type` is.", 482 | "fields": null, 483 | "inputFields": null, 484 | "interfaces": null, 485 | "enumValues": [ 486 | { 487 | "name": "SCALAR", 488 | "description": "Indicates this type is a scalar.", 489 | "isDeprecated": false, 490 | "deprecationReason": null 491 | }, 492 | { 493 | "name": "OBJECT", 494 | "description": "Indicates this type is an object. `fields` and `interfaces` are valid fields.", 495 | "isDeprecated": false, 496 | "deprecationReason": null 497 | }, 498 | { 499 | "name": "INTERFACE", 500 | "description": "Indicates this type is an interface. `fields` and `possibleTypes` are valid fields.", 501 | "isDeprecated": false, 502 | "deprecationReason": null 503 | }, 504 | { 505 | "name": "UNION", 506 | "description": "Indicates this type is a union. `possibleTypes` is a valid field.", 507 | "isDeprecated": false, 508 | "deprecationReason": null 509 | }, 510 | { 511 | "name": "ENUM", 512 | "description": "Indicates this type is an enum. `enumValues` is a valid field.", 513 | "isDeprecated": false, 514 | "deprecationReason": null 515 | }, 516 | { 517 | "name": "INPUT_OBJECT", 518 | "description": "Indicates this type is an input object. `inputFields` is a valid field.", 519 | "isDeprecated": false, 520 | "deprecationReason": null 521 | }, 522 | { 523 | "name": "LIST", 524 | "description": "Indicates this type is a list. `ofType` is a valid field.", 525 | "isDeprecated": false, 526 | "deprecationReason": null 527 | }, 528 | { 529 | "name": "NON_NULL", 530 | "description": "Indicates this type is a non-null. `ofType` is a valid field.", 531 | "isDeprecated": false, 532 | "deprecationReason": null 533 | } 534 | ], 535 | "possibleTypes": null 536 | }, 537 | { 538 | "kind": "OBJECT", 539 | "name": "__Field", 540 | "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.", 541 | "fields": [ 542 | { 543 | "name": "name", 544 | "description": null, 545 | "args": [], 546 | "type": { 547 | "kind": "NON_NULL", 548 | "name": null, 549 | "ofType": { 550 | "kind": "SCALAR", 551 | "name": "String", 552 | "ofType": null 553 | } 554 | }, 555 | "isDeprecated": false, 556 | "deprecationReason": null 557 | }, 558 | { 559 | "name": "description", 560 | "description": null, 561 | "args": [], 562 | "type": { 563 | "kind": "SCALAR", 564 | "name": "String", 565 | "ofType": null 566 | }, 567 | "isDeprecated": false, 568 | "deprecationReason": null 569 | }, 570 | { 571 | "name": "args", 572 | "description": null, 573 | "args": [], 574 | "type": { 575 | "kind": "NON_NULL", 576 | "name": null, 577 | "ofType": { 578 | "kind": "LIST", 579 | "name": null, 580 | "ofType": { 581 | "kind": "NON_NULL", 582 | "name": null, 583 | "ofType": { 584 | "kind": "OBJECT", 585 | "name": "__InputValue", 586 | "ofType": null 587 | } 588 | } 589 | } 590 | }, 591 | "isDeprecated": false, 592 | "deprecationReason": null 593 | }, 594 | { 595 | "name": "type", 596 | "description": null, 597 | "args": [], 598 | "type": { 599 | "kind": "NON_NULL", 600 | "name": null, 601 | "ofType": { 602 | "kind": "OBJECT", 603 | "name": "__Type", 604 | "ofType": null 605 | } 606 | }, 607 | "isDeprecated": false, 608 | "deprecationReason": null 609 | }, 610 | { 611 | "name": "isDeprecated", 612 | "description": null, 613 | "args": [], 614 | "type": { 615 | "kind": "NON_NULL", 616 | "name": null, 617 | "ofType": { 618 | "kind": "SCALAR", 619 | "name": "Boolean", 620 | "ofType": null 621 | } 622 | }, 623 | "isDeprecated": false, 624 | "deprecationReason": null 625 | }, 626 | { 627 | "name": "deprecationReason", 628 | "description": null, 629 | "args": [], 630 | "type": { 631 | "kind": "SCALAR", 632 | "name": "String", 633 | "ofType": null 634 | }, 635 | "isDeprecated": false, 636 | "deprecationReason": null 637 | } 638 | ], 639 | "inputFields": null, 640 | "interfaces": [], 641 | "enumValues": null, 642 | "possibleTypes": null 643 | }, 644 | { 645 | "kind": "OBJECT", 646 | "name": "__InputValue", 647 | "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.", 648 | "fields": [ 649 | { 650 | "name": "name", 651 | "description": null, 652 | "args": [], 653 | "type": { 654 | "kind": "NON_NULL", 655 | "name": null, 656 | "ofType": { 657 | "kind": "SCALAR", 658 | "name": "String", 659 | "ofType": null 660 | } 661 | }, 662 | "isDeprecated": false, 663 | "deprecationReason": null 664 | }, 665 | { 666 | "name": "description", 667 | "description": null, 668 | "args": [], 669 | "type": { 670 | "kind": "SCALAR", 671 | "name": "String", 672 | "ofType": null 673 | }, 674 | "isDeprecated": false, 675 | "deprecationReason": null 676 | }, 677 | { 678 | "name": "type", 679 | "description": null, 680 | "args": [], 681 | "type": { 682 | "kind": "NON_NULL", 683 | "name": null, 684 | "ofType": { 685 | "kind": "OBJECT", 686 | "name": "__Type", 687 | "ofType": null 688 | } 689 | }, 690 | "isDeprecated": false, 691 | "deprecationReason": null 692 | }, 693 | { 694 | "name": "defaultValue", 695 | "description": "A GraphQL-formatted string representing the default value for this input value.", 696 | "args": [], 697 | "type": { 698 | "kind": "SCALAR", 699 | "name": "String", 700 | "ofType": null 701 | }, 702 | "isDeprecated": false, 703 | "deprecationReason": null 704 | } 705 | ], 706 | "inputFields": null, 707 | "interfaces": [], 708 | "enumValues": null, 709 | "possibleTypes": null 710 | }, 711 | { 712 | "kind": "OBJECT", 713 | "name": "__EnumValue", 714 | "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.", 715 | "fields": [ 716 | { 717 | "name": "name", 718 | "description": null, 719 | "args": [], 720 | "type": { 721 | "kind": "NON_NULL", 722 | "name": null, 723 | "ofType": { 724 | "kind": "SCALAR", 725 | "name": "String", 726 | "ofType": null 727 | } 728 | }, 729 | "isDeprecated": false, 730 | "deprecationReason": null 731 | }, 732 | { 733 | "name": "description", 734 | "description": null, 735 | "args": [], 736 | "type": { 737 | "kind": "SCALAR", 738 | "name": "String", 739 | "ofType": null 740 | }, 741 | "isDeprecated": false, 742 | "deprecationReason": null 743 | }, 744 | { 745 | "name": "isDeprecated", 746 | "description": null, 747 | "args": [], 748 | "type": { 749 | "kind": "NON_NULL", 750 | "name": null, 751 | "ofType": { 752 | "kind": "SCALAR", 753 | "name": "Boolean", 754 | "ofType": null 755 | } 756 | }, 757 | "isDeprecated": false, 758 | "deprecationReason": null 759 | }, 760 | { 761 | "name": "deprecationReason", 762 | "description": null, 763 | "args": [], 764 | "type": { 765 | "kind": "SCALAR", 766 | "name": "String", 767 | "ofType": null 768 | }, 769 | "isDeprecated": false, 770 | "deprecationReason": null 771 | } 772 | ], 773 | "inputFields": null, 774 | "interfaces": [], 775 | "enumValues": null, 776 | "possibleTypes": null 777 | }, 778 | { 779 | "kind": "OBJECT", 780 | "name": "__Directive", 781 | "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.", 782 | "fields": [ 783 | { 784 | "name": "name", 785 | "description": null, 786 | "args": [], 787 | "type": { 788 | "kind": "NON_NULL", 789 | "name": null, 790 | "ofType": { 791 | "kind": "SCALAR", 792 | "name": "String", 793 | "ofType": null 794 | } 795 | }, 796 | "isDeprecated": false, 797 | "deprecationReason": null 798 | }, 799 | { 800 | "name": "description", 801 | "description": null, 802 | "args": [], 803 | "type": { 804 | "kind": "SCALAR", 805 | "name": "String", 806 | "ofType": null 807 | }, 808 | "isDeprecated": false, 809 | "deprecationReason": null 810 | }, 811 | { 812 | "name": "locations", 813 | "description": null, 814 | "args": [], 815 | "type": { 816 | "kind": "NON_NULL", 817 | "name": null, 818 | "ofType": { 819 | "kind": "LIST", 820 | "name": null, 821 | "ofType": { 822 | "kind": "NON_NULL", 823 | "name": null, 824 | "ofType": { 825 | "kind": "ENUM", 826 | "name": "__DirectiveLocation", 827 | "ofType": null 828 | } 829 | } 830 | } 831 | }, 832 | "isDeprecated": false, 833 | "deprecationReason": null 834 | }, 835 | { 836 | "name": "args", 837 | "description": null, 838 | "args": [], 839 | "type": { 840 | "kind": "NON_NULL", 841 | "name": null, 842 | "ofType": { 843 | "kind": "LIST", 844 | "name": null, 845 | "ofType": { 846 | "kind": "NON_NULL", 847 | "name": null, 848 | "ofType": { 849 | "kind": "OBJECT", 850 | "name": "__InputValue", 851 | "ofType": null 852 | } 853 | } 854 | } 855 | }, 856 | "isDeprecated": false, 857 | "deprecationReason": null 858 | } 859 | ], 860 | "inputFields": null, 861 | "interfaces": [], 862 | "enumValues": null, 863 | "possibleTypes": null 864 | }, 865 | { 866 | "kind": "ENUM", 867 | "name": "__DirectiveLocation", 868 | "description": "A Directive can be adjacent to many parts of the GraphQL language, a __DirectiveLocation describes one such possible adjacencies.", 869 | "fields": null, 870 | "inputFields": null, 871 | "interfaces": null, 872 | "enumValues": [ 873 | { 874 | "name": "QUERY", 875 | "description": "Location adjacent to a query operation.", 876 | "isDeprecated": false, 877 | "deprecationReason": null 878 | }, 879 | { 880 | "name": "MUTATION", 881 | "description": "Location adjacent to a mutation operation.", 882 | "isDeprecated": false, 883 | "deprecationReason": null 884 | }, 885 | { 886 | "name": "SUBSCRIPTION", 887 | "description": "Location adjacent to a subscription operation.", 888 | "isDeprecated": false, 889 | "deprecationReason": null 890 | }, 891 | { 892 | "name": "FIELD", 893 | "description": "Location adjacent to a field.", 894 | "isDeprecated": false, 895 | "deprecationReason": null 896 | }, 897 | { 898 | "name": "FRAGMENT_DEFINITION", 899 | "description": "Location adjacent to a fragment definition.", 900 | "isDeprecated": false, 901 | "deprecationReason": null 902 | }, 903 | { 904 | "name": "FRAGMENT_SPREAD", 905 | "description": "Location adjacent to a fragment spread.", 906 | "isDeprecated": false, 907 | "deprecationReason": null 908 | }, 909 | { 910 | "name": "INLINE_FRAGMENT", 911 | "description": "Location adjacent to an inline fragment.", 912 | "isDeprecated": false, 913 | "deprecationReason": null 914 | }, 915 | { 916 | "name": "VARIABLE_DEFINITION", 917 | "description": "Location adjacent to a variable definition.", 918 | "isDeprecated": false, 919 | "deprecationReason": null 920 | }, 921 | { 922 | "name": "SCHEMA", 923 | "description": "Location adjacent to a schema definition.", 924 | "isDeprecated": false, 925 | "deprecationReason": null 926 | }, 927 | { 928 | "name": "SCALAR", 929 | "description": "Location adjacent to a scalar definition.", 930 | "isDeprecated": false, 931 | "deprecationReason": null 932 | }, 933 | { 934 | "name": "OBJECT", 935 | "description": "Location adjacent to an object type definition.", 936 | "isDeprecated": false, 937 | "deprecationReason": null 938 | }, 939 | { 940 | "name": "FIELD_DEFINITION", 941 | "description": "Location adjacent to a field definition.", 942 | "isDeprecated": false, 943 | "deprecationReason": null 944 | }, 945 | { 946 | "name": "ARGUMENT_DEFINITION", 947 | "description": "Location adjacent to an argument definition.", 948 | "isDeprecated": false, 949 | "deprecationReason": null 950 | }, 951 | { 952 | "name": "INTERFACE", 953 | "description": "Location adjacent to an interface definition.", 954 | "isDeprecated": false, 955 | "deprecationReason": null 956 | }, 957 | { 958 | "name": "UNION", 959 | "description": "Location adjacent to a union definition.", 960 | "isDeprecated": false, 961 | "deprecationReason": null 962 | }, 963 | { 964 | "name": "ENUM", 965 | "description": "Location adjacent to an enum definition.", 966 | "isDeprecated": false, 967 | "deprecationReason": null 968 | }, 969 | { 970 | "name": "ENUM_VALUE", 971 | "description": "Location adjacent to an enum value definition.", 972 | "isDeprecated": false, 973 | "deprecationReason": null 974 | }, 975 | { 976 | "name": "INPUT_OBJECT", 977 | "description": "Location adjacent to an input object type definition.", 978 | "isDeprecated": false, 979 | "deprecationReason": null 980 | }, 981 | { 982 | "name": "INPUT_FIELD_DEFINITION", 983 | "description": "Location adjacent to an input object field definition.", 984 | "isDeprecated": false, 985 | "deprecationReason": null 986 | } 987 | ], 988 | "possibleTypes": null 989 | }, 990 | { 991 | "kind": "ENUM", 992 | "name": "CacheControlScope", 993 | "description": "", 994 | "fields": null, 995 | "inputFields": null, 996 | "interfaces": null, 997 | "enumValues": [ 998 | { 999 | "name": "PUBLIC", 1000 | "description": "", 1001 | "isDeprecated": false, 1002 | "deprecationReason": null 1003 | }, 1004 | { 1005 | "name": "PRIVATE", 1006 | "description": "", 1007 | "isDeprecated": false, 1008 | "deprecationReason": null 1009 | } 1010 | ], 1011 | "possibleTypes": null 1012 | }, 1013 | { 1014 | "kind": "SCALAR", 1015 | "name": "Upload", 1016 | "description": "The `Upload` scalar type represents a file upload promise that resolves an object containing `stream`, `filename`, `mimetype` and `encoding`.", 1017 | "fields": null, 1018 | "inputFields": null, 1019 | "interfaces": null, 1020 | "enumValues": null, 1021 | "possibleTypes": null 1022 | }, 1023 | { 1024 | "kind": "SCALAR", 1025 | "name": "Int", 1026 | "description": "The `Int` scalar type represents non-fractional signed whole numeric values. Int can represent values between -(2^31) and 2^31 - 1. ", 1027 | "fields": null, 1028 | "inputFields": null, 1029 | "interfaces": null, 1030 | "enumValues": null, 1031 | "possibleTypes": null 1032 | } 1033 | ], 1034 | "directives": [ 1035 | { 1036 | "name": "cacheControl", 1037 | "description": "", 1038 | "locations": [ 1039 | "FIELD_DEFINITION", 1040 | "OBJECT", 1041 | "INTERFACE" 1042 | ], 1043 | "args": [ 1044 | { 1045 | "name": "maxAge", 1046 | "description": "", 1047 | "type": { 1048 | "kind": "SCALAR", 1049 | "name": "Int", 1050 | "ofType": null 1051 | }, 1052 | "defaultValue": null 1053 | }, 1054 | { 1055 | "name": "scope", 1056 | "description": "", 1057 | "type": { 1058 | "kind": "ENUM", 1059 | "name": "CacheControlScope", 1060 | "ofType": null 1061 | }, 1062 | "defaultValue": null 1063 | } 1064 | ] 1065 | }, 1066 | { 1067 | "name": "skip", 1068 | "description": "Directs the executor to skip this field or fragment when the `if` argument is true.", 1069 | "locations": [ 1070 | "FIELD", 1071 | "FRAGMENT_SPREAD", 1072 | "INLINE_FRAGMENT" 1073 | ], 1074 | "args": [ 1075 | { 1076 | "name": "if", 1077 | "description": "Skipped when true.", 1078 | "type": { 1079 | "kind": "NON_NULL", 1080 | "name": null, 1081 | "ofType": { 1082 | "kind": "SCALAR", 1083 | "name": "Boolean", 1084 | "ofType": null 1085 | } 1086 | }, 1087 | "defaultValue": null 1088 | } 1089 | ] 1090 | }, 1091 | { 1092 | "name": "include", 1093 | "description": "Directs the executor to include this field or fragment only when the `if` argument is true.", 1094 | "locations": [ 1095 | "FIELD", 1096 | "FRAGMENT_SPREAD", 1097 | "INLINE_FRAGMENT" 1098 | ], 1099 | "args": [ 1100 | { 1101 | "name": "if", 1102 | "description": "Included when true.", 1103 | "type": { 1104 | "kind": "NON_NULL", 1105 | "name": null, 1106 | "ofType": { 1107 | "kind": "SCALAR", 1108 | "name": "Boolean", 1109 | "ofType": null 1110 | } 1111 | }, 1112 | "defaultValue": null 1113 | } 1114 | ] 1115 | }, 1116 | { 1117 | "name": "deprecated", 1118 | "description": "Marks an element of a GraphQL schema as no longer supported.", 1119 | "locations": [ 1120 | "FIELD_DEFINITION", 1121 | "ENUM_VALUE" 1122 | ], 1123 | "args": [ 1124 | { 1125 | "name": "reason", 1126 | "description": "Explains why this element was deprecated, usually also including a suggestion for how to access supported similar data. Formatted using the Markdown syntax (as specified by [CommonMark](https://commonmark.org/).", 1127 | "type": { 1128 | "kind": "SCALAR", 1129 | "name": "String", 1130 | "ofType": null 1131 | }, 1132 | "defaultValue": "\"No longer supported\"" 1133 | } 1134 | ] 1135 | } 1136 | ] 1137 | } 1138 | } 1139 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reason-graphql-example", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "build": "bsb -make-world", 6 | "start": "bsb -make-world -w", 7 | "clean": "bsb -clean-world", 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "webpack": "webpack -w", 10 | "webpack:production": "NODE_ENV=production webpack" 11 | }, 12 | "keywords": [ 13 | "BuckleScript" 14 | ], 15 | "author": "", 16 | "license": "MIT", 17 | "dependencies": { 18 | "apollo-cache-inmemory": "^1.3.9", 19 | "apollo-client": "^2.4.5", 20 | "apollo-link": "^1.2.3", 21 | "apollo-link-context": "^1.0.9", 22 | "apollo-link-error": "^1.1.1", 23 | "apollo-link-http": "^1.5.5", 24 | "apollo-link-ws": "^1.0.9", 25 | "apollo-upload-client": "^9.1.0", 26 | "graphql": "^14.0.2", 27 | "graphql-tag": "^2.10.0", 28 | "react": "^16.2.0", 29 | "react-apollo": "^2.3.1", 30 | "react-dom": "^16.2.0", 31 | "reason-apollo": "^0.14.2", 32 | "reason-react": ">=0.4.0", 33 | "subscriptions-transport-ws": "^0.9.15" 34 | }, 35 | "devDependencies": { 36 | "add": "^2.0.6", 37 | "bs-platform": "^4.0.6", 38 | "graphql_ppx": "^0.2.8", 39 | "webpack": "^4.0.1", 40 | "webpack-cli": "^3.1.1", 41 | "yarn": "^1.12.3" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/App.re: -------------------------------------------------------------------------------- 1 | let str = ReasonReact.string; 2 | 3 | let component = ReasonReact.statelessComponent("App"); 4 | 5 | module VideoGames = [%graphql 6 | {| 7 | query VideoGames { 8 | videoGames { 9 | id 10 | title 11 | developer 12 | completed 13 | } 14 | } 15 | |} 16 | ]; 17 | 18 | module VideoGamesQuery = ReasonApollo.CreateQuery(VideoGames); 19 | 20 | let make = _children => { 21 | ...component, 22 | render: _self => { 23 | let videoGamesQuery = VideoGames.make(); 24 |
25 |

{"ReasonML + ReasonReact + GraphQL" |> str}

26 | 27 | ...{ 28 | ({result}) => 29 | switch (result) { 30 | | Loading =>
{"Loading!" |> str}
31 | | Error(error) =>
{error##message |> str}
32 | | Data(data) => 33 | } 34 | } 35 | 36 |
; 37 | }, 38 | }; -------------------------------------------------------------------------------- /src/Client.re: -------------------------------------------------------------------------------- 1 | let inMemoryCache = ApolloInMemoryCache.createInMemoryCache(); 2 | 3 | let httpLink = 4 | ApolloLinks.createHttpLink( 5 | ~uri="https://video-game-api-pvibqsoxza.now.sh//graphql", 6 | (), 7 | ); 8 | 9 | let instance = 10 | ReasonApollo.createApolloClient(~link=httpLink, ~cache=inMemoryCache, ()); -------------------------------------------------------------------------------- /src/Index.re: -------------------------------------------------------------------------------- 1 | ReactDOMRe.renderToElementWithId( 2 | 3 | 4 | , 5 | "root", 6 | ); -------------------------------------------------------------------------------- /src/VideoGame.re: -------------------------------------------------------------------------------- 1 | [@bs.deriving jsConverter] 2 | type videoGame = { 3 | id: string, 4 | title: string, 5 | developer: string, 6 | completed: bool, 7 | }; -------------------------------------------------------------------------------- /src/VideoGameList.re: -------------------------------------------------------------------------------- 1 | open VideoGame; 2 | 3 | let str = ReasonReact.string; 4 | let component = ReasonReact.statelessComponent("VideoGameList"); 5 | 6 | module CompleteGame = [%graphql 7 | {| 8 | mutation CompleteGame($id: ID!) { 9 | completeGame(id: $id) { 10 | id 11 | completed 12 | } 13 | } 14 | |} 15 | ]; 16 | 17 | module CompleteGameMutation = ReasonApollo.CreateMutation(CompleteGame); 18 | 19 | let make = (~items, _children) => { 20 | ...component, 21 | render: _self => 22 | , 65 | }; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const outputDir = path.join(__dirname, "build/"); 3 | 4 | const isProd = process.env.NODE_ENV === 'production'; 5 | 6 | module.exports = { 7 | entry: './src/Index.bs.js', 8 | mode: isProd ? 'production' : 'development', 9 | output: { 10 | path: outputDir, 11 | publicPath: outputDir, 12 | filename: 'Index.js', 13 | }, 14 | }; 15 | --------------------------------------------------------------------------------