How to display graphql values in React app

Question

I have a Strapi app that outputs graphql, it a list of fonts that I simple want to display on a page

The page looks like this

'use client'
import {getDataFromTree} from '@apollo/client/react/ssr'
import withApollo from '../lib/withApollo'
import { useThemeContext } from './appState'
import { FontEntityResponse } from '@/generated'

const Home = () => {

  const data:FontEntityResponse = useThemeContext()

  console.log('--data---', data)

  return (
      <div>
    
        {JSON.stringify(data)}
    
        <ul>
          {data && data.data && data.data.attributes?.map((font) => {
            <li>{font.font_name}</li>
          })
        </ul>

      </div>
  )
}

export default withApollo(Home, {getDataFromTree})

Its a nextjs app with typescript.

I’m calling the graphql on a different page and passing it here using context, that all seems to be working

The {JSON.stringify(data)} outputs the correct info from the query

{"fonts":{"__typename":"FontEntityResponseCollection","data":[{"__typename":"FontEntity","attributes":{"__typename":"Font","font_name":"Star"}},{"__typename":"FontEntity","attributes":{"__typename":"Font","font_name":"Elephant"}},{"__typename":"FontEntity","attributes":{"__typename":"Font","font_name":"Varley"}},{"__typename":"FontEntity","attributes":{"__typename":"Font","font_name":"Jasper"}}]}}

I have generate types that are

export type Font = {
  __typename?: 'Font';
  createdAt?: Maybe<Scalars['DateTime']['output']>;
  font_name?: Maybe<Scalars['String']['output']>;
  publishedAt?: Maybe<Scalars['DateTime']['output']>;
  updatedAt?: Maybe<Scalars['DateTime']['output']>;
};

export type FontEntity = {
  __typename?: 'FontEntity';
  attributes?: Maybe<Font>;
  id?: Maybe<Scalars['ID']['output']>;
};

export type FontEntityResponse = {
  __typename?: 'FontEntityResponse';
  data?: Maybe<FontEntity>;
};

export type FontEntityResponseCollection = {
  __typename?: 'FontEntityResponseCollection';
  data: Array<FontEntity>;
  meta: ResponseCollectionMeta;
};

If I try to map over the data if fails and I get

Property 'map' does not exist on type 'Font'.

I’m I using the wrong type. How can I show the correct font names in a list

I think you have to map over data.data not data.data.attributes. — 2 hours ago

AhmadkhanAhmadkhan 1 · Accepted Answer · 2023-08-17 09:37:30Z

"The issue you’re facing is due to a type mismatch in your code. The data.attributes field in your response type (FontEntity) is typed as a single Font object, but you are trying to use .map() on it as if it were an array. You should be using the FontEntityResponseCollection type to correctly map over the list of fonts. Here’s how you can modify your code to display the font names correctly"

'use client'
import { getDataFromTree } from '@apollo/client/react/ssr'
import withApollo from '../lib/withApollo'
import { useThemeContext } from './appState'
import { FontEntityResponseCollection } from '@/generated'

const Home = () => {
  const data: FontEntityResponseCollection = useThemeContext()?.data;

  console.log('--data---', data);

  return (
    <div>
      <ul>
        {data && data.data.map((fontEntity) => (
          <li key={fontEntity.id}>{fontEntity.attributes?.font_name}</li>
        ))}
      </ul>
    </div>
  );
}

export default withApollo(Home, { getDataFromTree });

We updated the type of data to FontEntityResponseCollection to match the structure of the response you're receiving. Instead of directly using data in the map function, we use data.data to access the array of fonts. For each fontEntity, we access its attributes property and then font_name to display the font name. Added a key attribute to the <li> element to help React efficiently manage the list items. Make sure to replace 'id' with the actual identifier field in your FontEntity type if it's named differently. — 2 hours ago
I see what you are saying but this doesn't work, I get a blank screen — 1 hour ago
The end data here const data: FontEntityResponseCollection = useThemeContext()?.data; errors with Property 'data' does not exist on type '{}' — 1 hour ago

How to display graphql values in React app