Leveraging the power of the map function to manipulate data retrieved

Question

Leveraging the power of the map function to manipulate data retrieved

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

, I see:

// Logged data response from graphql query goes here

typescript next.js graphql strapi

Answer 1

Answer №1

Not quite sure about the workings of strapi, but typically a graphql response is structured as follows:

data.nameOfYourResolver.arrayObjectOrOtherTypeOfData

Your data types seem to be incorrect. In this scenario, a proper structure would look something like this:

export type FontEntityResponse = {
  fonts: Maybe<FontEntityData>; //object
};

export type FontEntityData = {
  data: Maybe<FontEntity[]> //Array
};

export type FontEntity = {
  attributes: Maybe<Font>; //Object

export type Font = {
  fontName: Maybe<string>; //string



data.fonts.data(attribute => {
   console.log(attribute.font_name)
//...
})

Although it's unclear what specific data type this is, your property names are incorrectly labelled.

You simply need to verify the types assigned to these properties

fonts{
       data{
            attributes{
               font_name }}}

You can

console.log(JSON.stringify(data, null, 2))

to view all the contained data

Additionally, in

const {data, loading} = useQuery<FontEntityResponse, FontEntity>(FONT_DATA)

The term FontEntity should ideally be utilized for variable types related to fetching this resolver.

Answer 2

Not quite sure about the workings of strapi, but typically a graphql response is structured as follows:

data.nameOfYourResolver.arrayObjectOrOtherTypeOfData

Your data types seem to be incorrect. In this scenario, a proper structure would look something like this:

export type FontEntityResponse = {
  fonts: Maybe<FontEntityData>; //object
};

export type FontEntityData = {
  data: Maybe<FontEntity[]> //Array
};

export type FontEntity = {
  attributes: Maybe<Font>; //Object

export type Font = {
  fontName: Maybe<string>; //string



data.fonts.data(attribute => {
   console.log(attribute.font_name)
//...
})

Although it's unclear what specific data type this is, your property names are incorrectly labelled.

You simply need to verify the types assigned to these properties

fonts{
       data{
            attributes{
               font_name }}}

You can

console.log(JSON.stringify(data, null, 2))

to view all the contained data

Additionally, in

const {data, loading} = useQuery<FontEntityResponse, FontEntity>(FONT_DATA)

The term FontEntity should ideally be utilized for variable types related to fetching this resolver.

Leveraging the power of the map function to manipulate data retrieved

Answer №1

Similar questions

Execute ReactJS function only if query parameters are configured

Troubleshooting TestBed: Resolving the StatusBar Provider Error

Can someone share their experience dealing with the typeError "immutable" in the auth.js callback function?

cycle through options of radio buttons

Encountering an issue with applying D3 fill to a horizontal stacked bar chart in Angular using TypeScript. When using .attr("fill", ..) in VSC, an error stating "No overload matches this call" is displayed

Next.js routes taking precedence over storybook routes

The @Prop property decorator in Vue cannot be utilized as it is not compatible

Error: Could not locate module 'fs' in Next.js when using googleapis

Retrieve worldwide data for the entire application in Next.js during the first page load

Troubleshooting deployment issues with aws-amplify and Next.js due to conflicts in aws-exports.js

Tips for incorporating moment.js library into an Angular 2 TypeScript application

What could be causing the QullJS delta to display in a nonsensical sequence?

Creating a Dynamic Clear Button for a Text Area in Angular

pick only one option from each row

The system is failing to recognize the union data type

Node OOM Error in Webpack Dev Server due to Material UI Typescript Integration

Tips for using useState to update only the element that was clicked:

Retrieve the array from within the string

Retrieve all the items listed in the markdown file under specific headings

When working with TypeScript, it's important to note that an implicit 'any' type may occur when trying to use an expression of type 'string' to index a specific type