Why isn't my react app mapping my graphQL query?

Question

I am working on a component to map all posts from a graphQL query on the client side using semantic UI. I am running it locally and the webpage is not showing any of the data even though this query works in apollo studio.

Here's the code for the component.

import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_POSTS } from '../utils/queries';

export const PostFeed = () => {
    const { loading, data } = useQuery(GET_POSTS, {
        fetchPolicy: "no-cache"
    });
    const posts = data?.post || [];

    return (
        <div>
            <h1>Post feed</h1>
            {loading ? (
                <div>Loading...</div>
            ) : (
                <div className="ui feed">
                {posts.map((post) => {
                    return (
                    <div className="event post">
                        <div className="label">
                            {/* <img src={post.author.profilePic}/> */}
                        </div>
                        <div className="content">
                            <div className="summary">
                                <a className="user">
                                    {post.postAuthor}
                                </a>posted on their page
                                <div className="date">
                                    {/* {post.createdAt} */}
                                </div>
                            </div>
                            <div className="extra text">
                                {post.postText}
                            </div>
                            <div className="meta">
                                <a className="like">
                                    {/* <i className="like icon"></i>{post.likes} */}
                                </a>
                            </div>
                        </div>
                    </div>
                    );
                })}
             </div>
            )}
        </div>
    )
}

Here is the utils/queries code:

import { gql } from '@apollo/client';

export const GET_POSTS = gql`
query GetPosts {
  getPosts {
    _id
    postAuthor
    postText
  }
}
`;

I wrote the below code to ensure the query is pulling data and it does return the correct data points (shared in screenshot).

  const { loading, error, data } = useQuery(GET_POSTS);

  if (loading) return "Loading...";
  
  if (error) return `Error! ${error.message}`;
  
  return (<div>{JSON.stringify(data)}</div>);

stringify data

So the problem seems to be with the mapping function or semantic UI. The page does briefly showing the Loading div before disappearing.semantic ui

Answer 1

You're referring to data.post when you should be referring to data.getPosts.

Try:

const posts = data?.getPosts || [];