How can I render query data using map in a React App [duplicate]

Question

I've just started learning how to use React, and I encountered the following problem: I need to render this data I fetched using graphql, when I console.log the data it shows up just fine. But when I try to map the array to get what I need it seems to be returning undefined.

How can I render the name and email of each subscriber using map?

import React, { useState } from "react";
import { gql, useQuery } from "@apollo/client";

const GET_SUBSCRIBERS_QUERY = gql`
  query {
    subscribers(stage: DRAFT) {
      name
      email
      id
    }
  }
`;

const App = () => {
  const { data } = useQuery(GET_SUBSCRIBERS_QUERY);

  return (
    <>
      <h1>@fsouza/table-data</h1>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {data.subscribers.map((subscriber) => (
            <tr key={subscriber.id}>
              <td>{subscriber.name}</td>
              <td>{subscriber.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

export default App;

console.log with the data

console.log after trying to map array

add data?.subscribers.map(, data is undefined on the first render — Mike
– Mike, Commented Aug 7, 2022 at 20:56

Entity · Accepted Answer · 2022-08-07 21:20:19Z

2

Your data is optional. And it is undefined while the query is loading.

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

You may consider adding a loading state, as follow:

if (loading) {
  return <p>Loading...</p> // Or whatever you want
}

Or just ad a check for subscribers to be present already (using a question mark):

data?.subscribers.map((subscriber) => ()

edited Aug 7, 2022 at 21:20

answered Aug 7, 2022 at 21:01

Entity

1,0747 silver badges12 bronze badges

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

Comments

Konrad · Accepted Answer · 2022-08-07 20:56:55Z

0

data is probably undefined before the actual fetch happens:

Change data. to data?.

const App = () => {
  const { data } = useQuery(GET_SUBSCRIBERS_QUERY);

  return (
    <>
      <h1>@fsouza/table-data</h1>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {data?.subscribers.map((subscriber) => (
            <tr key={subscriber.id}>
              <td>{subscriber.name}</td>
              <td>{subscriber.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

answered Aug 7, 2022 at 20:56

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Comments

Lasse Aakjær · Accepted Answer · 2022-08-07 21:11:51Z

0

I think it is a simple question of when the data is available. So before the data has been fetched, the data property is undefined. Thus the data object doesn't have a subscribers property, which is why it's failing. When it fails you get an error, and it crashes.

If you wrap the map in a condition, you should work.

Putting data and a && in front does the trick. If data is defined (not a falsy value like undefined), execute the right-hand side.

{data && data.subscribers.map((subscriber) => (
    <tr key={subscriber.id}>
       <td>{subscriber.name}</td>
       <td>{subscriber.email}</td>
    </tr>
))}

answered Aug 7, 2022 at 21:11

Lasse Aakjær

1

1 Comment

Andreia Souza Over a year ago

thanks for the explanation! It was just as you said

Collectives™ on Stack Overflow

How can I render query data using map in a React App [duplicate]

3 Answers 3

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Linked

Related