# The App Client (dpapp)

The *app client* is a central object available to your app that enables you to interact with Deskpro itself. This includes things like fetching data, saving data, interacting with the main page, and using the API.

The app client has a lot of functionality and you might only be using a very part of it. The following pages will guide you through each specific feature of the client.

## Getting the client

There are three ways you can get the dpapp client. Each way gives you the same dpapp instance; the three different ways exist just to make it easy for whatever use-case you might be using it in.

### Props on your main `App` component

By default, the app client is passed-in to your main `App` component as props:

```jsx
import React from 'react';
import PropTypes from 'prop-types';

class App extends React.Component {
  static propTypes = {
    dpapp: PropTypes.object.isRequired,
  };
  render() {
    const myAppId = this.props.dpapp.appId;
    return (<strong>AppID: {myAppId}</strong>);
  }
} 
```

### `connectDpApp(Component)`

It's recommended you avoid passing `dpapp` down your component tree. Instead, use the `connectDpApp()` function to inject `dpapp` into your component as a prop.

```jsx
import { connectDpApp } from '@deskpro/apps-sdk'; 
const ExampleComponent = ({ dpapp }) => (
    <strong>AppID: {dpapp.appId}</strong>
)

export default connectDpApp(ExampleComponent);
```

Under-the-hood this uses the [React context API](https://reactjs.org/docs/context.html#provider) and is roughly equivalent to something like:

```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { DpAppContext } from '@deskpro/apps-sdk'; 

const ExampleComponent = ({ dpapp }) => (
    <strong>AppID: {dpapp.appId}</strong>
)

const ConnectedExampleComponent = (...props) => (
  <DpAppContext.Consumer>
    { dpapp => <ExampleComponent dpapp={dpapp} {...props} /> }
  </DpAppContext.Consumer>
)

export default ConnectedExampleComponent;
```

### `getDpApp()`

Finally, you can always get `dpapp` via the `getDpApp()` function.

```javascript
import { getDpApp } from '@deskpro/apps-sdk'; 

function myFunction() {
  const dpapp = getDpApp();
}
```

This is useful for non-component code. For example, maybe you have an API access layer; when it comes to making HTTP requests through the apps proxy, you'll need to use the dpapp client.

{% hint style="info" %}
When you're building components, it's good practice to use `connectDpApp` to inject dpapp into your components instead of using `getDpApp`. This is similar to the separation between presentational and container components [made popular by Redux](https://redux.js.org/basics/usagewithreact).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deskpro.gitbook.io/deskpro-apps/app-client-dpapp/untitled.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.