Support for graphql as an element

[alexbowers]

Support for GraphQL would be pretty neat, to populate the object on load.

Something like this:

 <graphql>
{
    user {
        name
        email
        address_line_1
    }
}
 </graphql>

Which would then be able to fill the data object and redraw the view.

This would only be used for an on-load fetch

[yyx990803]

wow that's a neat idea!

[alexbowers]

I'm glad your interested. I can put some work into it if you want a PR, but obviously this is your project; so you understand it best. Would you like me to try it.

[yyx990803]

I currently don't have time to look into this, but it would be interesting to think through the design details first - e.g.

• how would the full usage code look like, including JS and templates?
• what integration layer to use? (raw graphql-js? vue-apollo?)
• how about mutations? if user still needs considerable gql usage in JS, is this idea worth it?

[alexbowers]

I'll throw together an ideal usage example when I get the chance, probably this weekend.

I think raw graphql-js would be the best way to go about this.

A good starting point would be to simply let the user fetch data only (no mutations, queries only). We can always expand on it later on. Start simple, and see if people actually find this useful and want to use it.

In terms of whether its worth it, i think it will be, even just for the initial fetching of data; if we can simplify that process, then thats a good start.

[alexbowers]

I'm having trouble setting this up for testing it locally. Is the best way to do it to go TDD on it, and create some test files in the test folder and try to get the code to pass, or is there a better way?

Perhaps a contribution.md file to explain the best way to contribute would be good :)

[yyx990803]

Which branch are you working on? Make sure to work on top of next instead of master.

[alexbowers]

Ah. I was working on master. Okay, i'll switch my base :)

[alexbowers]

I'm trying to run the tests from the next branch; but get this on npm install:

npm WARN eslint-config-vue@1.1.0 requires a peer of eslint-plugin-html@^1.5.2 but none was installed.

is there anything i'm doing wrong?

[yyx990803]

that was a peer dep of eslint-config-vue after update. Just install it and should be fine

[alexbowers]

Should it be saved into the package.json file or is it supposed to not be installed automatically?

E: tests pass when I install it.

[yyx990803]

It should, it's just not updated yet.

[alexbowers]

What do you think of this as something to aim for?

<template>
    <div>
        Starwars Film: {{ film.title }}
        Directed by: {{ film.director }}
    </div>
</template>

<graphql>
{
    film(filmID: 1) {
        title
        director
    }
}
</graphql>

<script>
    export default {
        props: ['film'],
        data(graphql) {
            return graphql
                .success(function(data) {
                    return {
                        film: data.film
                    }
                })
                .error(function(errors) {
                    // Handle errors here
                })
        }
    }
</script>

Example Used:

http://graphql-swapi.parseapp.com/?query=%7B%0A%20%20film(filmID%3A%201)%20%7B%0A%20%20%20%20title%0A%20%20%20%20director%0A%20%20%7D%0A%7D