├── .npmignore
├── .gitattributes
├── examples
├── README.md
├── pr
│ └── 196
│ │ ├── client
│ │ ├── src
│ │ │ ├── App.re
│ │ │ ├── Index.re
│ │ │ ├── index.html
│ │ │ ├── Client.re
│ │ │ ├── Wallets.re
│ │ │ └── Settings.re
│ │ ├── .gitignore
│ │ ├── build
│ │ │ └── index.html
│ │ ├── bsconfig.json
│ │ ├── webpack.config.js
│ │ ├── package.json
│ │ ├── README.md
│ │ └── graphql_schema.json
│ │ └── server
│ │ ├── package.json
│ │ └── index.js
├── swapi
│ ├── .gitignore
│ ├── src
│ │ ├── index.re
│ │ ├── Page.re
│ │ ├── ShowLivePersons.re
│ │ ├── PersonById.re
│ │ ├── PersonByIdDelete.re
│ │ ├── SubscribeToPersons.re
│ │ ├── GetPersonById.re
│ │ ├── AddPerson.re
│ │ ├── GetPerson.re
│ │ ├── Persons.re
│ │ ├── Client.re
│ │ ├── DeletePerson.re
│ │ ├── DeletePersonButton.re
│ │ └── PersonSubscribeToMore.re
│ ├── index.html
│ ├── webpack.config.js
│ ├── README.md
│ ├── bsconfig.json
│ └── package.json
└── realtime-chat-application
│ ├── src
│ ├── Theme.re
│ ├── index.re
│ ├── Handler.re
│ ├── Messages.re
│ ├── App.re
│ ├── Header.re
│ ├── ChatBubble.re
│ ├── index.html
│ ├── NewMessageNotification.re
│ ├── ReasonApolloClient.re
│ ├── AddMessage.re
│ └── MessagesContainer.re
│ ├── public
│ ├── favicon.ico
│ ├── notification.mp3
│ ├── notification.ogg
│ ├── manifest.json
│ └── index.html
│ ├── webpack.config.js
│ ├── bsconfig.json
│ ├── .gitignore
│ ├── package.json
│ ├── README.md
│ └── graphql_schema.json
├── .travis.yml
├── src
├── ApolloProvider.re
├── ApolloUtilities.re
├── ReasonApolloUtils.re
├── ApolloConsumer.re
├── graphql-types
│ ├── ReasonApolloSubscription.rei
│ ├── ReasonApolloSubscription.re
│ ├── ReasonApolloMutation.rei
│ ├── ReasonApolloQuery.rei
│ ├── ReasonApolloMutation.re
│ └── ReasonApolloQuery.re
├── ReasonApollo.re
├── ApolloInMemoryCache.re
├── ReasonApolloTypes.re
├── ApolloLinks.re
└── ApolloClient.re
├── .github
├── PULL_REQUEST_TEMPLATE.md
└── ISSUE_TEMPLATE.md
├── .gitignore
├── bsconfig.json
├── LICENSE
├── package.json
├── CONTRIBUTING.md
└── README.md
/.npmignore:
--------------------------------------------------------------------------------
1 | examples
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.re linguist-language=Reason
2 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | This folder contains working examples of usage of the library.
--------------------------------------------------------------------------------
/examples/pr/196/client/src/App.re:
--------------------------------------------------------------------------------
1 | [@react.component]
2 | let make = () =>
;
3 |
--------------------------------------------------------------------------------
/examples/pr/196/client/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .merlin
3 | .bsb.lock
4 | npm-debug.log
5 | /lib/bs/
6 | /node_modules/
7 |
--------------------------------------------------------------------------------
/examples/swapi/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .merlin
3 | .bsb.lock
4 | npm-debug.log
5 | /lib/bs/
6 | /node_modules/
7 | build
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/Theme.re:
--------------------------------------------------------------------------------
1 | open Css;
2 |
3 | let primaryColor = purple;
4 | let secondaryColor = tomato;
5 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/reason-apollo/HEAD/examples/realtime-chat-application/public/favicon.ico
--------------------------------------------------------------------------------
/examples/realtime-chat-application/public/notification.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/reason-apollo/HEAD/examples/realtime-chat-application/public/notification.mp3
--------------------------------------------------------------------------------
/examples/realtime-chat-application/public/notification.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/reason-apollo/HEAD/examples/realtime-chat-application/public/notification.ogg
--------------------------------------------------------------------------------
/examples/pr/196/client/src/Index.re:
--------------------------------------------------------------------------------
1 | ReactDOMRe.renderToElementWithId(
2 |
3 | ,
5 | "index1",
6 | );
7 |
--------------------------------------------------------------------------------
/examples/swapi/src/index.re:
--------------------------------------------------------------------------------
1 | ReactDOMRe.renderToElementWithId(
2 |
3 |
5 | , "index");
6 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 | - "8"
5 | cache:
6 | yarn: true
7 | directories:
8 | - node_modules
9 | install: npm install
10 | script:
11 | - npm run build
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/index.re:
--------------------------------------------------------------------------------
1 | ReactDOMRe.renderToElementWithId(
2 |
3 |
5 | , "root");
6 |
--------------------------------------------------------------------------------
/src/ApolloProvider.re:
--------------------------------------------------------------------------------
1 | open ApolloClient;
2 |
3 | [@bs.module "react-apollo"] [@react.component]
4 | external make:
5 | (~client: generatedApolloClient, ~children: React.element) => React.element =
6 | "ApolloProvider";
7 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/Handler.re:
--------------------------------------------------------------------------------
1 | let onChange = evt => (
2 | evt
3 | |> ReactEventRe.Form.target
4 | |> ReactDOMRe.domElementToObj
5 | )##value;
6 |
--------------------------------------------------------------------------------
/examples/swapi/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Reason Example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/ApolloUtilities.re:
--------------------------------------------------------------------------------
1 | type operationDefinitionNode = {
2 | kind: string,
3 | operation: string,
4 | };
5 |
6 | [@bs.module "apollo-utilities"]
7 | external getMainDefinition:
8 | ReasonApolloTypes.documentNodeT => operationDefinitionNode =
9 | "getMainDefinition";
10 |
--------------------------------------------------------------------------------
/examples/pr/196/client/build/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ReasonReact Examples
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/pr/196/client/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ReasonReact Examples
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/swapi/src/Page.re:
--------------------------------------------------------------------------------
1 | [@react.component]
2 | let make = () =>
3 |
4 |
{React.string("Star Wars")}
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
{client => children(client)} ;
13 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/Messages.re:
--------------------------------------------------------------------------------
1 | let component = ReasonReact.statelessComponent("Messages");
2 |
3 | let make = (
4 | ~messages,
5 | ~onLoad,
6 | _children
7 | ) => {
8 | ...component,
9 | didMount: _self => {
10 | onLoad()
11 | },
12 | render: _self =>
13 | {
14 | messages
15 | |> Js.Array.map(message => )
16 | |> ReasonReact.array
17 | }
18 |
19 | };
20 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | **Pull Request Labels**
4 |
5 |
8 |
9 | - [ ] feature
10 | - [ ] blocking
11 | - [ ] docs
12 |
13 |
17 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/App.re:
--------------------------------------------------------------------------------
1 | module Styles = {
2 | open Css;
3 |
4 | let container = style([
5 | marginBottom(px(100))
6 | ]);
7 | };
8 |
9 | let component = ReasonReact.statelessComponent("App");
10 |
11 | let make = _children => {
12 | ...component,
13 | render: _self =>
14 | ,
20 | };
21 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/Header.re:
--------------------------------------------------------------------------------
1 | module Styles = {
2 | open Css;
3 |
4 | let header = style([
5 | backgroundColor(Theme.primaryColor),
6 | color(white),
7 | fontSize(rem(2.0)),
8 | padding(px(20))
9 | ]);
10 | };
11 |
12 | let component = ReasonReact.statelessComponent("Header");
13 |
14 | let make = _children => {
15 | ...component,
16 | render: _self => ("Chat Application" |> ReasonReact.string)
,
17 | };
18 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/bsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reason-scripts",
3 | "sources": ["src", "lib"],
4 | "bs-dependencies": ["reason-react", "@glennsl/bs-jest", "bs-css", "reason-apollo"],
5 | "reason": {
6 | "react-jsx": 2
7 | },
8 | "bsc-flags": ["-bs-super-errors"],
9 | "refmt": 3,
10 | "package-specs": {
11 | "module": "commonjs",
12 | "in-source": true
13 | },
14 | "ppx-flags": [
15 | "graphql_ppx/ppx"
16 | ],
17 | "suffix": ".bs.js"
18 | }
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | *.log
3 | npm-debug.log*
4 | yarn-debug.log*
5 | yarn-error.log*
6 | package-lock.json
7 |
8 |
9 | # Dependency directories
10 | node_modules/
11 |
12 | # Optional npm cache directory
13 | .npm
14 |
15 | # Optional eslint cache
16 | .eslintcache
17 |
18 | # Yarn Integrity file
19 | .yarn-integrity
20 |
21 | .merlin
22 |
23 | lib
24 | *.bs.js
25 |
26 | **/*.swp
27 | **/.graphql_ppx_cache
28 |
29 | .bsb.lock
30 | schema.graphql
31 | .DS_Store
32 |
33 | # Editor
34 | **/.idea
35 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # bucklescript
13 | /lib
14 | /types
15 | .merlin
16 | *.bs.js
17 |
18 | # misc
19 | .DS_Store
20 | .env.local
21 | .env.development.local
22 | .env.test.local
23 | .env.production.local
24 |
25 | npm-debug.log*
26 | yarn-debug.log*
27 | yarn-error.log*
28 | **/*.swp
29 |
--------------------------------------------------------------------------------
/examples/swapi/src/ShowLivePersons.re:
--------------------------------------------------------------------------------
1 | let ste = React.string;
2 |
3 | [@react.component]
4 | let make = (~persons, ~getLiveData) => {
5 | React.useEffect0(() => {
6 | getLiveData();
7 | /* Nothing to clean */
8 | None;
9 | });
10 | persons
11 | |> Array.mapi((index, person) =>
12 | string_of_int}>
13 | {person##name |> ste}
14 |
15 |
{"ID: " ++ person##id |> ste}
16 |
7 |
22 |
;
23 | };
24 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/ChatBubble.re:
--------------------------------------------------------------------------------
1 | module Styles = {
2 | open Css;
3 | let container = userMsg => style([
4 | margin(px(5)),
5 | padding(px(5)),
6 | backgroundColor(Theme.secondaryColor),
7 | color(white),
8 | borderRadius(px(3)),
9 | width(px(300))
10 | ]);
11 | };
12 |
13 | let component = ReasonReact.statelessComponent("Message");
14 |
15 | let make = (~message, _children) => {
16 | ...component,
17 | render: _ =>
18 |
19 | (message##author##name ++ " : " ++ message##text |> ReasonReact.string)
20 |
,
21 | };
22 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chat App
8 |
9 |
15 |
16 |
17 |
18 | You need to enable JavaScript to run this app.
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chat App
8 |
9 |
15 |
16 |
17 |
18 | You need to enable JavaScript to run this app.
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/examples/swapi/src/PersonByIdDelete.re:
--------------------------------------------------------------------------------
1 | let ste = React.string;
2 |
3 | let onIdInputChange = (setId, e) => setId(ReactEvent.Form.target(e)##value);
4 |
5 | [@react.component]
6 | let make = () => {
7 | let (id, setId) = React.useState(() => "");
8 | ;
23 | };
24 |
--------------------------------------------------------------------------------
/examples/pr/196/client/src/Wallets.re:
--------------------------------------------------------------------------------
1 | module GetWallets = [%graphql
2 | {|
3 | query getWallets {
4 | wallets {
5 | id
6 | name
7 | }
8 | }
9 | |}
10 | ];
11 |
12 | module GetWalletsQuery = ReasonApollo.CreateQuery(GetWallets);
13 |
14 | [@react.component]
15 | let make = () => {
16 |
17 | ...{({result}) =>
18 | switch (result) {
19 | | Loading => {ReasonReact.string("Loading")}
20 | | Error(error) => {ReasonReact.string(error##message)}
21 | | Data(response) =>
22 | Js.log2("Wallets", response);
23 | {ReasonReact.string("Success")}
;
24 | }
25 | }
26 | ;
27 | };
28 |
--------------------------------------------------------------------------------
/examples/pr/196/client/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
3 | const outputDir = path.join(__dirname, 'build/');
4 |
5 | const isProd = process.env.NODE_ENV === 'production';
6 |
7 | module.exports = {
8 | entry: './src/Index.bs.js',
9 | mode: isProd ? 'production' : 'development',
10 | output: {
11 | path: outputDir,
12 | filename: 'Index.js'
13 | },
14 | plugins: [
15 | new HtmlWebpackPlugin({
16 | template: 'src/index.html',
17 | inject: false
18 | })
19 | ],
20 | devServer: {
21 | compress: true,
22 | contentBase: outputDir,
23 | port: process.env.PORT || 8000,
24 | historyApiFallback: true
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/examples/swapi/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": { "react-jsx": 3 },
8 | "sources": ["src"],
9 | "package-specs": [
10 | {
11 | "module": "commonjs",
12 | "in-source": true
13 | }
14 | ],
15 | "suffix": ".bs.js",
16 | "namespace": true,
17 | "bs-dependencies": ["reason-react", "reason-apollo"],
18 | "bsc-flags": [
19 | "-bs-super-errors"
20 | ],
21 | "refmt": 3,
22 | "ppx-flags": ["@baransu/graphql_ppx_re/ppx6"]
23 | }
24 |
--------------------------------------------------------------------------------
/examples/pr/196/client/src/Settings.re:
--------------------------------------------------------------------------------
1 | module GetSettings = [%graphql
2 | {|
3 | query getSettings {
4 | settings {
5 | id
6 | version
7 | wallets {
8 | id
9 | name
10 | }
11 | }
12 | }
13 | |}
14 | ];
15 |
16 | module GetSettingsQuery = ReasonApollo.CreateQuery(GetSettings);
17 |
18 | [@react.component]
19 | let make = () => {
20 |
21 | ...{({result}) =>
22 | switch (result) {
23 | | Loading => {ReasonReact.string("Loading")}
24 | | Error(error) => {ReasonReact.string(error##message)}
25 | | Data(response) =>
26 | Js.log(response);
27 | {ReasonReact.string("Success")}
;
28 | }
29 | }
30 | ;
31 | };
32 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reason-workshop-chat-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "bs-css": "^7.2.0",
7 | "react": "^16.5.2",
8 | "react-dom": "^16.5.2",
9 | "reason-apollo": "../../",
10 | "reason-scripts": "0.9.0"
11 | },
12 | "scripts": {
13 | "start": "bsb -make-world -w",
14 | "webpack": "webpack-dev-server",
15 | "get-schema": "yarn send-introspection-query https://boiling-bastion-96890.herokuapp.com/graphql"
16 | },
17 | "devDependencies": {
18 | "@glennsl/bs-jest": "^0.4.4",
19 | "bs-platform": "^4.0.6",
20 | "graphql_ppx": "^0.2.7",
21 | "reason-react": "^0.5.3",
22 | "webpack": "^4.20.2",
23 | "webpack-cli": "^3.1.2",
24 | "webpack-dev-server": "^3.1.9"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/examples/swapi/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reason-apollo-test",
3 | "version": "0.1.0",
4 | "scripts": {
5 | "build": "bsb -make-world",
6 | "start": "bsb -make-world -w",
7 | "clean": "bsb -clean-world",
8 | "webpack": "webpack-dev-server",
9 | "format": "refmt",
10 | "get-schema": "yarn send-introspection-query https://api.graph.cool/simple/v1/cjdgba1jw4ggk0185ig4bhpsn"
11 | },
12 | "keywords": [
13 | "BuckleScript"
14 | ],
15 | "author": "",
16 | "license": "MIT",
17 | "dependencies": {
18 | "apollo-utilities": "^1.0.16",
19 | "react": "^16.8.6",
20 | "react-dom": "^16.8.6",
21 | "reason-apollo": "../../",
22 | "reason-react": "^0.7.0"
23 | },
24 | "devDependencies": {
25 | "@baransu/graphql_ppx_re": "^0.7.1",
26 | "bs-platform": "^7.2.2",
27 | "webpack": "^4.6.0",
28 | "webpack-cli": "^3.1.2",
29 | "webpack-dev-server": "^3.1.3"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/examples/pr/196/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-react-app",
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 | "server": "webpack-dev-server"
12 | },
13 | "keywords": [
14 | "BuckleScript"
15 | ],
16 | "author": "",
17 | "license": "MIT",
18 | "dependencies": {
19 | "react": "^16.8.1",
20 | "react-dom": "^16.8.1",
21 | "reason-apollo": "^0.16.1",
22 | "reason-react": ">=0.7.0"
23 | },
24 | "devDependencies": {
25 | "bs-platform": "^7.0.1",
26 | "graphql_ppx": "^0.2.8",
27 | "html-webpack-plugin": "^3.2.0",
28 | "webpack": "^4.0.1",
29 | "webpack-cli": "^3.1.1",
30 | "webpack-dev-server": "^3.1.8"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/NewMessageNotification.re:
--------------------------------------------------------------------------------
1 | module NewNotification = [%graphql {|
2 | subscription messageAdded {
3 | messageAdded {
4 | id
5 | text
6 | author {
7 | id
8 | name
9 | }
10 | }
11 | }
12 | |}];
13 |
14 | module NewNotificationSub = ReasonApollo.CreateSubscription(NewNotification);
15 |
16 |
17 | let component = ReasonReact.statelessComponent("NewMessageNotification");
18 |
19 | let make = _children => {
20 | ...component,
21 | render: _self =>
22 |
23 | ...{
24 | ({result}) => {
25 | switch result {
26 | | Loading =>
27 | | Error(_error) =>
28 | | Data(_response) =>
29 |
30 |
33 | }
34 | }
35 | }
36 |
37 | };
38 |
--------------------------------------------------------------------------------
/examples/swapi/src/SubscribeToPersons.re:
--------------------------------------------------------------------------------
1 | module Persons = [%graphql
2 | {|
3 |
4 | subscription {
5 | person: Person {
6 | node {
7 | name
8 | }
9 | }
10 | }
11 | |}
12 | ];
13 |
14 | module PersonsSubscription = ReasonApollo.CreateSubscription(Persons);
15 |
16 | [@react.component]
17 | let make = () => {
18 |
19 |
{"Person Subscription" |> React.string}
20 |
21 | ...{({result}) =>
22 | switch (result) {
23 | | Error(_e) =>
24 | Js.log(_e);
25 | "Something went wrong" |> React.string;
26 | | Loading => "Loading" |> React.string
27 | | Data(response) =>
28 | switch (response##person) {
29 | | Some(person) =>
30 | switch (person##node) {
31 | | Some(node) => node##name |> React.string
32 | | None => "No node found" |> React.string
33 | }
34 | | None => "Persons not found" |> React.string
35 | }
36 | }
37 | }
38 |
39 |
23 | ...{({result}) =>
24 |
25 | {switch (result) {
26 | | Error(e) =>
27 | Js.log(e);
28 | "Something Went Wrong" |> ste;
29 | | Loading => "Loading" |> ste
30 | | Data(response) =>
31 | switch (response##person) {
32 | | None => "No Person Data" |> ste
33 | | Some(person) =>
{person##name |> ste}
34 | }
35 | }}
36 |
;
39 | };
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 Meteor Development Group, Inc
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/examples/swapi/src/AddPerson.re:
--------------------------------------------------------------------------------
1 | let ste = React.string;
2 |
3 | module AddPerson = [%graphql
4 | {|
5 |
6 | mutation addPerson($age: Int!, $name: String!) {
7 | createPerson(age: $age, name: $name) {
8 | name
9 | }
10 | }
11 | |}
12 | ];
13 |
14 | module AddPersonMutation = ReasonApollo.CreateMutation(AddPerson);
15 |
16 | [@react.component]
17 | let make = () => {
18 | let addPersonMutation = AddPerson.make(~name="Bob", ~age=24, ());
19 |
20 | ...{(mutation, {result}) =>
21 |
22 |
24 | mutation(
25 | ~variables=addPersonMutation##variables,
26 | ~refetchQueries=[|"getAllPersons"|],
27 | (),
28 | )
29 | |> ignore
30 | }>
31 | {"Add a person" |> ste}
32 |
33 |
34 | {switch (result) {
35 | | NotCalled => "" |> ste
36 | | Data(_) => "Person has been added" |> ste
37 | | Error(_) => "ERROR" |> ste
38 | | Loading => "Loading" |> ste
39 | }}
40 |
41 |
42 | }
43 | ;
44 | };
45 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/README.md:
--------------------------------------------------------------------------------
1 | ## Reason DOJO
2 |
3 | ### Real time chat application with Reason and GraphQL
4 |
5 | This example shows Reason Apollo usage with Queries, Mutations and Subscriptions
6 |
7 | ### Config
8 |
9 | - Your GraphQL endpoint: https://boiling-bastion-96890.herokuapp.com/graphql
10 | - The documentation of the GraphQL endpoint (Note! We didn't wrote any documentation, just a normal GraphQL API):
11 | https://graphqlbin.com/v2/WLPqS6 (We recommend using Chrome)
12 | - Paper, pen, redbull,...
13 |
14 |
15 | ### SETUP
16 |
17 | #### GraphQL Playground
18 | Open the GraphQL playground in your browser https://graphqlbin.com/v2/WLPqS6 (Safari doesn't work)
19 | Add a user, grab it's id, put the id into AddMessage.re to make mutations.
20 | (Don't assume endpoint has existing valid user id hardcoded in src)
21 | `
22 | mutation {
23 | addUser(name:"MyUser") {
24 | id
25 | name
26 | }
27 | }
28 | `
29 |
30 | #### Run the app
31 | `yarn`
32 | `yarn start`
33 | `yarn webpack`
34 |
35 | (note: the send text field seems to be unused and hard coded to send "HI")
36 |
37 | #### Setup GraphQL PPX
38 | Run the introspection query, so the ppx can typecheck based on the graphql_schema :
39 | https://github.com/apollographql/reason-apollo#send-introspection-query
40 |
41 |
42 |
--------------------------------------------------------------------------------
/examples/swapi/src/GetPerson.re:
--------------------------------------------------------------------------------
1 | let ste = React.string;
2 |
3 | /* alias Person as person because compiler doesn't like uppercase key names */
4 | module GetPerson = [%graphql
5 | {|
6 | query getPerson ($id:ID!){
7 | person:
8 | Person(id:$id) {
9 | id
10 | age
11 | name
12 | }
13 | }
14 | |}
15 | ];
16 |
17 | module GetPersonQuery = ReasonApollo.CreateQuery(GetPerson);
18 |
19 | [@react.component]
20 | let make = () => {
21 | /* pick a valid id from list returned from GetPersons query here
22 | "https://api.graph.cool/simple/v1/cjdgba1jw4ggk0185ig4bhpsn" and pass it to ~id variable
23 | */
24 | let getPersonQuery = GetPerson.make(~id="cjdgbi6d136a90157kpqef72m", ());
25 |
26 | ...{({result}) =>
27 |
28 |
{"Get Person: " |> ste}
29 | {switch (result) {
30 | | Error(e) =>
31 | Js.log(e);
32 | "Something Went Wrong" |> ste;
33 | | Loading => "Loading" |> ste
34 | | Data(response) =>
35 | switch (response##person) {
36 | | None => "No Person Data" |> ste
37 | | Some(person) =>
{person##name |> ste}
38 | }
39 | }}
40 |
;
43 | };
44 |
--------------------------------------------------------------------------------
/src/graphql-types/ReasonApolloSubscription.rei:
--------------------------------------------------------------------------------
1 | open! ReasonApolloTypes;
2 |
3 | module Make:
4 | (Config: ReasonApolloTypes.Config) =>
5 | {
6 | [@bs.module "graphql-tag"] external gql: ReasonApolloTypes.gql = "default";
7 |
8 | let graphQLSubscriptionAST: queryString;
9 |
10 | type response = subscriptionResponse(Config.t);
11 |
12 | type renderPropObj = {
13 | result: response,
14 | data: option(Config.t),
15 | error: option(apolloError),
16 | loading: bool,
17 | };
18 |
19 | type renderPropObjJS = {
20 | loading: bool,
21 | data: Js.Nullable.t(Js.Json.t),
22 | error: Js.Nullable.t(apolloError),
23 | };
24 |
25 | let apolloDataToVariant: renderPropObjJS => response;
26 |
27 | let convertJsInputToReason: renderPropObjJS => renderPropObj;
28 |
29 | module JsSubscription: {
30 | [@bs.module "react-apollo"] [@react.component]
31 | external make:
32 | (
33 | ~subscription: ReasonApolloTypes.queryString,
34 | ~variables: option(Js.Json.t),
35 | ~children: renderPropObjJS => ReasonReact.reactElement
36 | ) =>
37 | ReasonReact.reactElement =
38 | "Subscription";
39 | };
40 |
41 | [@react.component]
42 | let make:
43 | (~variables: Js.Json.t=?, ~children: renderPropObj => React.element) =>
44 | React.element;
45 | };
46 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/AddMessage.re:
--------------------------------------------------------------------------------
1 | module Styles = {
2 | open Css;
3 | let container = style([
4 |
5 | ]);
6 |
7 | let input = style([
8 | width(px(300)),
9 | height(px(22)),
10 | marginLeft(px(32)),
11 | ]);
12 |
13 | let submitBtn = style([
14 | height(px(28)),
15 | ]);
16 | };
17 |
18 | module AddMessage = [%graphql {|
19 | mutation addMessage {
20 | addMessage(userId: "e4315d20-fa78-11e8-877a-8f1cf822dad6", text: "HI") {
21 | id
22 | }
23 | }
24 | |}];
25 |
26 | module AddMessageMutation = ReasonApollo.CreateMutation(AddMessage);
27 |
28 | type state = {
29 | text: string
30 | };
31 |
32 | type action =
33 | | Change(string);
34 |
35 | let component = ReasonReact.reducerComponent("AddMessage");
36 |
37 | let make = _children => {
38 | ...component,
39 | initialState: () => { text: "" },
40 | reducer: (action, _state) => switch action {
41 | | Change(str) => ReasonReact.Update({text: str})
42 | },
43 | render: ({state: {text}, send}) =>
44 |
45 | ...{
46 | (mutation, _result) => {
47 |
48 | mutation() |> ignore}
56 | >
57 | ("SEND" |> ReasonReact.string)
58 |
59 |
60 | }
61 | }
62 | ,
63 | };
64 |
--------------------------------------------------------------------------------
/examples/pr/196/server/index.js:
--------------------------------------------------------------------------------
1 | const { ApolloServer, gql } = require('apollo-server');
2 |
3 | // This is a (sample) collection of books we'll be able to query
4 | // the GraphQL server for. A more complete example might fetch
5 | // from an existing data source like a REST API or database.
6 |
7 | const wallets = [{
8 | id: "1",
9 | name: "What"
10 | }, {
11 | id: "2",
12 | name: "Ever"
13 | }]
14 |
15 | const settings = {
16 | id: "1",
17 | version: "v1",
18 | wallets: wallets
19 | }
20 |
21 | // Type definitions define the "shape" of your data and specify
22 | // which ways the data can be fetched from the GraphQL server.
23 | const typeDefs = gql`
24 | type Wallet {
25 | id: ID!
26 | name: String!
27 | }
28 |
29 | type Settings {
30 | id: ID!
31 | version: String!
32 | wallets: [Wallet!]!
33 | }
34 |
35 | type Query {
36 | wallets: [Wallet!]!
37 | settings: Settings!
38 | }
39 | `;
40 |
41 | // Resolvers define the technique for fetching the types in the
42 | // schema. We'll retrieve books from the "books" array above.
43 | const resolvers = {
44 | Query: {
45 | wallets: () => wallets,
46 | settings: () => settings
47 | },
48 | };
49 |
50 | // In the most basic sense, the ApolloServer can be started
51 | // by passing type definitions (typeDefs) and the resolvers
52 | // responsible for fetching the data for those types.
53 | const server = new ApolloServer({ typeDefs, resolvers });
54 |
55 | // This `listen` method launches a web-server. Existing apps
56 | // can utilize middleware options, which we'll discuss later.
57 | server.listen().then(({ url }) => {
58 | console.log(`🚀 Server ready at ${url}`);
59 | });
60 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reason-apollo",
3 | "version": "0.20.0",
4 | "license": "MIT",
5 | "sideEffects": "false",
6 | "description": "Using Apollo client 2 with Reason",
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/apollographql/reason-apollo"
10 | },
11 | "peerDependencies": {},
12 | "keywords": [
13 | "Reason",
14 | "Apollo",
15 | "React",
16 | "GraphQL"
17 | ],
18 | "author": "Grégoire Van der Auwermeulen ",
19 | "devDependencies": {
20 | "@baransu/graphql_ppx_re": "^0.7.1",
21 | "bs-platform": "^7.2.2",
22 | "husky": "^1.2.0",
23 | "lint-staged": "^8.1.0",
24 | "reason-react": "^0.7.0"
25 | },
26 | "dependencies": {
27 | "apollo-cache-inmemory": "^1.6.0",
28 | "apollo-client": "^2.6.3",
29 | "apollo-link": "^1.2.12",
30 | "apollo-link-context": "^1.0.18",
31 | "apollo-link-error": "^1.1.11",
32 | "apollo-link-http": "^1.5.15",
33 | "apollo-link-ws": "^1.0.18",
34 | "apollo-upload-client": "9.1.0",
35 | "apollo-utilities": "^1.3.2",
36 | "graphql": "^14.0.2",
37 | "graphql-tag": "^2.10.0",
38 | "react-apollo": "^2.5.8",
39 | "subscriptions-transport-ws": "^0.9.16"
40 | },
41 | "lint-staged": {
42 | "*.re": [
43 | "bsrefmt --in-place",
44 | "git add"
45 | ]
46 | },
47 | "husky": {
48 | "hooks": {
49 | "pre-commit": "lint-staged"
50 | }
51 | },
52 | "scripts": {
53 | "build": "bsb -make-world",
54 | "start": "bsb -make-world -w",
55 | "clean": "bsb -clean-world",
56 | "lint-staged": "lint-staged",
57 | "test": "echo \"Error: no test specified\" && exit 1"
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/examples/swapi/src/Persons.re:
--------------------------------------------------------------------------------
1 | let ste = React.string;
2 |
3 | module GetAllPersons = [%graphql
4 | {|
5 | query getAllPersons {
6 | allPersons {
7 | id
8 | age
9 | name
10 | }
11 | }
12 | |}
13 | ];
14 |
15 | module GetAllPersonsQuery = ReasonApollo.CreateQuery(GetAllPersons);
16 |
17 | [@react.component]
18 | let make = () =>
19 |
20 | ...{({result, fetchMore}) =>
21 |
22 |
{"Persons: " |> ste}
23 | {switch (result) {
24 | | Error(e) =>
25 | Js.log(e);
26 | "Something Went Wrong" |> ste;
27 | | Loading => "Loading" |> ste
28 | | Data(response) =>
29 |
30 | {response##allPersons
31 | |> Array.mapi((index, person) =>
32 |
string_of_int}>
33 | {person##name |> ste}
34 |
35 |
{"ID: " ++ person##id |> ste}
36 |
37 | )
38 | |> React.array}
39 |
41 | fetchMore(
42 | ~updateQuery=
43 | (prev, _next) =>
44 | /* Update Apollo Store with [@bs.raw {||}] for now, since the type comming in is a generic Js.Json.t for now*/
45 | prev,
46 | (),
47 | )
48 | |> ignore
49 | }>
50 | {"fetchMore" |> ste}
51 |
52 |
53 | }}
54 |
;
57 |
--------------------------------------------------------------------------------
/src/ReasonApollo.re:
--------------------------------------------------------------------------------
1 | open ApolloClient;
2 |
3 | /*
4 | * Expose a createApolloClient function that has to be passed to the ApolloProvider
5 | */
6 | let createApolloClient =
7 | (
8 | ~link,
9 | ~cache,
10 | ~ssrMode=?,
11 | ~ssrForceFetchDelay=?,
12 | ~connectToDevTools=?,
13 | ~queryDeduplication=?,
14 | (),
15 | ) =>
16 | createApolloClientJS({
17 | link,
18 | cache,
19 | ssrMode,
20 | ssrForceFetchDelay,
21 | connectToDevTools,
22 | queryDeduplication,
23 | });
24 | // let createApolloClient =
25 | // (
26 | // ~link,
27 | // ~cache,
28 | // ~ssrMode=?,
29 | // ~ssrForceFetchDelay=?,
30 | // ~connectToDevTools=?,
31 | // ~queryDeduplication=?,
32 | // (),
33 | // ) => {
34 | // createApolloClientJS(
35 | // apolloClientObjectParam(
36 | // ~link,
37 | // ~cache,
38 | // ~ssrMode?,
39 | // ~ssrForceFetchDelay?,
40 | // ~connectToDevTools?,
41 | // ~queryDeduplication?,
42 | // ),
43 | // );
44 | // };
45 |
46 | /*
47 | * Expose a module to perform "query" operations for the given client
48 | */
49 | module CreateQuery = (Config: ReasonApolloTypes.Config) =>
50 | ReasonApolloQuery.Make(Config);
51 |
52 | /*
53 | * Expose a module to perform "mutation" operations for the given client
54 | */
55 | module CreateMutation = (Config: ReasonApolloTypes.Config) =>
56 | ReasonApolloMutation.Make(Config);
57 | /*
58 | * Expose a module to perform "subscription" operations for the given client
59 | */
60 | module CreateSubscription = (Config: ReasonApolloTypes.Config) =>
61 | ReasonApolloSubscription.Make(Config);
62 |
63 | module Provider = ApolloProvider;
64 |
65 | module Consumer = ApolloConsumer;
66 |
--------------------------------------------------------------------------------
/examples/swapi/src/Client.re:
--------------------------------------------------------------------------------
1 | /* open ApolloLinks; */
2 | open ApolloInMemoryCache;
3 |
4 | /* Create an InMemoryCache */
5 | let inMemoryCache = createInMemoryCache();
6 |
7 | /*
8 | OR with dataIdFromObject:
9 |
10 | type dataObject = {
11 | .
12 | "__typename": string,
13 | "id": string
14 | };
15 |
16 | createInMemoryCache(~dataIdFromObject=(obj: dataObject) => obj##id, ());
17 | */
18 |
19 | /* Create a Link that puts an Authorization header in context */
20 | let headerContextLink =
21 | ApolloLinks.createContextLink(() =>
22 | {
23 | "headers": {
24 | "authorization": "Bearer $123",
25 | },
26 | }
27 | );
28 |
29 | /* Create an HTTP Link */
30 | let httpLink =
31 | ApolloLinks.createHttpLink(
32 | ~uri="https://api.graph.cool/simple/v1/cjdgba1jw4ggk0185ig4bhpsn",
33 | (),
34 | );
35 | let webSocketLinkT: ReasonApolloTypes.webSocketLinkT = {
36 | uri: "wss://subscriptions.graph.cool/v1/cjdgba1jw4ggk0185ig4bhpsn",
37 | options: {
38 | reconnect: true,
39 | connectionParams: None,
40 | },
41 | };
42 | /* WebSocket client */
43 | let webSocketLink = ApolloLinks.webSocketLink(webSocketLinkT);
44 |
45 | /* based on test, execute left or right */
46 | let webSocketHttpLink =
47 | ApolloLinks.split(
48 | operation => {
49 | let operationDefinition =
50 | ApolloUtilities.getMainDefinition(operation.query);
51 | Js.log(operationDefinition);
52 | operationDefinition.kind == "OperationDefinition"
53 | && operationDefinition.operation == "subscription";
54 | },
55 | webSocketLink,
56 | httpLink,
57 | );
58 |
59 | let instance =
60 | ReasonApollo.createApolloClient(
61 | ~link=ApolloLinks.from([|headerContextLink, webSocketHttpLink|]),
62 | ~cache=inMemoryCache,
63 | (),
64 | );
65 |
--------------------------------------------------------------------------------
/src/ApolloInMemoryCache.re:
--------------------------------------------------------------------------------
1 | open ReasonApolloTypes;
2 |
3 | /**
4 | * Used on the client to rehydrate the cache using the initial data passed from the server
5 | * - e.g. window.__APOLLO_STATE__
6 | */
7 | type restoreData;
8 |
9 | /**
10 | * Define the data to pass to the restore method that'll be used used to rehydrate client.
11 | * If you don't want to pass any data, simply return `Js_null_undefined.undefined`.
12 | */
13 | type inMemoryCacheRestoreData = Js.Nullable.t(restoreData);
14 |
15 | /**
16 | * CreateInMemoryCache
17 | * https://github.com/apollographql/apollo-client/tree/master/packages/apollo-cache-inmemory
18 | */
19 | /* Bind the InMemoryCache class */
20 | [@bs.module "apollo-cache-inmemory"]
21 | [@bs.new]
22 | external apolloInMemoryCache : 'a => apolloCache = "InMemoryCache";
23 |
24 | /* Bind the restore method */
25 | [@bs.send.pipe : 't]
26 | external restore : inMemoryCacheRestoreData => apolloCache = "restore";
27 |
28 | /* Fragment matcher */
29 | type fragmentMatcher;
30 |
31 | [@bs.module "apollo-cache-inmemory"] [@bs.new]
32 | external introspectionFragmentMatcher : Js.t({..}) => fragmentMatcher =
33 | "IntrospectionFragmentMatcher";
34 |
35 | let createIntrospectionFragmentMatcher = (~data) =>
36 | introspectionFragmentMatcher({"introspectionQueryResultData": data});
37 |
38 | /* Instantiate a new cache object */
39 | [@bs.obj] external
40 | makeApolloInMemoryCacheParams :
41 | (
42 | ~dataIdFromObject: (Js.t({..}) => string)=?,
43 | ~fragmentMatcher: fragmentMatcher=?
44 | ) => _ = "";
45 |
46 | let createInMemoryCache = (~dataIdFromObject=?, ~fragmentMatcher=?, ()) => {
47 | /* Apollo Client, looks for key in Object. Doesn't check if value is null */
48 | apolloInMemoryCache(
49 | makeApolloInMemoryCacheParams(~dataIdFromObject?, ~fragmentMatcher?)
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/examples/swapi/src/DeletePerson.re:
--------------------------------------------------------------------------------
1 | let ste = React.string;
2 |
3 | module DeletePerson = [%graphql
4 | {|
5 | mutation deletePerson($id: ID!) {
6 | deletePerson(id: $id) {
7 | id
8 | }
9 | }
10 | |}
11 | ];
12 |
13 | module DeletePersonMutation = ReasonApollo.CreateMutation(DeletePerson);
14 |
15 | [@react.component]
16 | let make = () => {
17 | /* pick a valid id from list returned from GetPersons query here
18 | "https://api.graph.cool/simple/v1/cjdgba1jw4ggk0185ig4bhpsn" and pass it to ~id variable
19 | */
20 | let deletePersonMutation =
21 | DeletePerson.make(~id="cjhhv0i51k5lf0160xszwdaps", ());
22 |
23 | ...{(mutation, {result}) =>
24 |
25 |
{"Delete a Person By Id" |> ste}
26 |
27 | {"Pick and Id from above and put it in DeletePerson.re" |> ste}
28 |
29 |
{
31 | mutation(
32 | ~variables=deletePersonMutation##variables,
33 | ~refetchQueries=[|"getAllPersons"|],
34 | (),
35 | )
36 | |> ignore;
37 | Js.log("SEND");
38 | }}>
39 | {"Delete a person" |> ste}
40 |
41 |
42 | {switch (result) {
43 | | NotCalled =>
44 | Js.log("Not called");
45 | "" |> ste;
46 | | Data(d) =>
47 | Js.log2("data", d);
48 | "Person has been deleted" |> ste;
49 | | Error(e) =>
50 | Js.log2("error", e);
51 | "ERROR" |> ste;
52 | | Loading =>
53 | Js.log("Loading");
54 | "Loading" |> ste;
55 | }}
56 |
57 |
;
60 | };
61 |
--------------------------------------------------------------------------------
/examples/swapi/src/DeletePersonButton.re:
--------------------------------------------------------------------------------
1 | let ste = ReasonReact.string;
2 |
3 | module DeletePerson = [%graphql
4 | {|
5 | mutation deletePerson($id: ID!) {
6 | deletePerson(id: $id) {
7 | id
8 | }
9 | }
10 | |}
11 | ];
12 |
13 | module DeletePersonMutation = ReasonApollo.CreateMutation(DeletePerson);
14 |
15 | [@react.component]
16 | let make = (~id) => {
17 | let deletePersonMutation = DeletePerson.make(~id, ());
18 |
19 | ...(
20 | (mutation, {result}) =>
21 |
22 |
25 | mutation(
26 | ~variables=deletePersonMutation##variables,
27 | ~refetchQueries=[|"getAllPersons"|],
28 | (),
29 | )
30 | |> ignore
31 | )>
32 | ("Delete ID" |> ste)
33 |
34 |
35 | (
36 | switch (result) {
37 | | NotCalled =>
38 | Js.log("Not called");
39 | "" |> ste;
40 | | Data(d) =>
41 | Js.log2("data", d);
42 | let person = d##deletePerson;
43 | Js.log2("deleted person", person);
44 | "Person with this ID has been deleted" |> ste;
45 | | Error(e) =>
46 | Js.log2("error", e);
47 | "ERROR" |> ste;
48 | | Loading =>
49 | Js.log("Loading");
50 | "Loading" |> ste;
51 | }
52 | )
53 |
54 |
55 | )
56 | ;
57 | };
58 |
--------------------------------------------------------------------------------
/examples/pr/196/client/README.md:
--------------------------------------------------------------------------------
1 | # my-react-app
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 `build/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 | ## Run Project with Server
17 |
18 | To run with the webpack development server run `npm run server` and view in the browser at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh.
19 |
20 | Note that any hot reload on a route will fall back to the root (`/`), so `ReasonReact.Router.dangerouslyGetInitialUrl` will likely be needed alongside the `ReasonReact.Router.watchUrl` logic to handle routing correctly on hot reload refreshes or simply opening the app at a URL that is not the root.
21 |
22 | To use a port other than 8000 set the `PORT` environment variable (`PORT=8080 npm run server`).
23 |
24 | ## Build for Production
25 |
26 | ```sh
27 | npm run clean
28 | npm run build
29 | npm run webpack:production
30 | ```
31 |
32 | This will replace the development artifact `build/Index.js` for an optimized version as well as copy `src/index.html` into `build/`. You can then deploy the contents of the `build` directory (`index.html` and `Index.js`).
33 |
34 | If you make use of routing (via `ReasonReact.Router` or similar logic) ensure that server-side routing handles your routes or that 404's are directed back to `index.html` (which is how the dev server is set up).
35 |
36 | **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.
37 |
--------------------------------------------------------------------------------
/examples/swapi/src/PersonSubscribeToMore.re:
--------------------------------------------------------------------------------
1 | [@bs.module "graphql-tag"] external gql: ReasonApolloTypes.gql = "default";
2 |
3 | let ste = React.string;
4 |
5 | module GetAllPersons = [%graphql
6 | {|
7 | query getAllPersons {
8 | allPersons {
9 | id
10 | age
11 | name
12 | }
13 | }
14 | |}
15 | ];
16 |
17 | module GetAllPersonsQuery = ReasonApollo.CreateQuery(GetAllPersons);
18 |
19 | module NewPerson = [%graphql
20 | {|
21 |
22 | subscription {
23 | person: Person {
24 | node {
25 | name
26 | }
27 | }
28 | }
29 | |}
30 | ];
31 |
32 | let newPerson = NewPerson.make();
33 | let newPersonAST = gql(. newPerson##query);
34 |
35 | [@react.component]
36 | let make = () => {
37 |
38 | ...{({result, subscribeToMore}) =>
39 |
40 |
{"Persons: " |> ste}
41 | {switch (result) {
42 | | Error(_e) => "Something Went Wrong" |> ste
43 | | Loading => "Loading" |> ste
44 | | Data(response) =>
45 | {
48 | let _unsub =
49 | subscribeToMore(
50 | ~document=newPersonAST,
51 | ~updateQuery=[%bs.raw
52 | {|
53 | function(prev, next) {
54 | if(!next.subscriptionData.data || !next.subscriptionData.data.person)
55 | return prev;
56 | return Object.assign({}, prev, {
57 | messages: prev.allPersons.concat(next.subscriptionData.data.person)
58 | });
59 | }
60 | |}
61 | ],
62 | (),
63 | );
64 | ();
65 | }}
66 | />
67 | }}
68 |
69 | }
70 | ;
71 | };
72 |
--------------------------------------------------------------------------------
/src/graphql-types/ReasonApolloSubscription.re:
--------------------------------------------------------------------------------
1 | open! ReasonApolloTypes;
2 |
3 | module Make = (Config: ReasonApolloTypes.Config) => {
4 | [@bs.module "graphql-tag"] external gql: ReasonApolloTypes.gql = "default";
5 |
6 | let graphQLSubscriptionAST = gql(. Config.query);
7 |
8 | type response = subscriptionResponse(Config.t);
9 |
10 | type renderPropObj = {
11 | result: response,
12 | data: option(Config.t),
13 | error: option(apolloError),
14 | loading: bool,
15 | };
16 |
17 | type renderPropObjJS = {
18 | loading: bool,
19 | data: Js.Nullable.t(Js.Json.t),
20 | error: Js.Nullable.t(apolloError),
21 | };
22 |
23 | let apolloDataToVariant = apolloData =>
24 | switch (
25 | apolloData.loading,
26 | apolloData.data |> ReasonApolloUtils.getNonEmptyObj,
27 | apolloData.error |> Js.Nullable.toOption,
28 | ) {
29 | | (true, _, _) => Loading
30 | | (false, Some(response), _) => Data(Config.parse(response))
31 | | (false, _, Some(error)) => Error(error)
32 | | (false, None, None) =>
33 | Error({
34 | message: "No data",
35 | graphQLErrors: Js.Nullable.null,
36 | networkError: Js.Nullable.null,
37 | })
38 | };
39 |
40 | let convertJsInputToReason = apolloData => {
41 | result: apolloData |> apolloDataToVariant,
42 | data:
43 | switch (apolloData.data |> ReasonApolloUtils.getNonEmptyObj) {
44 | | None => None
45 | | Some(data) =>
46 | switch (Config.parse(data)) {
47 | | parsedData => Some(parsedData)
48 | | exception _ => None
49 | }
50 | },
51 | error:
52 | switch (apolloData.error |> Js.Nullable.toOption) {
53 | | Some(error) => Some(error)
54 | | None => None
55 | },
56 | loading: apolloData.loading,
57 | };
58 |
59 | module JsSubscription = {
60 | [@bs.module "react-apollo"] [@react.component]
61 | external make:
62 | (
63 | ~subscription: ReasonApolloTypes.queryString,
64 | ~variables: option(Js.Json.t),
65 | ~children: renderPropObjJS => ReasonReact.reactElement
66 | ) =>
67 | ReasonReact.reactElement =
68 | "Subscription";
69 | };
70 |
71 | [@react.component]
72 | let make = (~variables=?, ~children) =>
73 |
74 | {apolloData => apolloData |> convertJsInputToReason |> children}
75 | ;
76 | };
77 |
--------------------------------------------------------------------------------
/examples/realtime-chat-application/src/MessagesContainer.re:
--------------------------------------------------------------------------------
1 | [@bs.module "graphql-tag"] external gql: ReasonApolloTypes.gql = "default";
2 |
3 | module Styles = {
4 | open Css;
5 | let container = style([
6 | margin(px(20)),
7 | padding(px(5)),
8 | boxShadow(~x=px(2), ~y=px(2), grey)
9 | ]);
10 | };
11 |
12 | module GetAllMessages = [%graphql {|
13 | {
14 | messages {
15 | id
16 | text
17 | author {
18 | id
19 | name
20 | }
21 | }
22 | }
23 | |}];
24 |
25 | module GetAllMessagesQuery = ReasonApollo.CreateQuery(GetAllMessages);
26 |
27 |
28 | module MessageAdded = [%graphql {|
29 | subscription messageAdded {
30 | messageAdded {
31 | id
32 | text
33 | author {
34 | id
35 | name
36 | }
37 | }
38 | }
39 | |}];
40 |
41 | let messageAdded = MessageAdded.make();
42 | let messageAddedASTQuery = gql(. messageAdded##query);
43 |
44 | let component = ReasonReact.statelessComponent("Messages");
45 |
46 | let make = _children => {
47 | ...component,
48 | render: _self =>
49 |
50 | ...{
51 | ({result, subscribeToMore}) => switch result {
52 | | Loading => {"Loading" |> ReasonReact.string}
53 | | Error(_e) => {"Error" |> ReasonReact.string}
54 | | Data(response) =>
55 | {
58 | let _unsub = subscribeToMore(
59 | ~document=messageAddedASTQuery,
60 | ~updateQuery={(prev, next) => {
61 | let addNewMessageJS = [%bs.raw {|
62 | function(prev, next) {
63 | if(!next.subscriptionData.data || !next.subscriptionData.data.messageAdded)
64 | return prev;
65 | return Object.assign({}, prev, {
66 | messages: prev.messages.concat(next.subscriptionData.data.messageAdded)
67 | });
68 | }
69 | |}];
70 | addNewMessageJS(prev, next);
71 | }},
72 | ()
73 | )
74 | }
75 | }
76 | messages=(response##messages)
77 | />
78 | }
79 | }
80 |
81 |
129 | {(mutation, apolloData) =>
130 | children(
131 | apolloMutationFactory(~jsMutation=mutation),
132 | apolloData |> convertJsInputToReason,
133 | )}
134 | ;
135 | };
136 |
--------------------------------------------------------------------------------
/src/graphql-types/ReasonApolloQuery.re:
--------------------------------------------------------------------------------
1 | open! ReasonApolloTypes;
2 |
3 | type updateQueryOptions = {
4 | fetchMoreResult: option(Js.Json.t),
5 | variables: option(Js.Json.t),
6 | };
7 |
8 | type onErrorT;
9 | type updateQueryT = (Js.Json.t, updateQueryOptions) => Js.Json.t;
10 | type updateSubscriptionOptions = {
11 | subscriptionData: option(Js.Json.t),
12 | variables: option(Js.Json.t),
13 | };
14 | type updateQuerySubscriptionT =
15 | (Js.Json.t, updateSubscriptionOptions) => Js.Json.t;
16 |
17 | type subscribeToMoreOptions = {
18 | document: queryString,
19 | variables: option(Js.Json.t),
20 | updateQuery: option(updateQuerySubscriptionT),
21 | onError: option(onErrorT),
22 | };
23 |
24 | type fetchMoreOptions = {
25 | variables: option(Js.Json.t),
26 | updateQuery: updateQueryT,
27 | };
28 |
29 | type renderPropObjJS = {
30 | loading: bool,
31 | data: Js.Nullable.t(Js.Json.t),
32 | error: Js.Nullable.t(apolloError),
33 | refetch: Js.Nullable.t(Js.Json.t) => Js.Promise.t(renderPropObjJS),
34 | networkStatus: Js.Nullable.t(int),
35 | variables: Js.Nullable.t(Js.Json.t),
36 | fetchMore: fetchMoreOptions => Js.Promise.t(unit),
37 | subscribeToMore: subscribeToMoreOptions => unit,
38 | };
39 |
40 | module Make = (Config: Config) => {
41 | [@bs.module "graphql-tag"] external gql: gql = "default";
42 |
43 | type response = queryResponse(Config.t);
44 |
45 | type renderPropObj = {
46 | result: response,
47 | data: option(Config.t),
48 | error: option(apolloError),
49 | loading: bool,
50 | refetch: option(Js.Json.t) => Js.Promise.t(response),
51 | fetchMore:
52 | (~variables: option(Js.Json.t), ~updateQuery: updateQueryT, unit) =>
53 | Js.Promise.t(unit),
54 | networkStatus: option(int),
55 | subscribeToMore:
56 | (
57 | ~document: queryString,
58 | ~variables: Js.Json.t=?,
59 | ~updateQuery: updateQuerySubscriptionT=?,
60 | ~onError: onErrorT=?,
61 | unit
62 | ) =>
63 | unit,
64 | };
65 |
66 | let graphqlQueryAST = gql(. Config.query);
67 | let apolloDataToVariant = (apolloData: renderPropObjJS): response =>
68 | switch (
69 | apolloData.loading,
70 | apolloData.data |> ReasonApolloUtils.getNonEmptyObj,
71 | apolloData.error |> Js.Nullable.toOption,
72 | ) {
73 | | (true, _, _) => Loading
74 | | (false, Some(response), _) => Data(Config.parse(response))
75 | | (false, _, Some(error)) => Error(error)
76 | | (false, None, None) =>
77 | Error({
78 | message: "No data",
79 | graphQLErrors: Js.Nullable.null,
80 | networkError: Js.Nullable.null,
81 | })
82 | };
83 |
84 | let convertJsInputToReason = (apolloData: renderPropObjJS) => {
85 | result: apolloData |> apolloDataToVariant,
86 | data:
87 | switch (apolloData.data |> ReasonApolloUtils.getNonEmptyObj) {
88 | | None => None
89 | | Some(data) =>
90 | switch (Config.parse(data)) {
91 | | parsedData => Some(parsedData)
92 | | exception _ => None
93 | }
94 | },
95 | error:
96 | switch (apolloData.error |> Js.Nullable.toOption) {
97 | | Some(error) => Some(error)
98 | | None => None
99 | },
100 | loading: apolloData.loading,
101 | refetch: variables =>
102 | apolloData.refetch(variables |> Js.Nullable.fromOption)
103 | |> Js.Promise.then_(data =>
104 | data |> apolloDataToVariant |> Js.Promise.resolve
105 | ),
106 | fetchMore: (~variables, ~updateQuery, ()) =>
107 | apolloData.fetchMore({variables, updateQuery}),
108 | networkStatus: apolloData.networkStatus->Js.Nullable.toOption,
109 | subscribeToMore:
110 | (~document, ~variables=?, ~updateQuery=?, ~onError=?, ()) => {
111 | apolloData.subscribeToMore({document, variables, updateQuery, onError});
112 | },
113 | };
114 |
115 | module JsQuery = {
116 | [@bs.module "react-apollo"] [@react.component]
117 | external make:
118 | (
119 | ~query: queryString,
120 | ~variables: Js.Json.t=?,
121 | ~pollInterval: int=?,
122 | ~notifyOnNetworkStatusChange: bool=?,
123 | ~fetchPolicy: string=?,
124 | ~errorPolicy: string=?,
125 | ~ssr: bool=?,
126 | ~displayName: string=?,
127 | ~skip: bool=?,
128 | ~onCompleted: Js.Nullable.t(Js.Json.t) => unit=?,
129 | ~onError: apolloError => unit=?,
130 | ~partialRefetch: bool=?,
131 | ~delay: bool=?,
132 | ~context: Js.Json.t=?,
133 | ~children: renderPropObjJS => React.element
134 | ) =>
135 | React.element =
136 | "Query";
137 | };
138 |
139 | [@react.component]
140 | let make =
141 | (
142 | ~variables=?,
143 | ~pollInterval=?,
144 | ~notifyOnNetworkStatusChange=?,
145 | ~fetchPolicy=?,
146 | ~errorPolicy=?,
147 | ~ssr=?,
148 | ~displayName=?,
149 | ~skip=?,
150 | ~onCompleted=?,
151 | ~onError=?,
152 | ~partialRefetch=?,
153 | ~delay=?,
154 | ~context=?,
155 | ~children,
156 | ) =>
157 |
172 | {apolloData => apolloData |> convertJsInputToReason |> children}
173 | ;
174 | };
175 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Apollo Contributor Guide
2 |
3 | Excited about Apollo and want to make it better? We’re excited too!
4 |
5 | Apollo is a community of developers just like you, striving to create the best tools and libraries around GraphQL. We welcome anyone who wants to contribute or provide constructive feedback, no matter the age or level of experience. If you want to help but don't know where to start, let us know, and we'll find something for you.
6 |
7 | Oh, and if you haven't already, sign up for the [Apollo Slack](http://www.apollodata.com/#slack).
8 |
9 | Here are some ways to contribute to the project, from easiest to most difficult:
10 |
11 | * [Reporting bugs](#reporting-bugs)
12 | * [Improving the documentation](#improving-the-documentation)
13 | * [Responding to issues](#responding-to-issues)
14 | * [Small bug fixes](#small-bug-fixes)
15 | * [Suggesting features](#suggesting-features)
16 | * [Big pull requests](#big-prs)
17 |
18 | ## Issues
19 |
20 | ### Reporting bugs
21 |
22 | If you encounter a bug, please file an issue on GitHub via the repository of the sub-project you think contains the bug. If an issue you have is already reported, please add additional information or add a 👍 reaction to indicate your agreement.
23 |
24 | While we will try to be as helpful as we can on any issue reported, please include the following to maximize the chances of a quick fix:
25 |
26 | 1. **Intended outcome:** What you were trying to accomplish when the bug occurred, and as much code as possible related to the source of the problem.
27 | 2. **Actual outcome:** A description of what actually happened, including a screenshot or copy-paste of any related error messages, logs, or other output that might be related. Places to look for information include your browser console, server console, and network logs. Please avoid non-specific phrases like “didn’t work” or “broke”.
28 | 3. **How to reproduce the issue:** Instructions for how the issue can be reproduced by a maintainer or contributor. Be as specific as possible, and only mention what is necessary to reproduce the bug. If possible, try to isolate the exact circumstances in which the bug occurs and avoid speculation over what the cause might be.
29 |
30 | Creating a good reproduction really helps contributors investigate and resolve your issue quickly. In many cases, the act of creating a minimal reproduction illuminates that the source of the bug was somewhere outside the library in question, saving time and effort for everyone.
31 |
32 | Include in the issue a link to your reproduction—a couple good options are a small Github repo or a [CodeSandbox](https://codesandbox.io/). Here's a starter CodeSandbox you can use: https://codesandbox.io/s/yrwE7pvJ7
33 |
34 | If you have a more complicated issue where it is helpful to run it locally, you may consider using [react-apollo-error-template](https://github.com/apollographql/react-apollo-error-template) for reproducing the issue.
35 |
36 | ### Improving the documentation
37 |
38 | Improving the documentation, examples, and other open source content can be the easiest way to contribute to the library. If you see a piece of content that can be better, open a PR with an improvement, no matter how small! If you would like to suggest a big change or major rewrite, we’d love to hear your ideas but please open an issue for discussion before writing the PR.
39 |
40 | ### Responding to issues
41 |
42 | In addition to reporting issues, a great way to contribute to Apollo is to respond to other peoples' issues and try to identify the problem or help them work around it. If you’re interested in taking a more active role in this process, please go ahead and respond to issues. And don't forget to say "Hi" on Apollo Slack!
43 |
44 | ### Small bug fixes
45 |
46 | For a small bug fix change (less than 20 lines of code changed), feel free to open a pull request. We’ll try to merge it as fast as possible and ideally publish a new release on the same day. The only requirement is, make sure you also add a test that verifies the bug you are trying to fix.
47 |
48 | ### Suggesting features
49 |
50 | Most of the features in Apollo came from suggestions by you, the community! We welcome any ideas about how to make Apollo better for your use case. Unless there is overwhelming demand for a feature, it might not get implemented immediately, but please include as much information as possible that will help people have a discussion about your proposal:
51 |
52 | 1. **Use case:** What are you trying to accomplish, in specific terms? Often, there might already be a good way to do what you need and a new feature is unnecessary, but it’s hard to know without information about the specific use case.
53 | 2. **Could this be a plugin?** In many cases, a feature might be too niche to be included in the core of a library, and is better implemented as a companion package. If there isn’t a way to extend the library to do what you want, could we add additional plugin APIs? It’s important to make the case for why a feature should be part of the core functionality of the library.
54 | 3. **Is there a workaround?** Is this a more convenient way to do something that is already possible, or is there some blocker that makes a workaround unfeasible?
55 |
56 | Feature requests will be labeled as such, and we encourage using GitHub issues as a place to discuss new features and possible implementation designs. Please refrain from submitting a pull request to implement a proposed feature until there is consensus that it should be included. This way, you can avoid putting in work that can’t be merged in.
57 |
58 | Once there is a consensus on the need for a new feature, proceed as listed below under “Big PRs”.
59 |
60 | ## Big PRs
61 |
62 | This includes:
63 |
64 | - Big bug fixes
65 | - New features
66 |
67 | For significant changes to a repository, it’s important to settle on a design before starting on the implementation. This way, we can make sure that major improvements get the care and attention they deserve. Since big changes can be risky and might not always get merged, it’s good to reduce the amount of possible wasted effort by agreeing on an implementation design/plan first.
68 |
69 | 1. **Open an issue.** Open an issue about your bug or feature, as described above.
70 | 2. **Reach consensus.** Some contributors and community members should reach an agreement that this feature or bug is important, and that someone should work on implementing or fixing it.
71 | 3. **Agree on intended behavior.** On the issue, reach an agreement about the desired behavior. In the case of a bug fix, it should be clear what it means for the bug to be fixed, and in the case of a feature, it should be clear what it will be like for developers to use the new feature.
72 | 4. **Agree on implementation plan.** Write a plan for how this feature or bug fix should be implemented. What modules need to be added or rewritten? Should this be one pull request or multiple incremental improvements? Who is going to do each part?
73 | 5. **Submit PR.** In the case where multiple dependent patches need to be made to implement the change, only submit one at a time. Otherwise, the others might get stale while the first is reviewed and merged. Make sure to avoid “while we’re here” type changes - if something isn’t relevant to the improvement at hand, it should be in a separate PR; this especially includes code style changes of unrelated code.
74 | 6. **Review.** At least one core contributor should sign off on the change before it’s merged. Look at the “code review” section below to learn about factors are important in the code review. If you want to expedite the code being merged, try to review your own code first!
75 | 7. **Merge and release!**
76 |
77 | ### Code review guidelines
78 |
79 | It’s important that every piece of code in Apollo packages is reviewed by at least one core contributor familiar with that codebase. Here are some things we look for:
80 |
81 | 1. **Required CI checks pass.** This is a prerequisite for the review, and it is the PR author's responsibility. As long as the tests don’t pass, the PR won't get reviewed.
82 | 2. **Simplicity.** Is this the simplest way to achieve the intended goal? If there are too many files, redundant functions, or complex lines of code, suggest a simpler way to do the same thing. In particular, avoid implementing an overly general solution when a simple, small, and pragmatic fix will do.
83 | 3. **Testing.** Do the tests ensure this code won’t break when other stuff changes around it? When it does break, will the tests added help us identify which part of the library has the problem? Did we cover an appropriate set of edge cases? Look at the test coverage report if there is one. Are all significant code paths in the new code exercised at least once?
84 | 4. **No unnecessary or unrelated changes.** PRs shouldn’t come with random formatting changes, especially in unrelated parts of the code. If there is some refactoring that needs to be done, it should be in a separate PR from a bug fix or feature, if possible.
85 | 5. **Code has appropriate comments.** Code should be commented, or written in a clear “self-documenting” way.
86 | 6. **Idiomatic use of the language.** In TypeScript, make sure the typings are specific and correct. In ES2015, make sure to use imports rather than require and const instead of var, etc. Ideally a linter enforces a lot of this, but use your common sense and follow the style of the surrounding code.
87 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Archival
2 | This repo was archived by the Apollo Security team on 2023-05-26
3 |
4 |
5 | # Reason-apollo
6 |
7 | [](https://badge.fury.io/js/reason-apollo)
8 | [](https://spectrum.chat/apollo)
9 |
10 | > react-apollo with ReasonML
11 |
12 | ## Install and setup
13 |
14 | #### Install
15 |
16 | ```
17 | yarn add reason-apollo
18 |
19 | # Add graphql_ppx
20 | yarn add @baransu/graphql_ppx_re --dev
21 | ```
22 |
23 | #### bsconfig
24 |
25 | Add `reason-apollo` to your `bs-dependencies` and
26 | `@baransu/graphql_ppx_re/ppx` to your `ppx-flags`
27 |
28 | **bsconfig.json**
29 |
30 | ```
31 | "bs-dependencies": [
32 | "reason-react",
33 | "reason-apollo"
34 | ],
35 | "ppx-flags": [
36 | "@baransu/graphql_ppx_re/ppx"
37 | ]
38 | ```
39 |
40 | #### Send introspection query
41 |
42 | This will generate a `graphql_schema.json` which will be used to safely type your GraphQL queries/mutations.
43 |
44 | ```
45 | npx get-graphql-schema ENDPOINT_URL -j > graphql_schema.json
46 | ```
47 |
48 | ## Why reason-apollo?
49 |
50 | Watch its usage in this video:
51 |
52 | [](https://www.youtube.com/watch?v=yMqE37LqRLA)
53 |
54 | # Usage
55 |
56 | ## Create the Apollo Client
57 |
58 | **Client.re**
59 |
60 | ```reason
61 | /* Create an InMemoryCache */
62 | let inMemoryCache = ApolloInMemoryCache.createInMemoryCache();
63 |
64 | /* Create an HTTP Link */
65 | let httpLink =
66 | ApolloLinks.createHttpLink(~uri="http://localhost:3010/graphql", ());
67 |
68 | let instance =
69 | ReasonApollo.createApolloClient(~link=httpLink, ~cache=inMemoryCache, ());
70 | ```
71 |
72 | ## ApolloProvider
73 |
74 | **Index.re**
75 |
76 | ```reason
77 | /*
78 | Enhance your application with the `ReasonApollo.Provider`
79 | passing it your client instance
80 | */
81 | ReactDOMRe.renderToElementWithId(
82 |
83 | ,
85 | "index",
86 | );
87 | ```
88 |
89 | ## Query
90 |
91 | **MyQuery.re**
92 |
93 | ```reason
94 | /* Create a GraphQL Query by using the graphql_ppx */
95 | module GetUserName = [%graphql
96 | {|
97 | query getUserName($id: ID!){
98 | user(id: $ID) {
99 | id
100 | device {
101 | id
102 | brand {
103 | id
104 | name
105 | }
106 | }
107 | }
108 | }
109 | |}
110 | ];
111 |
112 | module GetUserNameQuery = ReasonApollo.CreateQuery(GetUserName);
113 |
114 | [@react.component]
115 | let make = () => {
116 | let userNameQuery = GetUserName.make(~id="42", ());
117 |
118 | ...{({result}) =>
119 | switch (result) {
120 | | Loading => {ReasonReact.string("Loading")}
121 | | Error(error) => {ReasonReact.string(error##message)}
122 | | Data(response) =>
123 |
124 | {/* Handles a deeply nested optional response */
125 | response##user
126 | ->Belt.Option.flatMap(user => user##device)
127 | ->Belt.Option.flatMap(device => device##brand)
128 | ->Belt.Option.mapWithDefault("", brand => brand##name)}
129 |
130 | }
131 | }
132 | ;
133 | };
134 |
135 | ```
136 |
137 | ## Mutation
138 |
139 | **MyMutation.re**
140 |
141 | ```reason
142 | module AddUser = [%graphql
143 | {|
144 | mutation addUser($name: String!) {
145 | addUser(name: $name) {
146 | id
147 | name
148 | }
149 | }
150 | |}
151 | ];
152 |
153 | module AddUserMutation = ReasonApollo.CreateMutation(AddUser);
154 |
155 | [[@react.component]
156 | let make = () => {
157 |
158 | ...{(mutation /* Mutation to call */, _ /* Result of your mutation */) => {
159 | let addNewUserQuery = AddUser.make(~name="Bob", ());
160 |
161 |
163 | mutation(
164 | ~variables=addNewUserQuery##variables,
165 | ~refetchQueries=[|"getAllUsers"|],
166 | (),
167 | )
168 | |> ignore
169 | }>
170 | {ReasonReact.string("Add User")}
171 |
172 |
;
173 | }}
174 | ;
175 | };
176 | ```
177 |
178 | ## Subscription
179 |
180 | **MySubscription.re**
181 |
182 | ```reason
183 | module UserAdded = [%graphql {|
184 | subscription userAdded {
185 | userAdded {
186 | id
187 | name
188 | }
189 | }
190 | |}];
191 |
192 | module UserAddedSubscription = ReasonApollo.CreateSubscription(UserAdded);
193 |
194 | [@react.component]
195 | let make = () => {
196 |
197 | ...{({result}) => {
198 | switch (result) {
199 | | Loading => {ReasonReact.string("Loading")}
200 | | Error(error) => {ReasonReact.string(error##message)}
201 | | Data(_response) =>
202 |
203 |
206 | }
207 | }}
208 | ;
209 | };
210 | ```
211 |
212 | ## ApolloConsumer
213 |
214 | If you simply want to have access to the ApolloClient, you can use the `ApolloConsumer`
215 |
216 | ```reason
217 |
218 | ...{apolloClient => {/* We have access to the client! */}}
219 | ;
220 | ```
221 |
222 | ## Tips and Tricks
223 |
224 | ### access deeply nested optional objects
225 |
226 | If for this query
227 |
228 | ```graphql
229 | query {
230 | user {
231 | device {
232 | brand {
233 | name
234 | }
235 | }
236 | }
237 | }
238 | ```
239 |
240 | you end up with that kind of code:
241 |
242 | ```reason
243 | let deviceName =
244 | switch (response##user) {
245 | | None => ""
246 | | Some(user) =>
247 | switch (user##device) {
248 | | None => ""
249 | | Some(device) =>
250 | switch (device##brand) {
251 | | None => ""
252 | | Some(brand) => brand##name
253 | }
254 | }
255 | };
256 |
257 | ```
258 |
259 | 1. Use `Belt`
260 |
261 | ```reason
262 | open Belt.Option;
263 |
264 | let deviceName =
265 | response##user
266 | ->flatMap(user => user##device)
267 | ->flatMap(device => device##brand)
268 | ->mapWithDefault("", brand => brand##name);
269 | ```
270 |
271 | 2. Use `@bsRecord`
272 |
273 | The `@bsRecord` modifier is an [extension](https://github.com/reasonml-community/graphql_ppx#record-conversion) of the graphql syntax for BuckleScipt/ReasonML. It allows you to convert a reason object to a reason record and reap the benefits of pattern matching, but you need to defined the record by yourself.
274 |
275 | ```reason
276 | type brand = {
277 | name: string
278 | };
279 |
280 | type device = {
281 | brand: option(brand)
282 | };
283 |
284 | type user = {
285 | device: option(device)
286 | };
287 |
288 | type response = user;
289 |
290 | query {
291 | user @bsRecord {
292 | device @bsRecord {
293 | brand @bsRecord {
294 | name
295 | }
296 | }
297 | }
298 | }
299 | ```
300 |
301 | This time we can pattern match more precisely.
302 |
303 | ```reason
304 | let deviceName =
305 | switch (response##user) {
306 | | Some({device: Some({brand: {name}})}) => name
307 | | _ => ""
308 | };
309 |
310 | ```
311 |
312 | 3. Use `get_in_ppx`
313 |
314 | `npm install get_in_ppx`
315 | and in `bsconfig.json`
316 | `"ppx-flags": ["get_in_ppx/ppx"]`
317 | you can write
318 |
319 | ```reason
320 | let deviceName = response##user#??device#??brand#?name;
321 | ```
322 |
323 | There's a [blogpost](https://jaredforsyth.com/posts/optional-attribute-access-in-reason/) from Jared Forsyth (author of this ppx) for more explanation.
324 |
325 | ### Use an alias for irregular field names
326 |
327 | You might find yourself consuming an API with field names like `Field`. Currently, reason object field names are required to be camel case. Therefore if you have a request like this:
328 |
329 | ```reason
330 | {
331 | Object {
332 | id
333 | title
334 | }
335 | }
336 | ```
337 |
338 | You will attempt to access the response object but it will throw an error:
339 |
340 | ```reason
341 | response##Object; /* Does not work :( */
342 | ```
343 |
344 | Instead, use an `alias` to modify the response:
345 |
346 | ```reason
347 | {
348 | object: Object {
349 | id
350 | title
351 | }
352 | }
353 | ```
354 |
355 | Then you can access the object like this:
356 |
357 | ```reason
358 | response##object
359 | ```
360 |
361 | ### Generic Error and Loading components
362 |
363 | You can create a generic error and Loading component and compose them like this example:
364 |
365 | ```reason
366 | module QueryView = {
367 | [@react.component]
368 | let make =
369 | (
370 | ~result: ReasonApolloTypes.queryResponse('a),
371 | ~accessData: 'a => option('b),
372 | ~render: ('b, 'c) => React.element,
373 | ~onLoadMore: ('b, 'unit) => unit=(_, ()) => (),
374 | ) => {
375 | switch (result) {
376 | | Error(error) =>