Type Error when destructuring elements In ReactJS

Question

Problem

After I query my objects from GraphQl server, on console logging data I get my objects in the console but when I destructure it in a way data: { getPosts : posts } it returns a type error and when I try to map over data only it returns data.map is not a function

The Code

const {loading, data: {getPosts: posts} } = useQuery(FETCH_POSTS); // Here is the error

return(
             {loading ? (
                   <h1>Loading...</h1>
               ) : (
                   posts && posts.map(post => (
                       <Grid.Column key={post.id}> 
                           <PostCard post={post} />
                       </Grid.Column>
                    ))
               )}
)

The TypeError

The data on console.log(data)

https://stackoverflow.com/questions/14220321/ and https://stackoverflow.com/q/42260524/ — ibrahim mahrir, Nov 06 '20 at 13:14

score 1 · Accepted Answer · answered Nov 06 '20 at 13:18

That kind of destructuring is not gonna work, because at the time when it happens data is still undefined. So you'll need to wait for it to load.

  const { loading, data } = useQuery(FETCH_POSTS);

  return loading ? (
    <h1>Loading...</h1>
  ) : (
    data.getPosts.map((post) => (
      <Grid.Column key={post.id}>
        <PostCard post={post} />
      </Grid.Column>
    ))
  );

score 0 · Answer 2 · answered Nov 06 '20 at 13:13

0

You need to await the async request for the data to be ready so that it can be destructured.

answered Nov 06 '20 at 13:13

eloyra

519
2
6

Type Error when destructuring elements In ReactJS

Problem

The Code

The TypeError

The data on console.log(data)

2 Answers2