overtime.elapsedTime not reported when isFetching on on isLoading

kapa.ai•7mo ago

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The overtime.elapsedTime is a property returned by several hooks in Refine, such as useTable, useDataGrid, useForm, useShow, and useModalForm. This property represents the elapsed time in milliseconds and becomes undefined when the request is completed. If overtime.elapsedTime is not reported when isFetching or isLoading is on, it might be due to the request being completed, hence setting elapsedTime to undefined. Here is an example of how to use overtime.elapsedTime with useTable hook:

import { useTable } from "@refinedev/core";  
const { overtime } = useTable();  
  
console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...

import { useTable } from "@refinedev/core";  
const { overtime } = useTable();  
  
console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...

And with useForm hook:

const { overtime: { elapsedTime } } = useForm({ ... });

const { overtime: { elapsedTime } } = useForm({ ... });

If you want to show a loading indicator when the request takes too long, you can pass the overtimeOptions prop to the hook. It accepts interval as number to determine the ticking intervals and onInterval to be called on each tick.

const { overtime } = useTable({  
 overtimeOptions: {  
 interval: 1000,  
 onInterval(elapsedInterval) {  
 console.log(elapsedInterval);  
 },  
 },  
});

const { overtime } = useTable({  
 overtimeOptions: {  
 interval: 1000,  
 onInterval(elapsedInterval) {  
 console.log(elapsedInterval);  
 },  
 },  
});

For more details, you can refer to the documentation of useTable (https://refine.dev/docs/data/hooks/use-table#overtime), useDataGrid (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid#overtime), useForm (https://refine.dev/docs/data/hooks/use-form#overtime), useShow (https://refine.dev/docs/data/hooks/use-show#overtime), and useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#overtime). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-white•7mo ago

@kapa.ai it wont report when re fetching

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The overtime.elapsedTime property in Refine's hooks represents the elapsed time in milliseconds for a request and becomes undefined when the request is completed. If you're experiencing an issue where overtime.elapsedTime is not reported during a re-fetching operation, it might be due to the request being completed quickly, hence setting elapsedTime to undefined. Here's an example of how you might use overtime.elapsedTime with the useTable hook:

import { useTable } from "@refinedev/core";  
const { overtime } = useTable();  
  
console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...

import { useTable } from "@refinedev/core";  
const { overtime } = useTable();  
  
console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...

If you want to show a loading indicator when the request takes too long, you can pass the overtimeOptions prop to the hook. It accepts interval as number to determine the ticking intervals and onInterval to be called on each tick.

const { overtime } = useTable({  
 overtimeOptions: {  
 interval: 1000,  
 onInterval(elapsedInterval) {  
 console.log(elapsedInterval);  
 },  
 },  
});

const { overtime } = useTable({  
 overtimeOptions: {  
 interval: 1000,  
 onInterval(elapsedInterval) {  
 console.log(elapsedInterval);  
 },  
 },  
});

For more details, you can refer to the documentation of useTable (https://refine.dev/docs/data/hooks/use-table#overtime), useDataGrid (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid#overtime), useForm (https://refine.dev/docs/data/hooks/use-form#overtime), useShow (https://refine.dev/docs/data/hooks/use-show#overtime), and useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#overtime). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•7mo ago

Hey @Joe Gaffney please be as explicit as possible and try to explain your issue with details. If you provide a code examples with some comments, bot can help you.

wise-white•7mo ago

Hey @Batu yeah the bot is pretty good, but think this issue is more with react query as the initially loading will show the elapasedTime, but not when you refetch. I will try giving it an example, but think it maybe beyond its scope. @kapa.ai here is an example when isFetching overtime.elapsedTime is undefined unless its the first load.

const { isFetching, overtime } = useCustom({
    url: `${apiUrl}/api/post/files`,
    method: "post",
    dataProviderName: "api",
    config: { payload: { location: props.activeLocation, host: props.host } },
    queryOptions: {
      queryKey: ["files", props.activeLocation || "root"],
      refetchInterval: props.depth === 0 ? 1000 * 60 : 0,
      onSuccess: (data) => {
        setData(data?.data);
      },
    },
  });
  if (isFetching) {
    console.log("Fetching data", overtime.elapsedTime);
    return <LinearProgress />;
  }

const { isFetching, overtime } = useCustom({
    url: `${apiUrl}/api/post/files`,
    method: "post",
    dataProviderName: "api",
    config: { payload: { location: props.activeLocation, host: props.host } },
    queryOptions: {
      queryKey: ["files", props.activeLocation || "root"],
      refetchInterval: props.depth === 0 ? 1000 * 60 : 0,
      onSuccess: (data) => {
        setData(data?.data);
      },
    },
  });
  if (isFetching) {
    console.log("Fetching data", overtime.elapsedTime);
    return <LinearProgress />;
  }

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In your code, overtime.elapsedTime is logged to the console when isFetching is true. This means that a fetch operation is in progress. However, overtime.elapsedTime becomes undefined when the request is completed. If overtime.elapsedTime is undefined during subsequent fetch operations (not the first load), it might be due to the request being completed quickly, hence setting elapsedTime to undefined. If you want to show a loading indicator when the request takes too long, you can pass the overtimeOptions prop to the hook. It accepts interval as number to determine the ticking intervals and onInterval to be called on each tick.

const { overtime } = useCustom({
    // your options
    overtimeOptions: {
        interval: 1000,
        onInterval(elapsedInterval) {
            console.log(elapsedInterval);
        },
    },
});

const { overtime } = useCustom({
    // your options
    overtimeOptions: {
        interval: 1000,
        onInterval(elapsedInterval) {
            console.log(elapsedInterval);
        },
    },
});

For more details, you can refer to the documentation of useTable (https://refine.dev/docs/data/hooks/use-table#overtime), useDataGrid (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid#overtime), useForm (https://refine.dev/docs/data/hooks/use-form#overtime), useShow (https://refine.dev/docs/data/hooks/use-show#overtime), and useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#overtime). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•7mo ago

Yeah. Its because elapsed time is belongs to interval. It returns elapsed time, so you can decide when to fetch. When you fetch, it resets. Because its not waiting. You can think elapsed time as time passed since request is triggered without fetch. We give users elapsedTime, so they can decide when to actually fetch after triggering . Maybe 1000ms later, or 500ms

wise-white•7mo ago

right i guess what i was looking for was to know if the refetch itself is taking a long time. To show a loading indicator. isFetching does report correctly that it is fetching.

flat-fuchsia•7mo ago

elapsedTime isnt the time fetch itself takes. Its the time before fetch.

wise-white•7mo ago

I think on the first ever request the timing is correct it would be when the onSucess has finished? Unless i missed something

Return overtime object from this hook. elapsedTime is the elapsed time in milliseconds. It becomes undefined when the request is completed.

Return overtime object from this hook. elapsedTime is the elapsed time in milliseconds. It becomes undefined when the request is completed.

But i guess as data is already in the cache it is probably not as useful to show a loading and just refresh the data when it is refetched.