topic Re: TimeframeSelector with useDqlQuery() in Developer Q&A Forum

TimeframeSelector with useDqlQuery()

jegron — Tue, 23 Jul 2024 13:39:05 GMT

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

Re: TimeframeSelector with useDqlQuery()

educampver — Wed, 24 Jul 2024 07:57:17 GMT

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

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.
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:

Re: TimeframeSelector with useDqlQuery()

jegron — Thu, 25 Jul 2024 14:25:47 GMT

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 ?

Re: TimeframeSelector with useDqlQuery()

StefanKern — Fri, 02 Aug 2024 06:32:56 GMT

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.