This how-to guide follows on from using state to store notes. We advise you to read this guide before continuing.

Using an external API

The first step is to update our manifest to configure our app's settings and proxy rules. We're going to use settings to store and pass an API key to our outbound requests via the proxy.

Ok, so let's modify our app manifest. Open the manifest.json file in the root of your app project and make the following changes:

{
  // ...

  "version": "1.0.1",

  // ...
	
  "settings": {
    "api_key": {
      "title": "API Key",
      "description": "Our notes API key",
      "type": "string",
      "isRequired": true,
      "isBackendOnly": true
    }
  },
	
  // ...
	
  "proxy": {
    "whitelist": [{
      "url": "https://example.com/api/.*",
      "methods": ["GET", "PUT"],
      "timeout": 10
    }]
  }
}
 copy

We've done three things here, added a backend only setting named "api_key", added a proxy role for our API and incremented the version number of the app. Incrementing the version number as we'll need to build and upload our app (as we did earler) to make these changes take effect.

Next, we'll need to build and package our app again.

yarn build:package
 copy

Once you have created the updated app package zip file found in ./build, upload it via Deskpro apps admin as we did earlier. Now, navigate to the insalled app in Deskpro admin and click on it. When you click on "Settings" for the app, you should now see that a new mandatory setting field has appeared called "API Key".

This is where you would store your API key to be used by the apps proxy.

Update our App Code

Next, we need to update our app code to use an external API via our apps proxy. To do this, open Main.tsx and make the following changes:

import { FC, useState } from "react";
import {
  Button, proxyFetch,
  Stack,
  TextArea, useDeskproAppClient,
  useInitialisedDeskproAppClient
} from "@deskpro/app-sdk";

export const Main: FC = () => {
  const { client } = useDeskproAppClient();

  const [notes, setNotes] = useState<string>("");

  useInitialisedDeskproAppClient((client) => {
    client.registerElement("myRefreshButton", {
      type: "refresh_button",
    });
  });

  useInitialisedDeskproAppClient((client) => {

    // Get our proxy-authorised fetch() method
    proxyFetch(client).then((fetch) => {

      // Get our notes
      fetch("https://example.com/api/notes?key=__api_key__").then((res: Response) => {

        // Get notes from the response
        res.text().then((data: string) => setNotes(data));

      });

    });
  });

  const save = () => {
    // Check if the Deskpro app client is initialised
    if (!client) {
      return;
    }

    // Get our proxy-authorised fetch() method
    proxyFetch(client).then((fetch) => {

      // Persist notes
      fetch("https://example.com/api/notes?key=__api_key__", {
        method: "PUT",
        body: notes,
      });

    });

  };

  return (
    <Stack gap={4} vertical>
      <label>
        Notes
        <TextArea
          rows={4}
          onChange={(e) => setNotes(e.target.value)}
          value={notes}
        />
      </label>
      <Button text="Save" onClick={() => save()} />
    </Stack>
  );
};
 copy

There's quite a bit of new code here, so let's break it down.

• For each API request, we must first get an "authorised" fetch() client to make the request

• We include the "__api_key__" palceholder in our API endpoint URL (this will be replaced with the actual setting value by the apps proxy)

• We make the requests and handle the responses in the standard fetch() way.

That's it, we can now store and recall notes via an external API with basic authjorization.