The error message "data.map is not a function" is thrown in the getStatic

Question

The error message "data.map is not a function" is thrown in the getStatic

I am currently working on a blog project using Strapi in conjunction with Next.js

My goal is to create dynamic pages by utilizing [id].js within the pages/posts/[id].js structure

However, I've encountered an issue while attempting to map through the Strapi API inside getStaticPaths(). The error message states that data.map is not defined

Important note: I am running Next.js version 12.0.8 and Strapi version 4.0.4

Below you can find the snippet of code causing the problem:

export async function getStaticPaths() {
  const postsRes = await axios.get("http://localhost:1337/api/posts?populate=image");
 
  const paths = postsRes.map((post) => {
    return { params: {id: post.id.toString()} }
  });

  // const paths = { params: {id: '1' } }
    
  return {
    paths,
    fallback: false
 
  }
 
}

To view the complete code for the [id].js page, click on this link - https://pastebin.com/SnzLirys

If you'd like to see a screenshot of the error, you can check it out here -

javascript axios next.js strapi

Answer 1

Answer №1

To reset the npm run dev, simply press ctrl + c to stop it and then start it again.

Answer 2

To reset the npm run dev, simply press ctrl + c to stop it and then start it again.

Answer 3

Answer №2

It seems that to successfully utilize axios within the specified function, you need to establish a context first. Alternatively, you could convert the axios response to JSON using json.stringify and then parse it using json.parse. Another option is to simply use the fetch method.

If you are working with the next API folder, avoid calling fetch or axios directly in this section. Instead, treat the query as if you were operating in a node environment.

export async function getStaticPaths() {
      const requestData = await fetch("url")
      const jsonData = await requestData.json()
      
      jsonData.map(item => console.log(item))
     
      const paths = jsonData.map((post) => {
        return { params: {id: post.id.toString()} }
      });
    
      // const paths = { params: {id: '1' } }
        
      return {
        paths,
        fallback: false
     
      }
     
    }

Answer 4

It seems that to successfully utilize axios within the specified function, you need to establish a context first. Alternatively, you could convert the axios response to JSON using json.stringify and then parse it using json.parse. Another option is to simply use the fetch method.

If you are working with the next API folder, avoid calling fetch or axios directly in this section. Instead, treat the query as if you were operating in a node environment.

export async function getStaticPaths() {
      const requestData = await fetch("url")
      const jsonData = await requestData.json()
      
      jsonData.map(item => console.log(item))
     
      const paths = jsonData.map((post) => {
        return { params: {id: post.id.toString()} }
      });
    
      // const paths = { params: {id: '1' } }
        
      return {
        paths,
        fallback: false
     
      }
     
    }

The error message "data.map is not a function" is thrown in the getStatic

Answer №1

Answer №2

Similar questions

The AJAX Request has indicated that the entity provided is not in an accurate 'application/json' format. It seems to be missing or empty, leading to an error with a code of '400'

Utilizing JSON data from Google Maps Matrix with JavaScript

Troubleshooting Problems with File Upload Response in ASP.Net MVC Ajax.BeginForm

Is there a way to monitor and trigger a function in jQuery when a loaded PHP file is modified?

Minimize API Requests in Your AngularJS Application

JavaScript and JSON interchangeably, the first AJAX response should be rewritten by the second response

Exploring the Distinctions among JavaScript Objects

Manipulating arrays and troubleshooting Typescript errors in Vue JS

What methods can be used to optimize web page designs for varying levels of user privilege?

The text fields keep duplicating when the checkbox is unchecked

When initiating Selenium RC, custom commands in the user-extensions.js file fail to load

Reveal a concealed div upon submitting an HTML form to display the resulting output

An unexpected error occurred: Angular is still not functioning correctly even though ng-route has been

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Unable to showcase array JSON values on HTML using ng-model

What is the best approach to modify a user-inserted value on a webpage with both javascript and php?

In NextJS 12, an UnhandledPromiseRejectionWarning occurs when trying to reference the TextEncoder which is not defined

What is the solution for the error "BREAKING CHANGE: webpack < 5 used to automatically include polyfills for node.js core modules"?

When JSON.stringify is used to convert an object to JSON, it will result in

JavaScript encountered an abrupt cessation of input, catching us off guard