Skip to main content

React Hooks

npm install @dynatrace-sdk/react-hooks

Why should I use this package?

This package provides an easy way to interact with Grail, Documents, or the App State without dealing with all the React state management. It wraps the client SDKs in a way that's easier to consume in React by providing hooks that can be called like usual methods.

Query Grail Data

To query grail data, you would normally use the client-query SDK together with extensive react state handling. By using the useDqlQuery hook provided in this package, you can replace all of that by just calling:

const { data, error, isLoading } = useDqlQuery({
body: { query: "fetch logs" },
});

You can use all parameters that are available when using the client SDKs directly.

Sometimes you want to delay the execution of the query until a user clicks on a button. This can be achieved by passing additional options to the hook:

const { data, error, isLoading, refetch } = useDqlQuery(
{ body: { query: "fetch logs" } },
{ autoFetch: false }
);

function onClickQuery() {
refetch();
}

Documents and AppState

In addition to grail queries, we also provide hooks for interacting with documents and the app state. The optional hook options allow you to specify whether queries should be executed immediately, or only when refetch is called.

const { data, error, isLoading } = useDocument(
{ id: documentId },
{ autoFetch: true }
);

In order to create, update or delete documents or the app state, you have to call execute explicitly.

const { data, execute, error } = useCreateDocument();

function onClickCreateDocument() {
execute(DOCUMENT_DATA);
}

Davis® analyzers

To execute Davis® analyzers, you would normally use the client-davis-analyzers SDK together with extensive react state handling and polling logic. By using the useAnalyzer hook provided in this package, you can simplify your code:

const { data, error, isLoading } = useAnalyzer({
analyzerName: "dt.statistics.GenericForecastAnalyzer",
body: {
timeSeriesData: {
expression: query,
},
},
});

You can use all parameters that are available when using the executeAnalyzer method from the client-davis-analyzer SDK directly.

Sometimes you want to delay the execution of the analyzer until a user clicks on a button. This can be achieved by passing additional options to the hook:

const { data, error, isLoading, refetch } = useAnalyzer({
analyzerName: 'dt.statistics.GenericForecastAnalyzer',
body: {
timeSeriesData: {
expression: query,
},
},
{
autoFetch: false,
autoFetchOnUpdate: true,
}
});

function onExecuteAnalyzer() {
refetch();
}
Still have questions?
Find answers in the Dynatrace Community