zephraph / vue-graphql-loader

Custom block support for GraphQL operations in Vue's single file components
MIT License
50 stars 0 forks source link

Support for fragments? #60

Open georgyfarniev opened 5 years ago

georgyfarniev commented 5 years ago

Hello. Is it possible to use fragment with this loader? How about having this feature?

iBobik commented 4 years ago

My use-case for this is about moving parts of the query to child components what will render that data:

Gallery.vue:

<template>
  <div>
    <a
      v-for="(item, index) in mediaFieldItems"
      :key="index"
      :href="item.entity.fieldMediaImage.full.url"
    >
      <img
        :src="item.entity.fieldMediaImage.thumb_s.url"
      >
    </a>
  </div>
</template>
<script>
export default {
  props: {
    mediaFieldItems: { type: Array, required: true }
  },
}

export const MediaPhotoFragment = `
  on MediaPhoto {
    fieldMediaImage {
      thumb_s:derivative (style: W180X2) {
        url
      }
      full:derivative (style: FULL) {
        url
      }
    }
  }
`
</script>

_slug.vue:

...
<script>
import Gallery, { MediaPhotoFragment } from '~/components/Gallery'
export default {
  asyncData ({ params, app, redirect, error }) {
    app.$graphql.fragment({ MediaPhotoFragment })
    return app.$graphql.query(`
      query ($path: String!) {
        route:route(path: $path) {
          ... on EntityCanonicalUrl {
            entity {
              fieldGallery { entity { ...MediaPhotoFragment } }
...