I am working on a nextjs app that uses typescript and a Strapi backend with graphql.
My goal is to fetch the graphql data from strapi and display it in the react app, specifically a list of font names.
In my react code, I have a query that works in the playground:
import { gql } from "@/node_modules/@apollo/client/core/index";
export const FONT_DATA = gql`
query font_data{
fonts{
data{
attributes{
font_name
}
}
}
}
`
I am using codegen to generate types for the fonts.
// Types generated by codegen go here
In my react page, I am calling the query and attempting to display the font names:
// React code to call the query and display font names goes here
However, I encounter an error when trying to map over the data because it's not an array.
The console log also confirms that the data is not an array.
The graphql response returns an object, so how can I use that with the map function, or should I be using a different type?
Update:
If I log the data using
console.log(JSON.stringify(data, null, 2))// Logged data response from graphql query goes here