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)

stackoverflow.com/questions/14220321 and stackoverflow.com/q/42260524 — ibrahim mahrir
– ibrahim mahrir, Commented Nov 6, 2020 at 13:14

Clarity · Accepted Answer · 2020-11-06 13:18:28Z

1

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

answered Nov 6, 2020 at 13:18

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

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

Comments

eloyra · Accepted Answer · 2020-11-06 13:13:15Z

0

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

answered Nov 6, 2020 at 13:13

eloyra

5292 silver badges6 bronze badges

Collectives™ on Stack Overflow

Type Error when destructuring elements In ReactJS

Problem

The Code

The TypeError

The data on console.log(data)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem

The Code

The TypeError

The data on console.log(data)

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related