T
TanStack•3y ago
fair-rose

simple useQuery is forever loading...

  const { data, isLoading, isError, error, status } = useQuery(
    ["sheesh"],
    () => {
      return { hello: "heyyy" };
    }
  );
  const { data, isLoading, isError, error, status } = useQuery(
    ["sheesh"],
    () => {
      return { hello: "heyyy" };
    }
  );
any idea? I had trpc react query working fine but now I am just using tanstack react query and can't seem to retrieve any data using Nextjs,
"@tanstack/react-query": "^4.29.25",
6 Replies
passive-yellow
passive-yellow•3y ago
I "think" its failing as your fetching function isn't a Promise?
fair-rose
fair-roseOP•3y ago
@PeteDuncanson does the same with 
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["sheesh"],
    queryFn: async () => {
      return new Promise<number>((resolve, reject) => {
        setTimeout(() => {
          resolve(42); // Resolving the promise with the value 42
        }, 1000);
      });
    },
  });
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["sheesh"],
    queryFn: async () => {
      return new Promise<number>((resolve, reject) => {
        setTimeout(() => {
          resolve(42); // Resolving the promise with the value 42
        }, 1000);
      });
    },
  });
i was initially trying to fetch some data from rxdb but then now just trying to get it to fetch in general 
  const {
    isLoading: programIsLoading,
    error,
    isError,
    data: programData,
    status,
  } = useQuery({
    queryKey: ["program", userId, programId],
    queryFn: async (context: QueryFunctionContext<string[]>) => {
      const [_, userId, programId] = context.queryKey;
      console.log("program query params", userId, programId);
      if (!userId || !programId) {
        console.log("Error program query params", userId, programId);
        throw Error("Invalid parameters");
      }

      const db = await rxdb;

      const query = db?.programs.findOne({
        selector: {
          id: programId,
        },
      });
      const result = await query?.exec();
      console.log("program query result", result);
      return result;
    },
    enabled: router.isReady && session?.user.id !== undefined,
  });
  const {
    isLoading: programIsLoading,
    error,
    isError,
    data: programData,
    status,
  } = useQuery({
    queryKey: ["program", userId, programId],
    queryFn: async (context: QueryFunctionContext<string[]>) => {
      const [_, userId, programId] = context.queryKey;
      console.log("program query params", userId, programId);
      if (!userId || !programId) {
        console.log("Error program query params", userId, programId);
        throw Error("Invalid parameters");
      }

      const db = await rxdb;

      const query = db?.programs.findOne({
        selector: {
          id: programId,
        },
      });
      const result = await query?.exec();
      console.log("program query result", result);
      return result;
    },
    enabled: router.isReady && session?.user.id !== undefined,
  });
passive-yellow
passive-yellow•3y ago
Are you console statements getting written out? ie is it actually being called
optimistic-gold
optimistic-gold•3y ago
isLoading is true when a query is disabled
fair-rose
fair-roseOP•3y ago
@PeteDuncanson no its not being called @TkDodo 🔮 why would the query be disabled? I am stuck : / for the set time out one, it is never called figured it out
fair-rose
fair-roseOP•3y ago
its https://stackoverflow.com/questions/75538301/reactquery-queryfn-passed-to-usequery-is-never-run-happens-only-on-chrome
Stack Overflow
ReactQuery: queryFn passed to useQuery is never run, happens only o...
We make extensive use of ReactQuery on a fairly large React site, and it works well, but we've recently seen very strange behavior that happens only on Chrome, and only rarely. For every useQuery...

Did you find this page helpful?