T
TanStack•3y ago
continuing-cyan

useInfiniteQuery's enabled seems to not be working

For some reason I can't get the !router.isReady to work together with useInfiniteQuery, the query already loads before the router is ready, and due to that I do not get the data I need from the server. If I leave the webpage open and edit something and save in VS Code, then the values get spread and work, but upon reloading the page the same issue occurs 
const handleQueryParameters = (parameter: string[] | undefined | string) => {
    if (!router.isReady) return;

    switch (parameter) {
      case "false":
        return { active: false };
      case "true":
        return {
          active: true,
          fromStartDate: format(today, "yyyy-MM-dd"),
        };
      case "past":
        return {
          toEndDate: format(yesterday, "yyyy-MM-dd"),
        };
      default:
        router.push("/404");
    }
  };

  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
    useInfiniteQuery(
      "infiniteEvents",
      async ({ pageParam = 1 }) => {
        const response = await apiRequest({
          method: "GET",
          url: `/events/all`,
          queryParams: {
            organization_id: organizationId,
            page: pageParam,
            ...handleQueryParameters(router.query.active),
          },
          useCredentials: true,
        });
        return response.data as any;
      },
      {
        enabled: !router.isReady,
        getNextPageParam: (lastPage) => {
          const { page, total } = lastPage;
          if (page * 10 >= total) {
            return;
          }
          return page + 1;
        },
      }
    );

  if (!router.isReady || isLoading)
    return <Loader height="190px" width="190px" />;
const handleQueryParameters = (parameter: string[] | undefined | string) => {
    if (!router.isReady) return;

    switch (parameter) {
      case "false":
        return { active: false };
      case "true":
        return {
          active: true,
          fromStartDate: format(today, "yyyy-MM-dd"),
        };
      case "past":
        return {
          toEndDate: format(yesterday, "yyyy-MM-dd"),
        };
      default:
        router.push("/404");
    }
  };

  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
    useInfiniteQuery(
      "infiniteEvents",
      async ({ pageParam = 1 }) => {
        const response = await apiRequest({
          method: "GET",
          url: `/events/all`,
          queryParams: {
            organization_id: organizationId,
            page: pageParam,
            ...handleQueryParameters(router.query.active),
          },
          useCredentials: true,
        });
        return response.data as any;
      },
      {
        enabled: !router.isReady,
        getNextPageParam: (lastPage) => {
          const { page, total } = lastPage;
          if (page * 10 >= total) {
            return;
          }
          return page + 1;
        },
      }
    );

  if (!router.isReady || isLoading)
    return <Loader height="190px" width="190px" />;
1 Reply
unwilling-turquoise
unwilling-turquoise•3y ago
enabled works the same everywhere, can you show a reproduction please?

Did you find this page helpful?