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

Question

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.

Please update your question with the relevant code

hellogoodnight
– hellogoodnight

2021-12-10 13:25:05 +00:00
Commented Dec 10, 2021 at 13:25 — hellogoodnight
– hellogoodnight, Commented Dec 10, 2021 at 13:25
Hello Sir , just did .

user15792704
– user15792704

2021-12-10 13:34:12 +00:00
Commented Dec 10, 2021 at 13:34 — user15792704
– user15792704, Commented Dec 10, 2021 at 13:34
log the status too and say what it is

hellogoodnight
– hellogoodnight

2021-12-10 13:48:12 +00:00
Commented Dec 10, 2021 at 13:48 — hellogoodnight
– hellogoodnight, Commented Dec 10, 2021 at 13:48
the status state is success

user15792704
– user15792704

2021-12-10 14:01:34 +00:00
Commented Dec 10, 2021 at 14:01 — user15792704
– user15792704, Commented Dec 10, 2021 at 14:01

TkDodo · Accepted Answer · 2021-12-10 15:45:42Z

14

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

answered Dec 10, 2021 at 15:45

TkDodo

30.4k5 gold badges85 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hellogoodnight · Accepted Answer · 2021-12-10 14:04:58Z

0

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?

answered Dec 10, 2021 at 14:04

hellogoodnight

2,1697 gold badges32 silver badges60 bronze badges

4 Comments

user15792704 Over a year ago

After updating , this is what i get in my console : {isLoading: true, isFetching: true} error null status loading {data: undefined} {isLoading: false, isFetching: false} error null status success {data: undefined}

user15792704 Over a year ago

result is not being logged

hellogoodnight Over a year ago

but you are sure that the function is being called? you see it in the network log?

hellogoodnight Over a year ago

YOu dont call the endpoint from somewhere else also=

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related