v1.js

view Gallery {
  let data

  (async () =>
    data = await fetch.data($`
      User {
        pictures(first: 10) {
          count, pictures
        }
      }
    `)
  )()
  
  <loading if={!data} />
  <pictures repeat={data.pictures}>
  </pictures>
}

v2.js

view Gallery {
  let data

  fetch.data($`
    User {
      pictures(first: 10) {
        count, pictures
      }
    }
  `).then(_ => data = _)
  
  <loading if={!data} />
  <pictures repeat={data.pictures}>
  </pictures>
}

v3.js

view Gallery {
  let data = await fetch.data($`
    User {
      pictures(first: 10) {
        count, pictures
      }
    }
  `)
  
  // downside is how do you show loading state (what shows while loading)
  
  <loading if={!data} />
  <pictures repeat={data.pictures}>
  </pictures>
}

v4.js

view Gallery {
  fragment data = `
    User {
      pictures(first: 10) {
        count, pictures
      }
    }
  `
  
  // downside is now you have a variable changing but no good way to react to it, unless you do view.render()
  
  <loading if={!data} />
  <pictures repeat={data.pictures}>
  </pictures>
}

v5.js

@fragment( `
    User {
      pictures(first: 10) {
        count, pictures
      }
    }
  `)
view Gallery {
  prop data
  
  // downside is now you have a variable changing but no good way to react to it, unless you do view.render()
  
  <loading if={!data} />
  <pictures repeat={data.pictures}>
  </pictures>
}