[Docs] Clarify using api functions in getStaticProps/getStaticPaths

Feature request

At the end of the getStaticProps api specification there’s the following text:

Note: You should not use fetch() to call an API route in your application. Instead, directly import the API route and call its function yourself. You may need to slightly refactor your code for this approach.

Fetching from an external API is fine!

I think adding an example like this, would be helpful to instruct how you can actually use your own API in getStaticProps. The following code shows that you have to return something instead of using res.send() which would be undefined. Also, this is also true for getStaticPaths right?.

export default async function functionName() {
  const handler = await fetch(//...'); // Fetch or do something else
  const response = await handler.json();
  
  return response;
}

import functionName from './api/functionName'

//...

export default async function getStatticProps() {
  const response = await functionName();

  //...

}

[awareness481]

@vladandrei0 Yes, but only in the case you want to fetch your own api in getXYProps.

So for example, the code below would not work

export async function getStaticProps() {
  const data = await fetch('http://localhost:3000/api/method')
  
  return {
    props: {
      data
   }
  }
}

because you’re fetching your own api in getStaticProps. Instead you would create a function like in the code you quoted.

[mkamranhamid]

Are you saying that the below code

export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

should be transformed in to

// post.js
export const fetchPosts = async () => {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  return posts
}

// index.js
import { fetchPosts } from 'post.js'
...
...
export async function getStaticProps() {
  const posts = await fetchPosts();
  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}