Next.js - Axios - API

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
// import fetch from 'isomorphic-unfetch'
import axios from 'axios'

const Index = (props) => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.data.map(({show}) => (
        <li key={show.id}>
          <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
            <a>{show.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = 
  
  async function() {
    // fetch('https://api.tvmaze.com/search/shows?q=batman')
    // const data = await res.json()
  const res = await axios.get('https://api.tvmaze.com/search/shows?q=batman')
  const data = await res.data

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    data: data
  }
}

export default Index

export default class extends React.Component {
static async getInitialProps({ query }) {
let idItem = query.id
let req = await fetch(`http://localhost:3004/api/v1/items/${idItem}`)
//data
let { body: { channel } } = await req.json()
//return { item: item }
return { channel }
}

render() {
const { channel } = this.props

return (
<h1>{ channel.title }</h1>
)
}
}

Varias Request de url API distintas:

let[req1, req2] = awaitPromise.all([
	fetch(url_1),
	fetch(url_2)
])

¿Que diferencia hay entre isomorphic-unfetch y axios al usarlo en next.js?

Hello ! Do you have an example with axios interceptors?

The difference between fetch and axios, just axios gives you more functionality when ordering, but the core of the operation is the same (make requests). At least I see it that way

Highlight and format

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
// import fetch from 'isomorphic-unfetch'
import axios from 'axios'

const Index = (props) => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.data.map(({show}) => (
        <li key={show.id}>
          <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
            <a>{show.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = 
  
  async function() {
    // fetch('https://api.tvmaze.com/search/shows?q=batman')
    // const data = await res.json()
  const res = await axios.get('https://api.tvmaze.com/search/shows?q=batman')
  const data = await res.data

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    data: data
  }
}

export default Index

Original post

export default class extends React.Component {
  static async getInitialProps({ query }) {
    let idItem = query.id
    let req = await fetch(`http://localhost:3004/api/v1/items/${idItem}`)
    //data
    let { body: { channel } } = await req.json()
    //return { item: item }
    return { channel }
  }

  render() {
    const { channel } = this.props

    return (
      <h1>{ channel.title }</h1>
    )
  }
}

^^ Original Comment ^^

let [ res1, res2 ] = await Promise.all([
	fetch(url_1),
	fetch(url_2)
]);

^^ Original Comment ^^