how to avoid undefined using React Query (useQuery) for fetch data?

Question

when I console data for the first console.log, it's given me undefined.

somethings likes:

log: undefined

but if I trying to again try to save the file using Ctrl s ,it's working fine and give me values for the API.

here is my code below:

   const fetchPosts = () => {
        const fP = devices?.map(async (id) => {
            const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users`, myHeaders);
            return [data?.data.id];
        })
        return fP;
    };
    
   
    const { data } = useQuery('post', fetchPosts);
 console.log(data);

how can i avoid undefined for the first console.log?

anyone can help me to solve this issues.

Thankyou for your trying in advance!

Sanjeeb · Accepted Answer · 2022-10-13 07:44:16Z

To avoid undefined you need to check for loading and error. Here's a simple way to fetch list of users.

import { useQuery } from "react-query";
import axios from "axios";

function Test() {
  const fetchUser = async () => {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    return response.data;
  };

  const { data, isLoading, error } = useQuery("user", fetchUser);

  if (isLoading) return "Loading...";
  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>Users</h1>

      {data.map((item) => {
        return (
          <div key={item.id}>
            <h1>{item.name}</h1>
            <h1>{item.email}</h1>
          </div>
        );
      })}
    </div>
  );
}

export default Test;

I notice you have named your function fetchPost. Suppose you want to fetchPost as well. Here's how I would do it in a simple way.

import { useQuery } from "react-query";
import axios from "axios";

function Test() {
  const fetchUser = async () => {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    return response.data;
  };

  const fetchPosts = async () => {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    return response.data;
  };

  const { data, isLoading, error } = useQuery("user", fetchUser);

  const {
    data: posts,
    isLoading: postLoading,
    error: postError,
  } = useQuery("posts", fetchPosts);

  if (isLoading) return "Loading...";
  if (error) return "An error has occurred: " + error.message;

  if (postLoading) return <h1>Loading...</h1>;
  return (
    <div>
      <h1>*************Users*************</h1>

      {data.map((item) => {
        return (
          <div key={item.id}>
            <h1>{item.name}</h1>
            <h1>{item.email}</h1>
          </div>
        );
      })}

      <h1>*************POST*************</h1>
      {posts.map((item) => {
        return (
          <div key={item.id}>
            <h1>{item.title}</h1>
            <h1>{item.body}</h1>
          </div>
        );
      })}
    </div>
  );
}

export default Test;

I hope this answers your question.

The code is perfect but still my issues haven't solved....the same thing is happen as before....first it's given undefined the if i save my files again and again it's fetching data and giving me output. but my issues was first undefined which is still belong in first. anyway thanks for your trying!

ivanatias · Accepted Answer · 2022-10-13 08:20:00Z

3

This is normal and expected. data will always be undefined on first render since the query data has not been fetched yet and the cache for that particular query key is empty at this point. However, if you have some partial or "fake" data to display while the actual data is being fetched in the background, you can use placeholderData option in useQuery so the query behaves as if it already has data.

This can be useful in cases where you want to show the content layout as quick as possible while the fetching is in progress. You can think about it as a loading skeleton.

The placeholder data can come from different sources (a simple value, a function, cache, etc.)

Example of placeholder data as a value:

function Todos() {
  const result = useQuery(['todos'], () => fetch('/todos'), {
    placeholderData: placeholderTodos,
  })
}

Reference:

For more information you can check the documentation.

edited Oct 13, 2022 at 8:20

answered Oct 13, 2022 at 7:47

ivanatias

4,0733 gold badges20 silver badges31 bronze badges

2 Comments

user19891844 Over a year ago

i don't want to add any false data for show off, my problem is i am displaying fetch data latitude and longitude in map so when i run or reloading my codes and it's not given me any data so my project is not works perfectly. if i save my files one more time it's giving me location for fetch data. anyway Thanks for your trying!

ivanatias Over a year ago

Seems I misunderstood your question and I didn't really check your fetch function. Try refactoring your function using Promise.all.

Cthuwu · Accepted Answer · 2022-10-13 06:41:44Z

1

I'm assuming the first time you try to access your { data }, your fetch requests haven't finished running yet.

React is going to finish rendering the component, while any fetch requests are happening in the background. Since nothing has being returned from your React Query yet, the variable you set for your query data is still undefined the first time the component renders.

React Query has an isFetched method attached to the the query object. You could use a conditional to only continue when your data has been fetched.

if(data.isFetched){
  console.log(data)
} else {
  console.log("loading")
}

edited Oct 13, 2022 at 6:41

answered Oct 13, 2022 at 6:22

Cthuwu

112 bronze badges

1 Comment

user19891844 Over a year ago

I'm a bit confused how to use your answer, will me help me to use that in my code. i am getting error to use your suggestions. I will appreciate your effort. thanks :-)

Collectives™ on Stack Overflow

how to avoid undefined using React Query (useQuery) for fetch data?

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related