+}
\ No newline at end of file
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/online-users/UserItem.re b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/online-users/UserItem.re
new file mode 100644
index 0000000000000..8c5e3f8ba94da
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/online-users/UserItem.re
@@ -0,0 +1,11 @@
+[@react.component]
+let make = (~user) => {
+
+
+
+
+
+ {ReasonReact.string(user##name)}
+
+
+}
\ No newline at end of file
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/online-users/UserTypes.re b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/online-users/UserTypes.re
new file mode 100644
index 0000000000000..635a602a663c6
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/online-users/UserTypes.re
@@ -0,0 +1,5 @@
+[@bs.deriving jsConverter]
+type user = {
+ id: int,
+ name: string
+};
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/todo/FeedItem.re b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/todo/FeedItem.re
new file mode 100644
index 0000000000000..a091d45e243bb
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/todo/FeedItem.re
@@ -0,0 +1,13 @@
+[@react.component]
+let make = (~todo) => {
+
+
+ {ReasonReact.string(todo##user##name)}
+
+
+
+ {ReasonReact.string(todo##title)}
+
+
+
+}
\ No newline at end of file
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/todo/TodoFilters.re b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/todo/TodoFilters.re
new file mode 100644
index 0000000000000..ae1d05dd4bd98
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/src/todo/TodoFilters.re
@@ -0,0 +1,27 @@
+[@react.component]
+
+let make = (~todoCount: int, ~currentFilter: string, ~filterFunc) => {
+ let todoCountLabel = string_of_int(todoCount) ++ " item" ++ if (todoCount === 1) { "s" } else { "" };
+
++
+}
+```
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/index.mdx b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/index.mdx
new file mode 100644
index 0000000000000..31afe68af713f
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/index.mdx
@@ -0,0 +1,36 @@
+---
+title: "Course introduction"
+---
+
+This course is a concise and powerful introduction to GraphQL for ReasonReact developers.
+
+We’ve structured this course to cover fundamental concepts of both GraphQL and using GraphQL with ReasonReact, in the shortest amount of time possible. The course is light on opinions so that once you grok the fundamentals you can go on to choose your favourite tools and tailor your workflow.
+
+## Key topics and takeways:
+
+- GraphQL vs REST
+- GraphQL queries, mutations, subscriptions
+- Setting up a GraphQL client with Apollo
+- Integrating GraphQL queries in your react app
+- Integrating GraphQL mutations with query variables to handle form input
+- Updating local state after a GraphQL mutation (form input) using Apollo cache
+- Using subscriptions with a subscriptions components
+- Building a real-time feed with notifications using mutations and subscriptions
+
+## What will be building?
+We will be building a realtime todo app using authenticated GraphQL APIs.
+
+Try this deployed version of the app to see what we'll be building:
+https://learn-hasura-todo-app.netlify.com/
+
+## Will this course teach ReasonReact concepts as well?
+No, we will be simulating a scenario where we already have a
+GraphQL API and the basic UI of a ReasonReact app built. Our task in this
+scenario is to integrate the GraphQL APIs into our ReasonReact app to build
+a complete and working app.
+
+## What do I need to take this tutorial?
+You need to have npm/yarn & node 8+ running.
+
+## How long will this tutorial take?
+Less than 2 hours
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql.md
new file mode 100644
index 0000000000000..9e56ca7699683
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql.md
@@ -0,0 +1,87 @@
+---
+title: "Intro to GraphQL"
+metaTitle: "Intro to GraphQL | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "What is GraphQL? GraphQL is a specification for how to talk to an API. This part also covers GraphQL vs REST with an example and takes you over benefits of GraphQL"
+---
+
+## What is GraphQL?
+GraphQL is a specification for how to talk to an API. It's typically used over HTTP where the key idea is to `POST` a "query" to an HTTP endpoint, instead of hitting different HTTP endpoints for different resources.
+
+GraphQL is designed for developers of web/mobile apps (HTTP clients) to be able to make API calls to fetch the data they need from their backend APIs conveniently.
+
+## GraphQL vs REST: an example
+Let's say you have an API to fetch a user's profile and their address. In a typical REST scenario, this is what the request/response would look like:
+
+
+
+If your API server was a GraphQL server instead, this is what your API calls would look like:
+
+
+
+You can see that the response JSON is different for different "queries" sent by the client.
+
+```
+Request1: | Response1:
+
+query { | {
+ user (id: 1) { | "user": {
+ id | "id": 1
+ } | }
+} | }
+
+----------------------------------------
+
+Request2: | Response2:
+
+query { | {
+ user (id: 1) { | "user": {
+ id | "id": 1
+ name | "name": "Elmo"
+ } | }
+} | }
+```
+
+## Thinking in GraphQL
+
+We're changing the way we think about API calls. Instead of making different API
+calls to different URLs to fetch data, we're making ad-hoc queries to a "single
+URL endpoint" that returns data based on the query.
+- Instead of 'GET'ing a resource you 'POST' a query that describes what data you
+ want.
+- You think of the data your API returns as a "graph", this allows you to make
+ queries to fetch "related" pieces of data in a single shot. In the example
+ above, you fetch the user and the user's address (as a nested JSON object)
+ in the same API call, as opposed to making 2 API calls.
+- The "query" you send as data in the POST request has a structure and a syntax.
+ This "language" is called GraphQL.
+
+As you can see in the example above, GraphQL queries look very neat and easy to
+read! This is because the query is the "shape" of the final JSON data you desire.
+This is one of the key-reasons that makes GraphQL a joy to work with!
+
+## GraphQL benefits
+
+- **Avoid over-fetching**: You avoid fetching more data than you need because you
+ can specify the exact **fields** you need.
+- **Prevent multiple API calls**: In case you need more data, you can also avoid
+ making multiple calls to your API. In the case above, you don't need to make
+ 2 API calls to fetch `user` and `address` separately.
+- **Lesser communication with API developers**: Sometimes to fetch the exact data
+ you need, especially if you need to fetch more data and want to avoid multiple API
+ calls, you will need to ask your API developers to build a new API. With GraphQL,
+ your work is *independent* of the API team! This allows you to work faster on your
+ app.
+- **Self-documenting**: Every GraphQL API conforms to a "schema" which is the graph
+ data model and what kinds of queries a client can make. This allows the community
+ to build lots of cool tools to explore & visualise your API or create IDE plugins
+ that autocomplete your GraphQL queries and even do "codegen". We'll understand this
+ in more detail later!
+
+Here's a quick chart to show you the GraphQL analogs of typical REST-ish terms:
+
+| Requirement | REST | GraphQL |
+| :-- | :-- | :-- |
+| Fetching data objects | GET | query |
+| Writing data | POST | mutation |
+| Updating/deleting data | PUT/PATCH/DELETE | mutation |
+| Watching/subscribing to data | - | subscription |
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/1-architecture.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/1-architecture.md
new file mode 100644
index 0000000000000..ec74b49e52568
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/1-architecture.md
@@ -0,0 +1,62 @@
+---
+title: "Architecture"
+order: 1
+metaTitle: "GraphQL Architecture | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "Learn about the architecture of GraphQL, GraphQL over HTTP, the client server model with an example of http request"
+---
+
+Before going further in understanding GraphQL, it's useful to get a sense of how
+GraphQL is actually used in an HTTP client (typically a web/mobile app).
+
+## GraphQL over HTTP
+Check out the diagram below, to get a sense of how GraphQL is typically used in
+your stack:
+
+
+
+### GraphQL client-server flow:
+
+1. Note that the GraphQL query is not really JSON; it looks like the shape of the
+ JSON you *want*. So when we make a 'POST' request to send our GraphQL query to
+ the server, it is sent as a "string" by the client.
+2. The server gets the JSON object and extracts the query string. As per the
+ GraphQL syntax and the graph data model (GraphQL schema), the server processes
+ and validates the GraphQL query.
+3. Just like a typical API server, the GraphQL API server then makes calls to a
+ database or other services to fetch the data that the client requested.
+4. The server then takes the data and returns it to the client in a JSON object.
+
+### Example GraphQL client setup:
+
+In your day to day work, you don't actually need to worry about the underlying
+HTTP requests & responses.
+
+Just like when you work with a REST API and use a HTTP
+client to reduce the boilerplate in making API calls and handling responses, you
+can choose a GraphQL client to make writing GraphQL queries, sending them and
+handling responses much easier.
+
+In fact, the mechanism of how you send the GraphQL query and accept the GraphQL
+response has become standard. This makes working with GraphQL very easy on the
+client.
+
+Here's what a typical GraphQL client setup and making a query would look like:
+
+```javascript
+
+// Setup a GraphQL client to use the endpoint
+
+const client = new client("https://myapi.com/graphql");
+
+
+// Now, send your query as a string (Note that ` is used to create a multi-line
+// string in javascript).
+
+client.query(`
+ query {
+ user {
+ id
+ name
+ }
+ }`);
+```
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/2-fetching-data-queries.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/2-fetching-data-queries.md
new file mode 100644
index 0000000000000..8bf7524d6e4f6
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/2-fetching-data-queries.md
@@ -0,0 +1,209 @@
+---
+title: Fetching data - Queries
+metaTitle: "GraphQL Queries to fetch data | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "Try out GraphQL Query using GraphiQL. A GraphQL query example with parameters, arguments and variables to fetch data dynamically"
+---
+
+import YoutubeEmbed from "../../src/YoutubeEmbed.js";
+
+
+
+## Try out GraphQL queries
+For this tutorial we've set up a GraphQL API for you. The most common
+way to browse a GraphQL API is to use GraphiQL. GraphiQL is a tool
+built by Facebook, (pronounced "graphical") that makes it easy to explore
+any GraphQL API.
+
+When you connect GraphiQL to a GraphQL endpoint, it
+queries the server for its GraphQL schema and gives you a UI to browse
+and test queries, and that powers its amazing autocomplete!
+
+
+
+Tools like GraphiQL make GraphQL APIs really easy
+to use and integrate APIs in your app without requiring
+external documentation tools.
+
+You can access the GraphiQL for this realtime todo app tutorial here:
+[learn.hasura.io/graphql/graphiql](https://learn.hasura.io/graphql/graphiql)
+
+When you work with a GraphQL API in a project you will almost always
+use a tool like GraphiQL to explore and test your GraphQL queries.
+
+## Basic GraphQL query
+
+1. Open GraphiQL at: [learn.hasura.io/graphql/graphiql](https://learn.hasura.io/graphql/graphiql).
+ You'll have to login to get an auth token to query the API. In a real-world scenario
+ your GraphQL APIs will be protected.
+2. You'll see a URL, and headers that contain the auth
+ token that will be sent along with your GraphQL query.
+3. Now, paste this GraphQL query in the GraphiQL window
+
+```graphql
+ query {
+ users {
+ name
+ }
+ }
+```
+
+4. Hit `ctrl + enter` or `cmd + enter` (mac) or click on the ▶️ icon to run the GraphQL query
+5. On the right, you should see a list of users by their names that are in the system!
+
+Try it out in GraphiQL
+
+Recall that there is no magic here! The hosted GraphiQL app is sending a GraphQL query string
+to the server at the given endpoint with the HTTP headers. The server then sends the response
+that you see on the right hand side.
+
+## Fetching "graphs"
+
+Our todo app has users, todos and information about users that are currently online.
+This is what our API "schema" looks like:
+
+
+
+As you can see, it is a "graph" like schema where all the 3 models are linked to each other.
+
+Let's try making queries that fetch different slices of our data from the overall "graph".
+
+### Fetch users and their todos
+
+This GraphQL query will fetch all the users and their publicly visible todos:
+
+```graphql
+ query {
+ users {
+ name
+ todos {
+ title
+ }
+ }
+ }
+```
+
+Try it out in GraphiQL
+
+
+### Fetch online users and their profile information
+
+This GraphQL query will fetch all the currently online users
+and their profile information (which is just their name for now):
+
+```graphql
+ query {
+ online_users {
+ last_seen
+ user {
+ name
+ }
+ }
+ }
+```
+
+Try it out in GraphiQL
+
+
+## Adding parameters (arguments) to GraphQL queries
+
+In most API calls, you usually use parameters. For example, to specify what data you're fetching.
+If you're familiar with making `GET` calls, you would have used a query parameter. For example,
+to fetch only 10 todos you might have made this API calls: `GET /api/todos?limit=10`.
+
+The GraphQL query analog of this is *arguments* that you can attach to a "field".
+
+### Basic argument: Fetch 10 todos
+
+This GraphQL query will fetch 10 todos and not all of them.
+
+```graphql
+query {
+ todos(limit: 10) {
+ id
+ title
+ }
+}
+```
+
+Try it out in GraphiQL
+
+The most important bit to check here is `limit: 10`. GraphQL servers will provide a list of
+arguments that can be used in `()` next to specific fields. In our case, we are using
+Hasura for creating the GraphQL backend which provides filter, sort and pagination arguments.
+The GraphQL server or API that you use, might provide a different set of arguments that can be used.
+
+### Multiple arguments on multiple fields: Fetch 1 user and 5 most recent todos for each user
+
+```graphql
+query {
+ users (limit: 1) {
+ id
+ name
+ todos(order_by: {created_at: desc}, limit: 5) {
+ id
+ title
+ }
+ }
+}
+```
+
+Notice that we are passing arguments to different fields. This GraphQL query reads as:
+> Fetch users (with limit 1), and their todos (ordered by descending creation time, and limited to 5).
+
+Try it out in GraphiQL
+
+
+## GraphQL variables: Passing arguments to your queries dynamically
+
+This is great, but we still have a problem. If we want to create a query
+where we are fetching data with arguments that are provided dynamically, we'd have to
+create the entire query string again.
+
+This is what we don't want to do:
+
+```javascript
+var limit = getMaxTodosFromUserInput();
+var query = "query { todos (limit: " + limit.toString() + ") {id title} }";
+```
+
+Thankfully, we don't ever have to do this! GraphQL variables are extra variables
+that you can send in a query so that the "arguments" can be provided dynamically!
+
+## Fetch $limit number of todos
+
+This is what our GraphQL query would look like:
+```graphql
+query ($limit: Int!) {
+ todos(limit: $limit) {
+ id
+ title
+ }
+}
+```
+
+In addition to the query above, we send a variables object:
+```json
+{
+ "limit": 10
+}
+```
+
+Now instead of sending just the query to the GraphQL server, from our client
+we'll send both the query and the variables. The GraphQL server will use the
+variable in the right place in the query automatically for us!
+
+Let's try this out in GraphiQL:
+1. Head to GraphiQL
+2. Write out this query
+3. Scroll to the bottom of the page, where you see a smaller panel "Query Variables"
+4. Add the query variable as a JSON object
+
+Try it out in GraphiQL
+
+## Summary
+
+- You can now make GraphQL queries
+- You know how to pass arguments to your GraphQL queries
+- You know how to make your arguments dynamic by using query variables
+
+Next, let's look at writing data and not just fetching data!
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/3-writing-data-mutations.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/3-writing-data-mutations.md
new file mode 100644
index 0000000000000..83112e1c70004
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/3-writing-data-mutations.md
@@ -0,0 +1,121 @@
+---
+title: Writing data - Mutations
+metaTitle: "GraphQL Mutations to insert data | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "Try out GraphQL Mutation using GraphiQL. A GraphQL mutation example with dynamic arguments and variables to insert data"
+---
+
+import {Link} from 'gatsby';
+
+import YoutubeEmbed from "../../src/YoutubeEmbed.js";
+
+
+These are the concepts you should know before you attack mutations (haha):
+- Using GraphiQL
+- Using query variables
+
+Now, let's get started with seeing how we can use GraphQL to "write" data.
+GraphQL mutations are types of GraphQL queries that may result in the state
+of your backend "mutating" or changing, just like typical `'POST'`,
+`'PUT'`, `'PATCH'`, `'DELETE'` APIs.
+
+## Basic mutations
+Since we're using Hasura for our GraphQL API, we get mutations for
+insert, updates or deletes that we can use in our app.
+
+Let's try these mutations out in the context of a todo app to see
+what mutations look like. Mutations that you get from another GraphQL
+service, say if your API team has built their own, might be different.
+
+### Create a todo
+
+Let's make an API call to create a todo. As you would have guessed, this
+will be a critical portion of our todo app. 😉
+
+> **Protip**: Now let's say we don't know what the name of the mutation to
+> create a todo. GraphiQL to the rescue!
+> Head to GraphiQL and on the right, click on the "docs" tab.
+> Type "todo" there and you'll see a list of GraphQL queries and types
+> that use todo. Read through their descriptions and you'll soon
+> find that `insert_todo` is what you need.
+
+The mutation to create todos is titled `insert_todos`.
+
+```graphql
+mutation {
+ insert_todos(objects: [{title: "new todo"}]) {
+ returning {
+ id
+ }
+ }
+}
+```
+
+
+Try it out in GraphiQL
+
+## Returning data after the mutation
+Notice that the data of the todo that is to be inserted is sent as
+an argument to the `insert_todos` mutation. But the "fields" of the mutation
+specify the shape of the _response_ that you want from the server.
+
+Let's say we'd like to get the entire todo object once it's been created
+as a response:
+
+```graphql
+mutation {
+ insert_todos(objects: [{title: "new todo"}]) {
+ returning {
+ id
+ title
+ is_completed
+ is_public
+ created
+ }
+ }
+}
+```
+
+
+Try it out in GraphiQL
+
+## Parametrise what you insert
+
+For mutations, we would almost always have to paramatrise the arguments! We
+would rarely, if ever, have a "hardcoded" mutation in our app. This is because
+the arguments of what data to capture, how to modify or delete something is usually
+dependent on some user action.
+
+Now that we know how to parametrise using query variables, let's use that:
+
+```graphql
+# The parametrised GraphQL mutation
+mutation($todo: insert_todo_input!){
+ insert_todos(objects: [$todo]) {
+ returning {
+ id
+ }
+ }
+}
+```
+
+```javascript
+# As a query variable
+{
+ "todo": {
+ "title": "A new dynamic todo"
+ }
+}
+```
+
+
+Try it out in GraphiQL
+
+We'll explore more mutations to update or delete data a little later.
+This is a good start to grokking mutations!
+
+## Summary
+
+- You can make basic GraphQL mutations
+- You can pass dynamic arguments/data to mutations with query variables
+
+Next, let's look at GraphQL subscriptions
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/4-watching-data-subscriptions.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/4-watching-data-subscriptions.md
new file mode 100644
index 0000000000000..68a746fd19c1d
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/intro-to-graphql/4-watching-data-subscriptions.md
@@ -0,0 +1,51 @@
+---
+title: Watching data - Subscriptions
+metaTitle: "GraphQL Subscriptions for realtime data | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "Try out GraphQL Subscription using GraphiQL. A GraphQL subscriptions example to fetch live data pushed over websockets "
+---
+
+
+import YoutubeEmbed from "../../src/YoutubeEmbed.js";
+
+The GraphQL specification allows for something called subscriptions that are like GraphQL queries
+but instead of returning data in one read, you get data pushed from the server.
+
+This is useful for your app to subscribe to "events" or "live results" from the backend, but
+while allowing you to control the "shape" of the event from your app.
+
+GraphQL subscriptions are a critical component of adding realtime or reactive features
+to your apps easily. GraphQL clients and servers that support subscriptions are great because
+they allow you to build great experiences without having to deal with websocket code!
+
+## Make your first GraphQL subscription
+
+1. Step 1: Head to https://learn.hasura.io/graphql/graphiql
+2. Step 2: Write this GraphQL query in the textarea:
+
+```graphql
+subscription {
+ online_users {
+ id
+ last_seen
+ user {
+ name
+ }
+ }
+}
+```
+
+3. Every time the set of online users change, you'll see the latest set on
+the response window on the right
+
+## How do GraphQL subscriptions work?
+
+GraphQL queries and mutations are strings sent to a POST endpoint. What is a GraphQL subscription? That can't happen over a POST endpoint, because a simple HTTP endpoint would just return the response and the connection would close.
+
+A GraphQL subscription is a subscription query string sent to a websocket endpoint. And whenever data changes on the backend, new data is pushed over websockets from the server to the client.
+
+## Summary
+
+- You know how to make GraphQL subscriptions
+
+Now that you're comfortable with the basics of using GraphQL, let's start
+integrating GraphQL APIs with an app!
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/introduction.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/introduction.md
new file mode 100644
index 0000000000000..230fa8a089b82
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/introduction.md
@@ -0,0 +1,48 @@
+---
+title: "Course introduction"
+metaTitle: "Course Introduction | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "A powerful and concise tutorial that will introduce you to GraphQL and integrating GraphQL into your ReasonReact app with Apollo, in the shortest amount of time possible."
+---
+
+GraphQL is becoming the new way to use APIs in modern web and mobile apps.
+
+However, learning new things always takes time and without getting your hands dirty it’s very hard to understand the nuances of a new technology.
+
+So, we put together a powerful and concise course that will introduce you to GraphQL and integrating GraphQL into your frontend stack, in the shortest amount of time possible.
+
+We will explore the fundamentals of GraphQL and the especially things that make GraphQL suitable for modern applications, like its realtime capabilities! The course is light on opinions so that once you grok the fundamentals you can go on to choose your favorite libraries, tools and tailor your workflow.
+
+## Key topics and takeways:
+
+- GraphQL vs REST
+- GraphQL queries, mutations, subscriptions
+- Setting up a GraphQL client with Apollo
+- Integrating GraphQL queries in your ReasonReact app
+- Integrating GraphQL mutations with query variables to handle form input
+- Updating local state after a GraphQL mutation (form input) using Apollo cache
+- Optimistic updates to local state and UI after GraphQL mutations for a slick UX
+- Using subscriptions with a subscriptions components
+- Building a real-time feed with notifications using mutations and subscriptions
+
+## What will we be building?
+We will be building a realtime todo app using authenticated GraphQL APIs.
+
+Try this deployed version of the app to see what we'll be building:
+https://learn-hasura-todo-app.netlify.com/
+
+## Will this course teach ReasonReact concepts as well?
+No, we will be simulating a scenario where we already have a GraphQL API and the basic UI of a ReasonReact app built. Our task in this scenario is to integrate the GraphQL APIs into our ReasonReact app to build a complete and working app.
+
+If you're new to ReasonReact, we recommend going through this [official tutorial](https://reasonml.github.io/reason-react) and then coming back here!
+
+## What do I need to take this tutorial?
+You need to have npm/yarn & node 8+ running.
+
+## How long will this tutorial take?
+Less than 2 hours
+
+## Other courses:
+
+**Frontend**: GraphQL for: [React](https://learn.hasura.io/graphql/react), [Vue](https://learn.hasura.io/graphql/vue), [React Native](https://learn.hasura.io/graphql/react-native), [iOS](https://learn.hasura.io/graphql/ios)
+
+**Backend**: [Building a realtime GraphQL backend with Hasura](https://learn.hasura.io/graphql/hasura) in 30 mins (ideal for frontend, backend or fullstack developers)
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables.md
new file mode 100644
index 0000000000000..1987181239454
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables.md
@@ -0,0 +1,16 @@
+---
+title: "Mutations & Query variables"
+metaTitle: "Integrate Mutations with Query Variables | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "Integrate GraphQL Mutations in React Native app to create new personal todos using the Mutation Component and handle loading and error states"
+---
+
+Now, let's add the ability for our users to create new todos and add them to
+their task list.
+
+We will learn the following concepts:
+
+- Creating a GraphQL mutation
+- Using the `` component
+- Capturing loading/finished/error states
+
+Let's get started!
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables/1-create-todo.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables/1-create-todo.md
new file mode 100644
index 0000000000000..0f6b021818d77
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables/1-create-todo.md
@@ -0,0 +1,32 @@
+---
+title: "Create todos - mutation"
+metaTitle: "Mutation to create todos | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "GraphQL Mutation to create new personal todos. Try the mutation in GraphiQL, passing the Authorization token to get authenticated results."
+---
+
+import YoutubeEmbed from "../../src/YoutubeEmbed.js";
+
+In this part of the tutorial, you will learn how to create new todos by using GraphQL Mutations.
+
+Let's define a graphql query to do a mutation into todos.
+
+```graphql
+mutation ($todo: String!, $isPublic: Boolean!) {
+ insert_todos(objects: {title: $todo, is_public: $isPublic}) {
+ affected_rows
+ returning {
+ id
+ title
+ created_at
+ is_completed
+ }
+ }
+}
+```
+
+You will also need to pass in the values for the variables.
+
+[Try](https://learn.hasura.io/graphql/graphiql) this mutation in GraphiQL against the application database to see what the response looks like.
+
+Let's now integrate this graphql mutation into our react app.
+
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables/2-query-variables.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables/2-query-variables.md
new file mode 100644
index 0000000000000..f732749a99990
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables/2-query-variables.md
@@ -0,0 +1,50 @@
+---
+title: "Query Variables"
+metaTitle: "Query Variables | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "GraphQL Mutation to create new personal todos by parameterizing with query variables."
+---
+
+import GithubLink from "../../src/GithubLink.js";
+
+What is a variable in GraphQL context?
+-------------------------------------
+GraphQL has a first-class way to factor dynamic values out of the query, and pass them as a separate dictionary. These values are called variables. In our case, we are defining the object to be inserted as a mutation.
+
+So let's define the graphql mutation to be used.
+
+Open `src/GraphQLQueries.re` and add the following code:
+
+
+
+```javascript
+// GraphQL mutation for inserting a todo
+module InsertMyTodo = [%graphql
+ {|
+ mutation ($todo: String!, $isPublic: Boolean!) {
+ insert_todos(objects: {title: $todo, is_public: $isPublic}) {
+ affected_rows
+ returning {
+ id
+ title
+ created_at
+ is_completed
+ }
+ }
+ }
+ |}
+];
+module InsertMyTodoMutation = ReasonApollo.CreateMutation(InsertMyTodo);
+
+```
+
+In the above code,
+
+- `InsertMyTodo` is a mutation module built from plain query string using `graphql_ppx`.
+- `InsertMyTodoMutation` is a typed React component that provides the `mutation` function (a function that performs the given mutation) in its render prop function so that it can be utilised by the events. It is similar to the `` component in `react-apollo`.
+
+
+What does this mutation do?
+---------------------------
+The mutation inserts into `todos` table with the `objects` variable being passed as one todo type.
+
+Awesome! We have defined our first graphql mutation. In the next section, we will pass the query variables to this mutation and finally integrate this mutation with our `insert todo` functionality.
diff --git a/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables/3-create-mutation.md b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables/3-create-mutation.md
new file mode 100644
index 0000000000000..bc06bd9dbad75
--- /dev/null
+++ b/community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/content/mutations-variables/3-create-mutation.md
@@ -0,0 +1,147 @@
+---
+title: "Run mutation, update cache"
+metaTitle: "Apollo Mutation Component | GraphQL ReasonML React Apollo Tutorial"
+metaDescription: "We will see how to use the Apollo Client Mutation component in ReasonReact app as an example to insert new data and update cache locally using refetchQueries."
+---
+
+import YoutubeEmbed from "../../src/YoutubeEmbed.js";
+
+Now let's do the integration part.
+
+Firstly, we need to handle the state of the form's input element. We will use React's useReducer hook for that. Add the following code to `src/todo/TodoInput.re`.
+
+
+
+```javascript
++type state = {
++ text: string
++};
+
++type action = HandleTextChange(string);
+
+[@react.component]
+let make = (~isPublic: bool) => {
++ let (state, dispatch) = React.useReducer((state, action) => {
++ let HandleTextChange(text) = action;
++ { text: text }
++ }, { text: "" });
+
+}
+```
+
+Now, we have the text value of the input element in the state variable called text. Next, lets pass this text value from state and the `isPublic` value from the props as query variables to our Mutation.
+
+## Passing query variables
+
+To add query variables to the mutation, lets use the `make` method exposed by the query module `InsertMyTodo` that we defined in the previous section. Just add the following code before returning the JSX.
+
+```js
+let insertTodoMutation = GraphQLQueries.InsertMyTodo.make(~todo=state.text, ~isPublic=isPublic, ());
+```
+
+Now you can access the variables by using `variables` field in the `insertTodoMutation` object like `insertTodoMutation##variables`.
+
+## Firing the mutation
+
+Let us wrap our JSX with the `InsertMyTodoMutation` component that we defined in the last section. This component provides the `mutate` function as an argument to its render prop function. We can use this `mutate` function in the `onSubmit` handler of our form.
+
+```
+type state = {
+ text: string
+};
+
+type action = HandleTextChange(string);
+
+[@react.component]
+let make = (~isPublic: bool) => {
+ let (state, dispatch) = React.useReducer((_, action) => {
+ let HandleTextChange(text) = action;
+ { text: text }
+ }, { text: "" });
++ let insertTodoMutation = GraphQLQueries.InsertMyTodo.make(~todo=state.text, ~isPublic=isPublic, ());
++
++ ...{
++ (mutate, _) => {
+
++ }
++ }
++
+};
+```
+
+Now that we have the `mutate` function in our scope, let us call this function in the `onSubmit` handler of the `form`.
+
+```
+-