Pass input to functions

In many cases, you need to pass dynamic content to your app functions to perform a specific task based on it. This guide will explain how to pass data to your function from within your app and how to process it accordingly.

Send data to your function

Sending data to your app function is straightforward. To send the data, you can use the call function from the @dynatrace-sdk/app-utils package. The first parameter is the function's name, and the second is the payload you want to send.

In the following example, we're sharing types between app function and the function call for end-to-end type safety and then calling the app function:

shared/types.ts

export type Input = {
  id: string;
  name: string;
  age: number;
};

src/App.tsx

import { Input } from '../shared/types';
import { functions } from '@dynatrace-sdk/app-utils';

const input: Input = {
  id: 'john-doe',
  name: 'John Doe',
  age: 38,
};

const response = await functions.call('hello-world', input).then((res) => res.json());

Tip

Query string parameters and HTTP headers aren't passed to your function. Use the body of the HTTP request for any input of your function.

Note

To use await in React components, you need to wrap the asynchronous invocation in an async function. Read more about it in this guide.

Consume payload in your function

You can access the data you passed to your function via the payload parameter. As mentioned above, you can benefit from all the advantages of TypeScript by using the same type for both your app code and your function code. Your function would look like this eventually:

api/function.ts

import { Input } from '../shared/types';

type Output = {
  result: string;
};

export default (payload: Input): Output => {
  return {
    result: 'Hello ' + payload.name,
  };
};