scalajs-apollo-PostsView.scala

package com.apollographql.scalajs

import me.shadaj.slinky.core.StatelessComponent
import me.shadaj.slinky.core.facade.ReactElement
import me.shadaj.slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.annotation.ScalaJSDefined

object PostsView extends StatelessComponent {
  type Props = AllPostsQuery.Props // we use the static Props type from our generated code as the props for 
  // this is where we create the definition class, which maps to an ES6 class for defining a component
  
  @ScalaJSDefined
  class Def(jsProps: js.Object) extends Definition(jsProps) {
    override def render(): ReactElement = {
      div(
        props.data.map[ReactElement] { d => // if we have a result
          d.posts.toList.flatten.flatten.map { post =>
            // for each not-null post (we use flattens here to remove the null values)
            div(key := post.id.toString)( // render the post
              h1(post.title.getOrElse[String]("Unknown title")),
              h2(post.votes.getOrElse(0).toString)
            )
          }
        }.getOrElse[ReactElement](h1("loading!"))
      )
    }
  }
  
  // wire the component to our query using the familiar graphql method
  val WithData = graphql(AllPostsQuery)(this)
}