fair-rose

I have observed that my refetchInterval is not working on a component page but works on my hooks.

export function useGetAllTicketsTodayQueryOptions(userId: string | undefined) {
  return queryOptions({
    queryKey: ["list-of-tickets-today"],
    queryFn: () => getAllTodayTickets(),
    select: ({ data }) => {
      console.log(data.tickets);
      return data.tickets;
    },
    enabled: !!userId,
    refetchInterval: 1000,
  });
}

export function useGetAllTicketsTodayQueryOptions(userId: string | undefined) {
  return queryOptions({
    queryKey: ["list-of-tickets-today"],
    queryFn: () => getAllTodayTickets(),
    select: ({ data }) => {
      console.log(data.tickets);
      return data.tickets;
    },
    enabled: !!userId,
    refetchInterval: 1000,
  });
}

Page component

function AdminPage() {
const { user } = useDashboardContext();
  const { data: allTicketsToday, isLoading } = useQuery(useGetAllTicketsTodayQueryOptions(user?.id));

  console.log(allTicketsToday);

return (
    <div></div>
 );
}

function AdminPage() {
const { user } = useDashboardContext();
  const { data: allTicketsToday, isLoading } = useQuery(useGetAllTicketsTodayQueryOptions(user?.id));

  console.log(allTicketsToday);

return (
    <div></div>
 );
}

It reftech on every 1 second in the hooks. Its on the display. But when I console log it in the component. It doesn't refresh or invalidate the data. this code -> console.log(allTicketsToday); only displays once. but my hooks displays every 1 second interval. Thanks!

6 Replies

fair-roseOP•8mo ago

I have forked this repo and added a refetchInterval in users query options and display in the console log the count. But it also only display once. Not on interval. https://stackblitz.com/edit/tanstack-router-bcdnqqsp?file=src%2Froutes%2Fdashboard.users.route.tsx,src%2Futils%2FqueryOptions.ts&preset=node

StackBlitz

Router Kitchen Sink React Query File Based Example (forked) - Stack...

Run official live example code for Router Kitchen Sink React Query File Based, created by Tanstack on StackBlitz

national-gold•8mo ago

why would you take a complex router example that's meant to show off router features to show that refetchInterval "doesn't work" ? I don't even know where the queryOptions are used that have the interval ...

national-gold•8mo ago

here: https://stackblitz.com/edit/tanstack-query-hdxyeatf?file=src%2Findex.tsx&preset=node fetches every second in an interval like it should 🤷‍♂️

Dominik Dorfmeister

StackBlitz

Query Simple Example (forked) - StackBlitz

Run official live example code for Query Simple, created by Tanstack on StackBlitz

fair-roseOP•8mo ago

Thank you for the reply!. and Sorry for that. I was in that repo when I just downloaded that repo and used on my project. So that is also the one I have made as example. /utils/queryOptions.ts - This is where I added a refecthInterval

export const usersQueryOptions = (opts: {
  filterBy?: string;
  sortBy?: 'name' | 'id' | 'email';
}) =>
  queryOptions({
    queryKey: ['users', opts],
    queryFn: () => fetchUsers(opts),
    refetchInterval: 1000,
  });

export const usersQueryOptions = (opts: {
  filterBy?: string;
  sortBy?: 'name' | 'id' | 'email';
}) =>
  queryOptions({
    queryKey: ['users', opts],
    queryFn: () => fetchUsers(opts),
    refetchInterval: 1000,
  });

Thank you so much for the reply. I found out that using isLoading as a dependency on a useEffect will only triggered it once. Using isFetching is the better solution to trigger the useEffect on every interval

fascinating-indigo•8mo ago

why are you talking about a useEffect ? you mean the internal useQuery useEffect?

fair-roseOP•8mo ago

I want to update some components on every intervals. i.e Duration time for the ticket has been created and display the duration time while on waiting before the ticket has called

Gaming

Programming

I have observed that my refetchInterval is not working on a component page but works on my hooks.

Did you find this page helpful?