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:

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.

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 and is roughly equivalent to something like:

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.

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.

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.