Question

25

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

rated 0 times [ 32] [ 7] / answers: 1 / hits: 6956 / 2 Years ago, thu, october 13, 2022, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lonnier

Add To Favorites

Follow

Total Points: 621

Total Questions: 113

Total Answers: 98

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

lonnier questions

1 How to cypress wait for transition of the element

Tue, Nov 24, 20, 00:00, 4 Years ago

1 How to convert JavaScript to JQuery?

Sun, Jun 7, 20, 00:00, 4 Years ago

1 React/Router/MemoryRouter - how to pass history property and use push() in child component?

Sat, Apr 4, 20, 00:00, 4 Years ago

1 How to Access Parent Component from Child Component in Angular 9

Mon, Mar 30, 20, 00:00, 4 Years ago

1 Turn basic polling into long polling

Wed, Jan 8, 20, 00:00, 4 Years ago

View All

answered 2 Years ago marquezb · Accepted Answer

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.