# Source: https://docs.hypermode.com/dgraph/guides/message-board-app/graphql/react-graphql-queries.md

# GraphQL Queries

> GraphQL queries are about starting points and traversals. From simple queries to deep filters, dive into the queries use in the message board app.

<Info>
  We're overhauling Dgraph's docs to make them clearer and more approachable. If
  you notice any issues during this transition or have suggestions, please
  [let us know](https://github.com/hypermodeinc/docs/issues).
</Info>

As we learned earlier, GraphQL queries are about starting points and traversals.
For example, a query can start by finding a post, and then traversing edges from
that post to find the author, category, comments and authors of all the
comments.
<img src="https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/post2-search-in-graph.png?fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=a70f72dbc0ff9cce48c0b87da309e27e" alt="query a post and follow relationships" width="3200" height="1800" data-path="images/dgraph/guides/message-board-app/post2-search-in-graph.png" srcset="https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/post2-search-in-graph.png?w=280&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=8ec080cbd03f370f92a435ee017d7125 280w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/post2-search-in-graph.png?w=560&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=ca05f84ff75dcd5b2e0f3c70d2b79a5c 560w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/post2-search-in-graph.png?w=840&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=7ce422d108ea5f89d8b7ce446109606b 840w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/post2-search-in-graph.png?w=1100&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=b3d6081566bd87736c29a5b3fa9d9304 1100w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/post2-search-in-graph.png?w=1650&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=21994d953bcb2558a7721fbf4981e8c9 1650w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/post2-search-in-graph.png?w=2500&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=fdcd38250e93b03fe862180b571e00bc 2500w" data-optimize="true" data-opv="2" />

## Dgraph Cloud Query

In the API that Dgraph Cloud built from the schema, queries are named for the
types that they let you query: `queryPost`, `queryUser`, etc. A query starts
with, for example, `queryPost` or by filtering to some subset of posts like
`queryPost(filter: ...)`. This defines a starting set of nodes in the graph.
From there, your query traverses into the graph and returns the subgraph it
finds. You can try this out with some example queries in the next section.

## Simple Queries

The simplest queries find some nodes and only return data about those nodes,
without traversing further into the graph. The query `queryUser` finds all
users. From those nodes, we can query the usernames as follows:

```graphql
query {
  queryUser {
    username
  }
}
```

The result will depend on how many users you have added. If it's just the
`User1` sample, then you'll get a result like the following:

```json
{
  "data": {
    "queryUser": [
      {
        "username": "User1"
      }
    ]
  }
}
```

That says that the `data` returned is about the `queryUser` query that was
executed and here's an array of JSON about those users.

## Query by identifier

Because `username` is an identifier, there's also a query that finds users by
ID. To grab the data for a single user if you already know their ID, use the
following query:

```graphql
query {
  getUser(username: "User1") {
    username
  }
}
```

This time the query returns a single object, instead of an array.

```json
{
  "data": {
    "getUser": {
      "username": "User1"
    }
  }
}
```

## Query with traversal

Let's do a bit more traversal into the graph. In the example app's UI you can
display the homepage of a user. You might need to find a user's data and some of
their posts.

<img src="https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/user1-post-search-in-graph.png?fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=f3811b23540859efc0ca548ec4db437e" alt="Graph schema sketch" width="3200" height="1800" data-path="images/dgraph/guides/message-board-app/user1-post-search-in-graph.png" srcset="https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/user1-post-search-in-graph.png?w=280&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=43bd56502f257ef638670caa2a3100c2 280w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/user1-post-search-in-graph.png?w=560&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=099bfa1e314d1428ad5a0c989fe303c4 560w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/user1-post-search-in-graph.png?w=840&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=3d2e061e0d743c7d19b68598eeef818b 840w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/user1-post-search-in-graph.png?w=1100&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=8c0da90d7652091259c247b5d2aa19ed 1100w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/user1-post-search-in-graph.png?w=1650&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=06e859b697a579ae6af7ca741c91a4ab 1650w, https://mintcdn.com/hypermode/UzHAxAOBRpNLwtpT/images/dgraph/guides/message-board-app/user1-post-search-in-graph.png?w=2500&fit=max&auto=format&n=UzHAxAOBRpNLwtpT&q=85&s=1d928b00c19185cb4dbb148bc543c3d1 2500w" data-optimize="true" data-opv="2" />

Using GraphQL, you can get the same data using the following query:

```graphql
query {
  getUser(username: "User1") {
    username
    displayName
    posts {
      title
    }
  }
}
```

This query finds `User1` as the starting point, grabs the `username` and
`displayName`, and then traverses into the graph following the `posts` edges to
get the titles of all the user's posts.

A query could step further into the graph, finding the category of every post,
like this:

```graphql
query {
  getUser(username: "User1") {
    username
    displayName
    posts {
      title
      category {
        name
      }
    }
  }
}
```

Or, a query could traverse even deeper to get the comments on every post and the
authors of those comments, as follows:

```graphql
query {
  getUser(username: "User1") {
    username
    displayName
    posts {
      title
      category {
        name
      }
      comments {
        text
        author {
          username
        }
      }
    }
  }
}
```

## Querying with filters

To render the app's home screen, the app need to find a list of posts. Knowing
how to find starting points in the graph and traverse with a query means we can
use the following query to grab enough data to display a post list for the home
screen:

```graphql
query {
  queryPost {
    id
    title
    author {
      username
    }
    category {
      name
    }
  }
}
```

We'll also want to limit the number of posts displayed, and order them. For
example, we probably want to limit the number of posts displayed (at least until
the user scrolls) and maybe order them from newest to oldest.

This can be accomplished by passing arguments to `queryPost` that specify how we
want the result sorted and paginated.

```graphql
query {
  queryPost(order: { desc: datePublished }, first: 10) {
    id
    title
    author {
      username
    }
    category {
      name
    }
  }
}
```

The UI for your app also lets users search for posts. To support this, you added
`@search(by: [term])` to your schema so that Dgraph Cloud would build an API for
searching posts. The nodes found as the starting points in `queryPost` can be
filtered down to match only a subset of posts that have the term "graphql" in
the title by adding `filter: { title: { anyofterms: "graphql" }}` to the query,
as follows:

```graphql
query {
  queryPost(
    filter: { title: { anyofterms: "graphql" } }
    order: { desc: datePublished }
    first: 10
  ) {
    id
    title
    author {
      username
    }
    category {
      name
    }
  }
}
```

## Querying with deep filters

The same filtering works during a traversal. For example, we can combine the
queries we have seen so far to find `User1`, and then traverse to their posts,
but only return those posts that have "graphql" in the title.

```graphql
query {
  getUser(username: "User1") {
    username
    displayName
    posts(filter: { title: { anyofterms: "graphql" } }) {
      title
      category {
        name
      }
    }
  }
}
```

Dgraph Cloud builds filters and ordering into the GraphQL API depending on the
types and the placement of the `@search` directive in the schema. Those filters
are then available at any depth in a query, or in returning results from
mutations.

## Queries used in the message board app

The message board app used in this tutorial uses a variety of queries, some of
which are described and shown below:

The following query gets a user's information:

```graphql
query getUser($username: String!) {
  getUser(username: $username) {
    username
    displayName
    avatarImg
  }
}
```

The following query gets all categories. It is used to render the categories
selector on the main page, and to allow a user to select categories when adding
new posts:

```graphql
query {
  queryCategory {
    id
    name
  }
}
```

The followings gets an individual post's data when a user navigates to the
post's URL:

```graphql
query getPost($id: ID!) {
  getPost(id: $id) {
    id
    title
    text
    datePublished
    author {
      username
      displayName
      avatarImg
    }
    comments {
      text
      author {
        username
        displayName
        avatarImg
      }
    }
  }
}
```

Next, you'll [learn how to build your app's React UI](../react-ui/index)