Can't pass data from getStaticProps to the NextPage component-CodePudding

I recieve properly the datas desired with getStaticProps. But I can't understand why they are not passed to the BlogPrivate component. I have exactly the same structure in another file, and it works just well...

articlesStrapi is always undefined

Here is the code

import React, { useEffect, useState } from 'react';
import { GetStaticProps, NextPage } from 'next';
import { ArticleStrapi } from '../../@types/next';
import Article from './article';

type articlesStrapiProps = { articlesStrapi: ArticleStrapi[] };

const BlogPrivate: NextPage<articlesStrapiProps> = ({ articlesStrapi }) => {
    
console.log(articlesStrapi); ==> return undefined

    

    return (
        <div style={{ display: 'flex', flexDirection: 'row' }}>
            //////
        </div>
    );
};

export const getStaticProps: GetStaticProps<{ articlesFromStrapi: ArticleStrapi[] }> = async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND}api/articles`);
    const { data } = await res.json();
    const articlesFromStrapi: ArticleStrapi[] = data;

    return !articlesFromStrapi
        ? { notFound: true }
        : {
                props: { articlesFromStrapi },
                revalidate: 10 // In seconds
          };
};

export default BlogPrivate;

there is the result of a console log of the articlesFromStrapi in the getStaticProps :

[
  {
    id: 1,
    attributes: {
      title: 'Article 1dgdrgdr',
      createdAt: '2022-11-22T13:28:16.243Z',
      updatedAt: '2022-11-22T18:02:50.096Z',
      publishedAt: '2022-11-22T13:49:16.161Z',
      content: 'dfdsf sdf ds '
    }
  },
  {
    id: 6,
    attributes: {
      title: 'fdsfdsf',
      createdAt: '2022-11-22T18:01:47.759Z',
      updatedAt: '2022-11-22T18:01:48.440Z',
      publishedAt: '2022-11-22T18:01:48.438Z',
      content: 'dsf sdf dsf dsf dsf dsf dsf dsf '
    }
  }
]

And here are my interfaces :

export interface ArticleStrapi {
    id: string;
    attributes: Article;
}

export interface Article {
    title: string;
    content: string;
    createdAt: string;
    publishedAt: string;
    updatedAt: string;
}

Let me know if you see any mistake I could do... Thanks :)

CodePudding user response：

Well your data names are not equivalent.

The prop that the component gets is articlesStrapi and the prop that you're returning from getStaticProps is articlesFromStrapi.

Here is the correct code:

const BlogPrivate: NextPage<articlesStrapiProps> = ({ articlesFromStrapi }) => {
    
console.log(articlesFromStrapi); ==> return undefined

    

    return (
        <div style={{ display: 'flex', flexDirection: 'row' }}>
            //////
        </div>
    );
}

Or by changing the prop name in getStaticProps:

export const getStaticProps: GetStaticProps<{ articlesFromStrapi: ArticleStrapi[] }> = async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND}api/articles`);
    const { data } = await res.json();
    const articlesFromStrapi: ArticleStrapi[] = data;

    return !articlesFromStrapi
        ? { notFound: true }
        : {
                props: { articlesStrapi: articlesFromStrapi },
                revalidate: 10 // In seconds
          };
};