Idea: custom vue sfc section for graphql queries

Hello. I’ve got interesting idea: what if we implement custom vue sfc section, like <graphql/> and will store component-related graphql queries there? I think it would be nice to have alternative of embedding graphql query into script or store them in separate files. Something like this:

<graphql>
query someQuery { ... }
</graphql>

<script>
export default {
  mounted() {
    this.$apollo.query({
      query: this.queries.someQuery
    })
    // ....
  }
}
</script>

According to Vue SFC specification, it is possible to define custom block for different purposes.

It has two advantages, from my perspective:

  1. Keeping component-related graphql queries in SFC
  2. Prevent section from pollution by large queries (it’s inconvenient to indent queries right in data() function)

I’m not very familiar with implementation of custom vue sfc loaders, so I don’t know if it’s possible to “inject” queries declared in separate section into execution scope? Also I would like to hear what people think about this idea.

Here I just want to know your opinion about this idea. Thanks for your attention.

P.S: copied by me from https://github.com/Akryum/vue-apollo/issues/682

Oh, I see that there’s already existing loader for this: vue-graphql-loader. Closing this one…

1 Like