React Query return undefined data while in network tab the data exists but it does not show on the p-CodePudding

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.

CodePudding user response：

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?

CodePudding user response：

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;
    });