The data is coming from the backend and i can see it in the network tab, but react query is returning an undefined data, it's not even reacting with the data because it returns false loading and fetching in the console, and the devtools is set to fresh(1) . it was working before but now can't seem to figure out a solution .

This is my App.js:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      cacheTime: 0,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient} contextSharing={true}>
      <PrivateRoute
        exact
        path="/dashboard/snp/match"
        component={MatchedSequences}
      />
      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  );
}

export default App;

This is my component:

const queryClient = useQueryClient();
  const [showQuery, setShowQuery] = useState(false);
  const [showSequence, setShowSequence] = useState(false);

  const { isLoading, isFetching, error, data, status } = useQuery(
    "dn",
    () => {
      fetch("/api/users/find").then((res) => {
        return res.json();
      });
    },
    { keepPreviousData: false },
  );

  console.log({ isLoading, isFetching });
  console.log("error", error);
  console.log({ data });

I'm using react Query version 3.34.

The data is coming from the backend and i can see it in the network tab, but react query is returning an undefined data, it's not even reacting with the data because it returns false loading and fetching in the console, and the devtools is set to fresh(1) . it was working before but now can't seem to figure out a solution .

This is my App.js:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      cacheTime: 0,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient} contextSharing={true}>
      <PrivateRoute
        exact
        path="/dashboard/snp/match"
        component={MatchedSequences}
      />
      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  );
}

export default App;

This is my component:

const queryClient = useQueryClient();
  const [showQuery, setShowQuery] = useState(false);
  const [showSequence, setShowSequence] = useState(false);

  const { isLoading, isFetching, error, data, status } = useQuery(
    "dn",
    () => {
      fetch("/api/users/find").then((res) => {
        return res.json();
      });
    },
    { keepPreviousData: false },
  );

  console.log({ isLoading, isFetching });
  console.log("error", error);
  console.log({ data });

I'm using react Query version 3.34.

• javascript
• reactjs
• react-query

• Please update your question with the relevant code – hellogoodnight Commented Dec 10, 2021 at 13:25
• Hello Sir , just did . – user15792704 Commented Dec 10, 2021 at 13:34
• log the status too and say what it is – hellogoodnight Commented Dec 10, 2021 at 13:48
• the status state is success – user15792704 Commented Dec 10, 2021 at 14:01

2 Answers 2

Your query function (the second parameter to useQuery) doesn't return anything:

    () => {
      fetch("/api/users/find").then((res) => {
        const result = res.json();
        console.log({result});
        return result;
      });
    },

if you use curly brackets for the arrow function, you need the return keyword:

    () => {
      return fetch("/api/users/find").then((res) => {
        const result = res.json();
        console.log({result});
        return result;
      });
    },

alternatively, you can use the implicit return from arrow function, but then you have to omit the curly brackets:

    () => fetch("/api/users/find").then((res) => {
      const result = res.json();
      console.log({result});
      return result;
    });

please update your code to add logging inside of the fetch, like this:

const queryClient = useQueryClient();
  const [showQuery, setShowQuery] = useState(false);
  const [showSequence, setShowSequence] = useState(false);

  const { isLoading, isFetching, error, data, status } = useQuery(
    "dn",
    () => {
      fetch("/api/users/find").then((res) => {
        const result = res.json();
        console.log({result});
        return result;
      });
    },
    { keepPreviousData: false },
  );

  console.log({ isLoading, isFetching });
  console.log("error", error);
  console.log({ data });

What value does result have?