TimeframeSelector with useDqlQuery()

[jegron]

Hi,

How can I use TimeframeSelector with my DQL requests ?

• https://developer.dynatrace.com/reference/design-system/preview/forms/TimeframeSelector/

My initial value is set correctly :

const [value, setValue] = useState<TimeframeSelectorProps['value']>({
    from: 'now()-14d',
    to: 'now()',
  });

const CLUSTER = `fetch logs, from:'${value.from}'
| filter contains(log.source, "Dynatrace Automation Script")
| makeTimeseries count(), by:{content.cluster}, interval:30m`;

const cluster_result = useDqlQuery({
    body: {
      query: CLUSTER,
    },
  });

But I failed to use it in my DQL because of :

'value' is possibly 'null' or 'undefined'.ts(18049)
const value: RequireAtLeastOne<{
    from: string;
    to: string;
}> | RequireAtLeastOne<TimeframeV2> | null | undefined

Do you have an example to help me ?

Julien

[educampver · Accepted solution]

Hi @jegron, the type TimeframeSelectorProps['value'] is nullable, and the type checker can't infer that value is actually defined. You have two options:

1. Use the non-null assertion operator ! like this value!.from. This is usually not recommended and will likely lead to a Forbidden non-null assertion warning.
2. Use the optional chaining ? and nullish coalescing ?? operators, which allow you to fall back to a default value when dealing with null or undefined. Here's how to use them:

const DEFAULT_FROM = 'now()-14d';

const [value, setValue] = useState<TimeframeSelectorProps['value']>({
  from: DEFAULT_FROM,
  to: 'now()',
});

const CLUSTER = `fetch logs, from:'${value?.from ?? DEFAULT_FROM}'
| filter contains(log.source, "Dynatrace Automation Script")
| makeTimeseries count(), by:{content.cluster}, interval:30m`;

[jegron]

Thanks!

My timeframe are now correctly update onChange :

<TimeframeSelector value={value} onChange={newValue => {
          console.log('New timeframe selected:', newValue);
          setValue(newValue);
        }} clearable/>

But my "useDQLQuery()" requests/results are not refetch. What is the best way to do it ?

[StefanKern · Accepted solution]

Hello @jegron, the useDqlQuery hook returns a refetch function, which you could use in your onChange to refetch fresh grail data. Here is a code example on the Dynatrace Developer Portal.