diff --git a/dgraph/quickstart.mdx b/dgraph/quickstart.mdx
index 109c3273..9326365e 100644
--- a/dgraph/quickstart.mdx
+++ b/dgraph/quickstart.mdx
@@ -7,186 +7,467 @@ import DgraphWIP from "/snippets/dgraph-wip.mdx"
+
+
+
+Open [`hypermode.com/go`](https://hypermode.com/go) in your web browser and sign
+in to Hypermode to create your account.
+
+After signing in you'll be prompted to choose a name for your workspace.
+
+
+
+Enter a name for your workspace and then select **Create workspace**.
+
+
+
+
+
+After creating your Hypermode workspace you'll be prompted to create your first
+graph.
+
+
+
+Enter a name for your graph and choose the hosting location, then select
+**Create graph**.
+
+
+
+
+
+Once your graph is created you'll see the graph details including its status,
+connection string, and API key.
+
+
+
+We'll use the Dgraph connection string and the API key to connect to our graph
+via Dgraph clients such as Ratel or language SDKs.
+
+Click on the copy icon next to the connection string to copy the Dgraph
+connection string.
+
+
+
+
+
+Ratel is a web-based Dgraph client for interacting with your graph. We'll use
+Ratel to execute DQL queries and update the graph schema.
+
+Navigate to [ratel.hypermode.com](https://ratel.hypermode.com) and paste the
+Dgraph connection string you copied in the previous step into the "Dgraph Conn
+String" text box in Ratel then select **Connect** to verify the connection and
+then select **Continue** to access the Ratel console.
+
+
+
+The Ratel console is where we can execute DQL queries and mutations and view the
+results of these operations, including visualizing graph data.
+
+
+
+Now we're ready to add data to our graph.
+
+
+
+
+
+## Add data to the graph with a mutation
+
+Graph databases like Dgraph use a data model called the **property graph**,
+which consists of [**nodes**](./glossary#node),
+[**relationships**](./glossary#relationship) that connect nodes, and key-value
+pair **properties** that describe nodes and relationships.
+
+With Dgraph, we use **triples** to describe each piece of our graph, which when
+combined together make up our property graph. Triples are composed of a subject,
+predicate, and object.
+
+```text
+ .
+```
+
+The subject always refers to a [node](./glossary#node),
+[predicates](./glossary#predicate) can be a relationship or property, and the
+object can be a node or property value. You can read more about triples in the
+[RDF section of the docs](/dgraph/dql/rdf), but for now let's move on to
+creating data in Dgraph using triples.
+
+Let's create data about movies, characters, and their genres. Here's the
+property graph representation of the data we'll create:
+
+
+
+
+
The create, update, and delete operations in Dgraph are called mutations.
-Ratel makes it easier to run queries and mutations.
-
-1. In the **Console** page, select **Mutate** tab.
-
-2. Paste the following:
-
- ```dql
- {
- "set": [
- {
- "name":"Star Wars: Episode IV - A New Hope",
- "release_date": "1977-05-25",
- "director": {
- "name": "George Lucas",
- "dgraph.type": "Person"
- },
- "starring" : [
- {
- "name": "Luke Skywalker"
- },
- {
- "name": "Princess Leia"
- },
- {
- "name": "Han Solo"
- }
- ]
- },
- {
- "name":"Star Trek: The Motion Picture",
- "release_date": "1979-12-07"
- }
- ]
- }
- ```
-
- The input data is in JSON Format. Dgraph also supports [RDF](./glossary#RDF)
- notation.
-
- The sample JSON data is an array of two movies with some attributes. These
- are stored as [Nodes](./glossary#node) in Dgraph.
-
- The "Star Wars" movie has a `director` field which is an JSON object and a
- `starring` field which is an array of JSON objects. Each object is also
- stored as a Node in Dgraph . The `director` and `starring` are stored as
- [relations](./glossary#relation).
-
-3. Click **Run** to execute the mutation.
-
- View the Dgraph response in the JSON tab:
-
- ```dql
- {
- "data": {
- "code": "Success",
- "message": "Done",
- "queries": null,
- "uids": {
- "dg.1119451236.100": "0xfffd8d726c1de414",
- "dg.1119451236.101": "0xfffd8d726c1de40f",
- "dg.1119451236.102": "0xfffd8d726c1de410",
- "dg.1119451236.103": "0xfffd8d726c1de411",
- "dg.1119451236.104": "0xfffd8d726c1de412",
- "dg.1119451236.99": "0xfffd8d726c1de413"
- }
- }, ...
- ```
+In the Ratel **Console** page, select the **Mutate** tab, then paste the
+following mutation:
+
+```dql
+{
+ set {
+
+ _:scifi "Genre" .
+ _:scifi "Sci-Fi" .
+
+ _:starwars "Movie" .
+ _:starwars "Star Wars: Episode IV - A New Hope" .
+ _:starwars "1977-05-25"^^ .
+
+
+ _:startrek "Movie" .
+ _:startrek "Star Trek: The Motion Picture" .
+ _:startrek "1979-12-07"^^ .
+
+ _:george "Person" .
+ _:george "George Lucas" .
+
+ _:luke "Character" .
+ _:luke "Luke Skywalker" .
+
+ _:leia "Character" .
+ _:leia "Princess Leia" .
+
+ _:han "Character" .
+ _:han "Han Solo" .
+
+ _:starwars _:scifi .
+ _:startrek _:scifi .
+
+ _:starwars _:george .
+
+ _:starwars _:luke .
+ _:starwars _:leia .
+ _:starwars _:han .
+
+ }
+}
+```
+
+The preceding DQL mutation uses
+[N-Quad RDF format](/dgraph/dql/rdf#n-quads-format) to define the triples that
+make up the property graph we want to create.
+
+
+
+
+
+Select **Run** to execute the mutation. In the JSON tab we can see the result of
+this mutation.
+
+```json
+{
+ "data": {
+ "code": "Success",
+ "message": "Done",
+ "queries": null,
+ "uids": {
+ "george": "0x4",
+ "han": "0x7",
+ "leia": "0x6",
+ "luke": "0x5",
+ "scifi": "0x1",
+ "startrek": "0x3",
+ "starwars": "0x2"
+ }
+ }, ...
+```
Dgraph displays the universal identifiers ([UID](/dgraph/glossary#uid)) of the
nodes that were created.
-## Step 3: First query
+
+
-1. In the **Console** page, select **Query** tab and run this query:
+## Query the graph
- ```dql
- {
- movies(func: has(release_date)) {
- name
- director { name }
- starring { name }
- }
- }
- ```
+
+
- The query lists all movies that have a `release_date` and for each, it looks
- for the `director` and `starring` relations and provides the name attribute
- of the related nodes if any.
+In the **Console** page, select the **Query** tab and run this query:
-2. In the response panel, select **Graph**, to view a Graph output:
+```dql
+{
+ movies(func: type(Movie)) {
+ Movie.title
+ Movie.genre {
+ Genre.name
+ }
+ Movie.director {
+ Person.name
+ }
+ Movie.character {
+ Character.name
+ }
+ }
+}
+```
+
+This query searches for all `Movie` nodes as the start of the traversal using
+the `type(Movie)` function to define the starting point of our query traversal,
+then finds any genres, directors, and characters connected to each movie.
+
+
+
+
+
+In Ratel's JSON tab we can view the results of this query as JSON:
+
+```JSON
+{
+ "data": {
+ "movies": [
+ {
+ "Movie.title": "Star Wars: Episode IV - A New Hope",
+ "Movie.genre": [
+ {
+ "Genre.name": "Sci-Fi"
+ }
+ ],
+ "Movie.director": [
+ {
+ "Person.name": "George Lucas"
+ }
+ ],
+ "Movie.character": [
+ {
+ "Character.name": "Luke Skywalker"
+ },
+ {
+ "Character.name": "Princess Leia"
+ },
+ {
+ "Character.name": "Han Solo"
+ }
+ ]
+ },
+ {
+ "Movie.title": "Star Trek: The Motion Picture",
+ "Movie.genre": [
+ {
+ "Genre.name": "Sci-Fi"
+ }
+ ]
+ }
+ ]
+ }
+}
+```
- 
+In the response panel, Select **Graph** to view a graph visualization of the
+results of our query:
-## Step 4: Alter schema
+
-Alter the schema to add indexes on some of the data so queries can use term
-matching, filtering, and sorting.
+
-1. In the **Schema** page, select **Predicates**. Dgraph creates and displays
- the predicates `name`, `release-date`,`director` and `starring`. A
- [predicate](/dgraph/glossary#predicate) is Dgraph internal representation of
- a node attribute or a relation.
-2. Select the `name` predicate. Ratel displays details about the predicate type
- and indexes.
-3. Select **index** and select **term** for `name` predicate.
-4. Click **Update** to apply the index.
+
-
+## Update the graph schema and query using an index
-Set the index for the `release_date`:
+The previous query used the `type()` function to find the starting point of our
+graph traversal. We can use more complex functions to filter by string
+comparison operator, and others, however to use these function we must first
+update the graph schema to create an index on the predicates we want to use in
+these functions.
-1. Select `release_date` predicate.
-2. Change the type to **dateTime**
-3. Select **index** and choose **year** for the index type.
-4. Click **Update** to apply the index on the `release-date` predicate.
+The [function documentation](/dgraph/dql/functions/) specifies which kind of
+index is needed for each function.
-## Step 5: Queries using indexes
+We'll use Ratel to alter the schema to add indexes on some of the data so
+queries can use term matching, filtering, and sorting.
-Let's get the movies having the term "Star" in their name and released
+
+
+
+
+In Ratel's **Schema** page, select **Predicates**. Here we can see all the
+predicates used in the graph. A [predicate](/dgraph/glossary#predicate) is
+Dgraph's internal representation of a node, property, or relationship.
+
+Select the `Movie.title` predicate. Ratel displays details about the predicate
+type and indexes.
+
+Change the type to **string** then select **index** and select **term** for the
+`Movie.title` predicate, then select **Update** to apply the index.
+
+
+
+
+
+
+
+Next, we'll create an index for the `Movie.release_date` predicate.
+
+Select the `Movie.release_date` predicate. Change the type to **dateTime**.
+Select **index** and choose **year** for the index tokenizer. Click **Update**
+to apply the index on the `release-date` predicate.
+
+
+
+
+
+
+
+Now let's find all movies with the term "Star" in their title and released
before 1979.
-In the **Console** page select **Query** tab and run this query:
+In the **Console** page select the **Query** tab and run this query:
```dql
{
- me(func: allofterms(name, "Star"), orderasc: release_date) @filter(lt(release_date, "1979")) {
- name
- release_date
- revenue
- running_time
- director {
- name
+ movieSearch(func: allofterms(Movie.title, "Star"), orderasc: Movie.release_date) @filter(lt(Movie.release_date, "1979")) {
+ Movie.title
+ Movie.release_date
+ Movie.director {
+ Person.name
}
- starring (orderasc: name) {
- name
+ Movie.character (orderasc: Character.name) {
+ Character.name
}
}
}
```
-Observe the JSON result and the graph result.
+We can see the JSON result in the JSON tab:
-You can play with the release date and the search terms conditions to see Dgraph
+```JSON
+{
+ "data": {
+ "movieSearch": [
+ {
+ "Movie.title": "Star Wars: Episode IV - A New Hope",
+ "Movie.release_date": "1977-05-25T00:00:00Z",
+ "Movie.director": [
+ {
+ "Person.name": "George Lucas"
+ }
+ ],
+ "Movie.character": [
+ {
+ "Character.name": "Han Solo"
+ },
+ {
+ "Character.name": "Luke Skywalker"
+ },
+ {
+ "Character.name": "Princess Leia"
+ }
+ ]
+ }
+ ]
+ }
+}
+```
+
+And also view the graph visualization of the result in the Graph tab:
+
+
+
+Try changing the release date and the search terms conditions to see Dgraph
search and filtering in action.
-In these five steps, you set up Dgraph, added some data, visualized it as a
-graph, added indexes and queried the data .
+
+
+
+## Reverse relationship query
+
+
+
+
+
+In the previous queries we traversed from the movie node to its connected genre
+node, but what if we want to find all movies connected to a genre node? In order
+to traverse from a genre node to a movie node we need to explicitly define the
+`Movie.genre` predicate as a reverse relationship.
+
+To define a reverse relationship for the `Movie.genre` predicate we'll return to
+the Schema page in Ratel, select the `Movie.genre` predicate and toggle the
+**reverse** checkbox. Then select **Update** to apply this schema change.
+
+
+
+
+
+
+
+In a DQL query the `~` operator is used to specify a reverse relationship. To
+traverse from a genre node to a movie node we use the syntax `~Movie.genre`.
+
+In this query we find all movies connected to the "Sci-Fi" genre:
+
+```dql
+{
+ genreSearch(func: type(Genre)) {
+ Genre.name
+ movies: ~Movie.genre {
+ Movie.title
+ }
+ }
+}
+```
+
+Note that we can also alias the field name to "movies" in our result JSON using
+the syntax `movies: ~Movie.genre`.
+
+```json
+{
+ "data": {
+ "genreSearch": [
+ {
+ "Genre.name": "Sci-Fi",
+ "movies": [
+ {
+ "Movie.title": "Star Wars: Episode IV - A New Hope"
+ },
+ {
+ "Movie.title": "Star Trek: The Motion Picture"
+ }
+ ]
+ }
+ ]
+ }
+```
+
+
+
+
+
+In this quick start we created a new graph instance using Dgraph on Hypermode,
+added data, queried the graph, visualized the results, and updated the schema of
+our graph.
## Where to go from here
-- A wider range of queries can also be found in the
- [Query Language](/dgraph/dql/query) reference.
+- Learn more about using [DQL](/dgraph/dql/query) to query your graph.
- Go to [Clients](/dgraph/sdks/overview) to see how to communicate with Dgraph
from your app.
+- Learn how to build intelligent applications using Dgraph and Modus such as
+ [natural language search.](https://docs.hypermode.com/semantic-search)
## Need help
-- Please use [discuss.dgraph.io](https://discuss.dgraph.io) for questions,
- issues, feature requests, and discussions.
+- Join the [Hypermode Discord server](https://discord.hypermode.com) for
+ questions, issues, feature requests, and discussions.
diff --git a/images/dgraph/quickstart/create-graph-2.png b/images/dgraph/quickstart/create-graph-2.png
new file mode 100644
index 00000000..97c32110
Binary files /dev/null and b/images/dgraph/quickstart/create-graph-2.png differ
diff --git a/images/dgraph/quickstart/create-graph.png b/images/dgraph/quickstart/create-graph.png
new file mode 100644
index 00000000..e0723572
Binary files /dev/null and b/images/dgraph/quickstart/create-graph.png differ
diff --git a/images/dgraph/quickstart/create-workspace.png b/images/dgraph/quickstart/create-workspace.png
new file mode 100644
index 00000000..47b00d96
Binary files /dev/null and b/images/dgraph/quickstart/create-workspace.png differ
diff --git a/images/dgraph/quickstart/data-model.png b/images/dgraph/quickstart/data-model.png
new file mode 100644
index 00000000..28a6a467
Binary files /dev/null and b/images/dgraph/quickstart/data-model.png differ
diff --git a/images/dgraph/quickstart/graph-details.png b/images/dgraph/quickstart/graph-details.png
new file mode 100644
index 00000000..eda1a550
Binary files /dev/null and b/images/dgraph/quickstart/graph-details.png differ
diff --git a/images/dgraph/quickstart/query-result-1.png b/images/dgraph/quickstart/query-result-1.png
new file mode 100644
index 00000000..21ee216b
Binary files /dev/null and b/images/dgraph/quickstart/query-result-1.png differ
diff --git a/images/dgraph/quickstart/query-result-2.png b/images/dgraph/quickstart/query-result-2.png
new file mode 100644
index 00000000..2f12224c
Binary files /dev/null and b/images/dgraph/quickstart/query-result-2.png differ
diff --git a/images/dgraph/quickstart/ratel-connection-string.png b/images/dgraph/quickstart/ratel-connection-string.png
new file mode 100644
index 00000000..5b816efb
Binary files /dev/null and b/images/dgraph/quickstart/ratel-connection-string.png differ
diff --git a/images/dgraph/quickstart/ratel-overview.png b/images/dgraph/quickstart/ratel-overview.png
new file mode 100644
index 00000000..86f2927f
Binary files /dev/null and b/images/dgraph/quickstart/ratel-overview.png differ
diff --git a/images/dgraph/quickstart/schema-date.png b/images/dgraph/quickstart/schema-date.png
new file mode 100644
index 00000000..c7b5b023
Binary files /dev/null and b/images/dgraph/quickstart/schema-date.png differ
diff --git a/images/dgraph/quickstart/schema-reverse.png b/images/dgraph/quickstart/schema-reverse.png
new file mode 100644
index 00000000..7a252bc0
Binary files /dev/null and b/images/dgraph/quickstart/schema-reverse.png differ
diff --git a/images/dgraph/quickstart/schema-title.png b/images/dgraph/quickstart/schema-title.png
new file mode 100644
index 00000000..66339f0b
Binary files /dev/null and b/images/dgraph/quickstart/schema-title.png differ
diff --git a/styles/config/vocabularies/general/accept.txt b/styles/config/vocabularies/general/accept.txt
index 7ba35f61..9803b44c 100644
--- a/styles/config/vocabularies/general/accept.txt
+++ b/styles/config/vocabularies/general/accept.txt
@@ -74,6 +74,7 @@ REST|[Rr]est
Scattergories
SDK|sdk
TLS
+tokenizer
URL|url
UTC
urql
@@ -102,7 +103,7 @@ MinIO
NoConflict
pprof
pydgraph
-Ratel
+[Rr]atel
[Ss]harding
[Ss]harded
S3