Recibiendo Parámetros

Clase 8 de 23 • Curso de Next.js 2018

Resumen

En esta clase vamos a ver cómo hacer una de las cosas más cruciales que tenemos en cualquier aplicación, que es recibir parámetros sobre una página.

Julio Hurtado

student•

Me gusta la forma tan sencilla para enviar parámetros, ojalá en seguientes clases se vea alguna forma de hacerlo más bonito, quitar ese ?id= de la url.

Gran clase

Roberto Gonzalez

teacher•

En la clase de Next Routes vemos cómo hacer URLs agradables 😄

Julio Hurtado

student•

Justo vi el temario y supuse que Next Routes lo arreglará, gracias por la respuesta 😄

Juan Castro

teacher•

Si, estoy gritando…

Ricardo José Galarza Palacios

student•

Yo escribí channel.jsx de esta forma me gusta mas:

export default class extends React.Component {
  static async getInitialProps({ query }) {
    let reqChannel = await this.getChannel(query.id);
    let reqAudioClips = await this.getAudioClipsChannel(query.id);
    let reqSeries = await this.getSeries(query.id);
    return {
      channel: reqChannel.channel,
      audio_clips: reqAudioClips,
      series: reqSeries
    };
  }

  static async getChannel(idChannel) {
    let req = await fetch(`https://api.audioboom.com/channels/${idChannel}`);
    let {
      body: { channel }
    } = await req.json();
    return { channel };
  }

  static async getAudioClipsChannel(idChannel) {
    let req = await fetch(
      `https://api.audioboom.com/channels/${idChannel}/audio_clips`
    );
    let dataAudios = await req.json();
    return dataAudios.body.audio_clips;
  }

  static async getSeries(idChannel) {
    let req = await fetch(
      `https://api.audioboom.com/channels/${idChannel}/child_channels`
    );
    let dataSeries = await req.json();
    return dataSeries.body.channels;
  }

  render() {
    const { channel, audio_clips, series } = this.props;
    console.log(this.props);

    return (
      <div>
        <header>Podcasts</header>
        <h1>{channel.title}</h1>

        <h2>Series</h2>
        {series.map(serie => (
          <div>{serie.title}</div>
        ))}

        <h2>Podcast</h2>
        {audio_clips.map(clip => (
          <div>{clip.title}</div>
        ))}
        <style jsx>
          {`
            header {
              color: #fff;
              background: #8756ca;
              padding: 15px;
              text-align: center;
            }
            .channels {
              display: grid;
              grid-gap: 15px;
              padding: 15px;
              grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            a.channel {
              display: block;
              margin-bottom: 0.5em;
              color: #333;
              text-decoration: none;
            }
            .channel img {
              border-radius: 3px;
              box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
              width: 100%;
            }
            h1 {
              font-weight: 600;
              padding: 15px;
            }
            h2 {
              padding: 5px;
              font-size: 0.9em;
              font-weight: 600;
              margin: 0;
              text-align: center;
            }
          `}
        </style>
        <style jsx global>
          {`
            body {
              margin: 0;
              font-family: system-ui;
              background: white;
            }
          `}
        </style>
      </div>
    );
  }
}

Leandro Videla

student•

Por qué desde channel.js no hace falta importar "isomorphic-fetch"? Noto que también estamos usando fetch() en este archivo.

Fernanda Aragon

student•

Hola, el archivo index.js es el comienzo de la aplicación, desde ahí es la única parte donde se importa isomorphic-fetch, en los demás pages funcionará fetch() porque se está importando desde el comienzo.

Jose Daniel Atencio Manzanillo

student•

si noto eso pero tampoco se importa react en el index ? y no entiendo como trabaja nuxt para hacer esas importaciones ??

Gaston Morales

student•

Increible como esta llendo el curso !!!!

GEORGIE WLADIMIR DUARTE CADENAS

student•

como hago para ver el api de esa manera. que plugging usa? yo abro esa url y veo la data pero no me aparece de manera comestible.??

Roger Mora

student•

Hola, por qué en esta página de Channel.js funciona el fetch si no se está importando el isomorphic?

René Sanchez

student•

Esto es por que al estar en la aplicacion inicial cuando se inicial el servidor al adentrarnos en ella ya queda de por si globalizado el isomorphic para utilizar fetch. Por es que podemos desde el channels realizar las consultas y si fueras directo este no funcionaria por que jamas se importo en ningun lugar(si el channnel jamas lo llama) :)

Alex John Chamba Macas

student•

Si a la fecha a alguien se le presenta este warning en consola:

Simplemente deben agregar un key a cada <div/> que nos devuelve la lista:

   <h2>Series</h2>
    {series.map(seri => (
      <div key={seri.id}>{seri.title}</div>
    ))}

   <h2>Ultimos podcasts</h2>
    {audioClips.map(clip => (
      <div>{clip.title}</div>
    ))}

Anthony Farias

student•

Implementacion de channel como componente funcional:

const Channel = ({ channel, audioClips, series }) => {
    return (
        <div>
            <header>Podcast</header>

            <h1>{channel.title}</h1>

            <h2>Ultimos Podcasts</h2>
            {
                audioClips.map((clip, key) => (
                    <div key={key}>{clip.title}</div>
                ))
            }
            <h2>Series</h2>
            {
                series.map((serie, key) => (
                    <div key={key}>{serie.title}</div>
                ))
            }
            <style jsx>
                {
                    `
                    header{
                        color: #fff;
                        background: #8756ca;
                        padding: 15px;
                        text-align: center;
                    }

                    h1{
                        padding: 3px;
                        text-align:center;
                        font-size: 16px
                    }
                    `
                }
            </style>

            <style jsx global>
                {
                    `
                body{
                    background: white;
                    margin:0;
                    font-family: system-ui
                }
                `
                }

            </style>
        </div>
    )
}

Channel.getInitialProps = async ({ query }) => {
    let idChannel = query.id;

    let reqChannel = await fetch(`https://api.audioboom.com/channels/${idChannel}`);
    let dataChannel = await reqChannel.json();
    let channel = dataChannel.body.channel;

    let reqAudio = await fetch(`https://api.audioboom.com/channels/${idChannel}/audio_clips`);
    let dataAudio = await reqAudio.json();
    let audioClips = dataAudio.body.audio_clips;

    let reqSeries = await fetch(`https://api.audioboom.com/channels/${idChannel}/child_channels`);
    let dataSeries = await reqSeries.json();
    let series = dataSeries.body.channels;
    return { channel, audioClips, series };
}

export default Channel```

Anthony Farias

student•

Si se reinicia el servidor y entramos directo a la pagina de channel/:id entonces bota el error de que fetch no está definido. Habrá que definirlo siempre en nuestras paginas.

ASSIST CARD ACI IT

student•

Respuesta a: Recibiendo Parámetros Hola, tengo otra consulta relacionada con nextJS. En este ejemplo channel y audio_clips

me llegan undefined las props. Porq seran?

antes me funcionaba porque devolvia todo de la siguiente forma

  fetch(`https://api.audioboom.com/channels/${query.id}`)
    .then(response =&gt; response.json())
    .then(response =&gt; renameBodytoChannel(response.body));
en este caso channel devolvia valores, pero al agregar audio_clips no me funciona nada 😞

Alessandri Fonseca

student•

Al recibir los parámetros me salia undefined, fue solucionado presionando control + shift + R, para borrar el cache y obtener la data del fetch

Erik Elyager

student•

Los problemas de cache siempre son difícil de detectar. Gracias por el tip.

Alejandro Alipio Cabrera Távara

student•

Alguien sabe que puede estarme pasando ?

Alejandro Alipio Cabrera Távara

student•

Esto es mi codigo

Alejandro Alipio Cabrera Távara

student•

Este el error …

leonardo Oteca

student•

Por que no crear un los componentes reutilizables como el Header

Sergio Alejandro Trejo Cuxim

student•

Lo puedes hacer sin ningún problema, hasta puede ser un componente funcional, no necesita ser un componente de clase

GEORGIE WLADIMIR DUARTE CADENAS

student•

como puedo ver los datos del api en el navegador de forma digerible para ver la estructura? si abro la url me trae los datos pero sin un formato ordenado??

GEORGIE WLADIMIR DUARTE CADENAS

student•

buscaba era ver la info de la api asi como se ve en el video con el formato para entender su estructura y saber como acceder a la info que necesito.

Use potsman que me permite hacer el request y me muestra la respues con unos estilos simpaticos. Me acorde de esta herramienta del curso de node.js

pero gracias por la respuesta

Eduardo Hidalgo Díaz Rugama

student•

también está postman! es igual que insomnia.

Eduardo Rasgado Ruiz

student•

Madre mia Willy!

David Daniel Castillo Nava

student•

Yo grito pero es por que en verdad esto me esta gustando!!

Julio Andrés Ramirez De Freitas

student•

Este es mi JSX Style para tener la misma vista ue mostro al principio.

header {
                        color: #fff;
                        background: #8756ca;
                        padding: 15px;
                        text-align: center;
                    }

                    .channels {
                        display: grid;
                        grid-gap: 15px;
                        padding: 15px;
                        grid-template-columns: repeat(
                            auto-fill,
                            minmax(160px, 1fr)
                        );
                        color: black;
                    }

                    .channel {
                        display: flex;
                        border-radius: 4px;
                        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.15);
                        text-decoration: none;
                        overflow: hidden;
                        transition: all ease 0.2s;
                    }

                    .channel img {
                        margin: auto;
                        width: 100%;
                    }

                    .channel:hover {
                        transform: translateY(-0.5em);
                    }

                    h2 {
                        padding: 5px;
                        font-size: 12px;
                        font-weight: 600;
                        margin: 0.5em 0 0 0;
                        text-align: center;
                    }

Diego Ortiz

student•

Además de Next, me gusta aprender las diferentes sintaxis: async getMethod(parametro) { let query = parametro.query } Es exactamente igual que tener: async getMethod([ query }) { }

ASSIST CARD ACI IT

student•

Hola, tengo otra consulta relacionada con nextJS. En este ejemplo channel y audio_clips

  let channel = fetch(`https://api.audioboom.com/channels/${query.id}`)
    .then(response =&gt; response.json())
    .then(response =&gt; renameBodytoChannel(response.body));
  let audio_clips = fetch(
    `https://api.audioboom.com/channels/${query.id}/audio_clips`
  )
    .then(response =&gt; response.json())
    .then(response =&gt; renameBodytoAudio_clips(response.body));
  return { channel, audio_clips };
};```

me llegan undefined las props. Porq seran?

antes me funcionaba porque devolvia todo de la siguiente forma
```Channel.getInitialProps = ({ query }) =&gt;
  fetch(`https://api.audioboom.com/channels/${query.id}`)
    .then(response =&gt; response.json())
    .then(response =&gt; renameBodytoChannel(response.body));

en este caso channel devolvia valores, pero al agregar audio_clips no me funciona nada :disappointed:

export default class extends React.Component {
  static async getInitialProps({ query }) {
    let reqChannel = await this.getChannel(query.id);
    let reqAudioClips = await this.getAudioClipsChannel(query.id);
    let reqSeries = await this.getSeries(query.id);
    return {
      channel: reqChannel.channel,
      audio_clips: reqAudioClips,
      series: reqSeries
    };
  }

  static async getChannel(idChannel) {
    let req = await fetch(`https://api.audioboom.com/channels/${idChannel}`);
    let {
      body: { channel }
    } = await req.json();
    return { channel };
  }

  static async getAudioClipsChannel(idChannel) {
    let req = await fetch(
      `https://api.audioboom.com/channels/${idChannel}/audio_clips`
    );
    let dataAudios = await req.json();
    return dataAudios.body.audio_clips;
  }

  static async getSeries(idChannel) {
    let req = await fetch(
      `https://api.audioboom.com/channels/${idChannel}/child_channels`
    );
    let dataSeries = await req.json();
    return dataSeries.body.channels;
  }

  render() {
    const { channel, audio_clips, series } = this.props;
    console.log(this.props);

    return (
      <div>
        <header>Podcasts</header>
        <h1>{channel.title}</h1>

        <h2>Series</h2>
        {series.map(serie => (
          <div>{serie.title}</div>
        ))}

        <h2>Podcast</h2>
        {audio_clips.map(clip => (
          <div>{clip.title}</div>
        ))}
        <style jsx>
          {`
            header {
              color: #fff;
              background: #8756ca;
              padding: 15px;
              text-align: center;
            }
            .channels {
              display: grid;
              grid-gap: 15px;
              padding: 15px;
              grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            a.channel {
              display: block;
              margin-bottom: 0.5em;
              color: #333;
              text-decoration: none;
            }
            .channel img {
              border-radius: 3px;
              box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
              width: 100%;
            }
            h1 {
              font-weight: 600;
              padding: 15px;
            }
            h2 {
              padding: 5px;
              font-size: 0.9em;
              font-weight: 600;
              margin: 0;
              text-align: center;
            }
          `}
        </style>
        <style jsx global>
          {`
            body {
              margin: 0;
              font-family: system-ui;
              background: white;
            }
          `}
        </style>
      </div>
    );
  }
}

const Channel = ({ channel, audioClips, series }) => {
    return (
        <div>
            <header>Podcast</header>

            <h1>{channel.title}</h1>

            <h2>Ultimos Podcasts</h2>
            {
                audioClips.map((clip, key) => (
                    <div key={key}>{clip.title}</div>
                ))
            }
            <h2>Series</h2>
            {
                series.map((serie, key) => (
                    <div key={key}>{serie.title}</div>
                ))
            }
            <style jsx>
                {
                    `
                    header{
                        color: #fff;
                        background: #8756ca;
                        padding: 15px;
                        text-align: center;
                    }

                    h1{
                        padding: 3px;
                        text-align:center;
                        font-size: 16px
                    }
                    `
                }
            </style>

            <style jsx global>
                {
                    `
                body{
                    background: white;
                    margin:0;
                    font-family: system-ui
                }
                `
                }

            </style>
        </div>
    )
}

Channel.getInitialProps = async ({ query }) => {
    let idChannel = query.id;

    let reqChannel = await fetch(`https://api.audioboom.com/channels/${idChannel}`);
    let dataChannel = await reqChannel.json();
    let channel = dataChannel.body.channel;

    let reqAudio = await fetch(`https://api.audioboom.com/channels/${idChannel}/audio_clips`);
    let dataAudio = await reqAudio.json();
    let audioClips = dataAudio.body.audio_clips;

    let reqSeries = await fetch(`https://api.audioboom.com/channels/${idChannel}/child_channels`);
    let dataSeries = await reqSeries.json();
    let series = dataSeries.body.channels;
    return { channel, audioClips, series };
}

export default Channel```

  fetch(`https://api.audioboom.com/channels/${query.id}`)
    .then(response =&gt; response.json())
    .then(response =&gt; renameBodytoChannel(response.body));
en este caso channel devolvia valores, pero al agregar audio_clips no me funciona nada 😞

header {
                        color: #fff;
                        background: #8756ca;
                        padding: 15px;
                        text-align: center;
                    }

                    .channels {
                        display: grid;
                        grid-gap: 15px;
                        padding: 15px;
                        grid-template-columns: repeat(
                            auto-fill,
                            minmax(160px, 1fr)
                        );
                        color: black;
                    }

                    .channel {
                        display: flex;
                        border-radius: 4px;
                        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.15);
                        text-decoration: none;
                        overflow: hidden;
                        transition: all ease 0.2s;
                    }

                    .channel img {
                        margin: auto;
                        width: 100%;
                    }

                    .channel:hover {
                        transform: translateY(-0.5em);
                    }

                    h2 {
                        padding: 5px;
                        font-size: 12px;
                        font-weight: 600;
                        margin: 0.5em 0 0 0;
                        text-align: center;
                    }

  let channel = fetch(`https://api.audioboom.com/channels/${query.id}`)
    .then(response =&gt; response.json())
    .then(response =&gt; renameBodytoChannel(response.body));
  let audio_clips = fetch(
    `https://api.audioboom.com/channels/${query.id}/audio_clips`
  )
    .then(response =&gt; response.json())
    .then(response =&gt; renameBodytoAudio_clips(response.body));
  return { channel, audio_clips };
};```

me llegan undefined las props. Porq seran?

antes me funcionaba porque devolvia todo de la siguiente forma
```Channel.getInitialProps = ({ query }) =&gt;
  fetch(`https://api.audioboom.com/channels/${query.id}`)
    .then(response =&gt; response.json())
    .then(response =&gt; renameBodytoChannel(response.body));

Recibiendo Parámetros

Introducción a Next.JS

¿Dónde aprender Next.js actualizado?

¿Qué es Next.JS?

Creando nuestra primera página

Styled JSX

Server Side Rendering

Aprende qué es Server Side Rendering

Intro a getInitialProps

Utilizando el componente Link

Recibiendo Parámetros

Performance de Get Initial Props

Vista de Podcasts

Componentes Reutilizables

Creando componentes en React

Reorganizar la vista de podcasts

Navegación Avanzada

Gestionando Errores

Personalizando errores

¿Cómo diseñar URLs?

Configurando Next Routes

Implementando Next Routes

Vistas Híbridas

Implementar el Modal

Agregando un loader

Publicando nuestra app

Mejores prácticas en Github

Publicar la app con now

Conclusiones del curso