# queryContext

Source: https://developers.inkdrop.app/states/query-context

An [app state](https://developers.inkdrop.app/guides/flux-architecture) of query context which represents currently used query for showing the content of the note list.
You can obtain the `queryContext` state and integrate it with React components.

---

## Data Structure

- **mode** (string)

  The query mode which takes one of "all", "book", "tag", "status", "template", "trash", and "search".

  Following sections describe data structure for each mode.
  ### `"all"`: All Notes
  - **filterKeyword** (string)

    A filter keyword to filter note list items.
  ### `"book"`: Show notes in a notebook
  - **bookId** (string)

    A notebook ID to query.
  - **tagId** (string)

    A tag ID to filter.
  - **status** (string)

    A status to filter.
  - **filterKeyword** (string)

    A filter keyword to filter note list items.
  - **includeChildren** (boolean)

    Whether to include notes in child notebooks.
  ### `"tag"`: Show notes with a tag
  - **tagId** (string)

    A tag ID to query.
  - **filterKeyword** (string)

    A filter keyword to filter note list items.
  ### `"status"`: Show notes with a status
  - **status** (string)

    A status to query.
  - **filterKeyword** (string)

    A filter keyword to filter note list items.
  ### `"template"`: Show note templates
  - **bookId** (string)

    The templates notebook ID.
  - **filterKeyword** (string)

    A filter keyword to filter note list items.
  ### `"trash"`: Show notes in trash
  - **bookId** (string)

    The trash notebook ID.
  ### `"search"`: Show notes that match keywords and conditions
  - **searchKeyword** (string)

    The search keyword to query.

Get the `queryContext` state manually:

```js
const { queryContext } = env.store.getState()
```

Connect the state with your React component:

```js
import { useSelector } from 'react-redux'
const selector = ({ queryContext }) => queryContext
const MyComponent = props => {
  const queryContext = useSelector(selector)
  // render
}
```

An example state for "book" mode:

```js
{
  "mode": "book",
  "filterKeyword": "",
  "bookId": "book:uP2kEsahM",
  "includeChildren": false
}
```