Hashnode API + Angular

Hola, aqui te enseño paso a paso lo que debes hacer para incorporar tus publicaciones de Hashnode en tu aplicación de Angular. Cabe destacar que debes tener conocimientos básicos del framework y el uso de APIs.

Hashnode API Playground

Si no tienes familiaridad con GraphQL, te recomiendo que pruebes la api-playground que ofrece Hashnode y te familiarices con ella, con los queries disponibles y las respuestas de esta.

query {
  #Query to get all the posts an specific user has
  #You specify which attributes you want to get
  user(username: "svidea") {
    publication {
      posts(page: 0) {
        title
        brief
        slug
        coverImage
      }
    }
  }

#Query to get the posts from your feed
  storiesFeed(type: FEATURED, page: 0){
    title
    brief
    slug

  }
}

Recuerda que tienes acceso a los documentos para conocer que campos y a qué queries puedes acceder.

Trae (fetch) tus posts

Pasos:

1. Component.html: En mi caso utilicé filas y columnas para mostrar la información con un poco de css y bootstrap. Si planeas utilizar tablas u otra forma de mostrar tu inforomación es el mismo procedimiento utilizando el *ngFor para obtener los objetos del arreglo.

2. Utilicé un botón de "Leer más" que me redirige al web de hashnode con el post que quiero leer.

            <div class="col-md-4 service-box" *ngFor="let post of posts">
              <img src="{{post.coverImage}}" style="width:600px; height: 200px;" alt="image" class="img-responsive" />
                <h3>{{post.title}}</h3>
                <div class="h-10"></div>
                <p style="color: grey;">{{post.brief}}</p>
                <a class="btn btn-warning" href="https://svidea.hashnode.dev/{{post.slug}}" target="_blank" role="button">Read more</a>
            </div>
   

3. Component.ts: Crea una constante con el query que deseas obtener (recuerda haberlo probado en el api playground para no cometer errores en la patición).

    /* Usalo antes del @Component({...})
    *  Recuerda cambiar el "svidea" por el nombre de usuario
    *  del que quieras obtener los posts.
    */
    const QUERY_HASNODE = `
    query GetUserArticles($page: Int!) {
        user(username: "svidea") {
            publication {
                posts(page: $page) {
                    title
                    brief
                    slug
                    coverImage
                }
            }
        }
    }
    `;
   

4. Component.ts: Crea tu función para traer los datos.

    async getPosts(query:any, variables={}) {
      const data = await fetch('https://api.hashnode.com/', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
          },
          body: JSON.stringify({
              query,
              variables
          })
      });
      return data.json();
    }
   

5. Component.ts: Llama tu función en el lugar donde lo necesitas. En mi caso quiero mostrar la información al cargar el componente, por ese motivo lo llamo en el ngOnInit().

    /*Esta variable es la que utilizamos en el *ngFor
    * del component.htmlm
    */
    posts: any;
   
    ngOnInit(){
      this.getPosts(QUERY_HASNODE, { page: 0 })
        .then(result => {
            this.posts = result.data.user.publication.posts;
    });
    }
   

6. Browser: Corre tu app y disfruta de la magia jaja.

   

Info Adicional

Hashnode API token - Auth

Si, algunos queries requieren autenticación. Puedes tener tu PAT (Token de Acceso Personal) desde el "developers settings". Si no has generado nunca tu token, presiona el botón "Generate New Token".

Para el ejemplo de este post no fue necesario el uso del PAT, pero algunos queries pueden ser más complejos, y que éste sea necesario.

Conclusiones

Con el API de Hashnode puedes:

• CRUD

• Obtener las respuestas a tus posts, los me gusta y muchas cosas más.

Este es un ejemplo básico, pero como siempre puedes crear cosas enormes conociendo el manejo del api con el framework que utilizas.

---

Frase del dia: "Los pasitos de tortuga también son pasitos, no te rindas".