> For the complete documentation index, see [llms.txt](https://deskpro.gitbook.io/deskpro-apps/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deskpro.gitbook.io/deskpro-apps/app-client-dpapp/untitled.md).

# 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 %}