Vue-apollo: gql template literal can't find variables

[ameistad]

I'm trying to make a simple mutation to log in to a GraphQL api and I get this error:

ApolloError.js?d743:34 Uncaught (in promise) Error: GraphQL error: Variable '$email' is not defined. (line 2, column 29):
signinUser(email: {email: $email, password: $password}) {
^
(line 1, column 1):
mutation {
^
GraphQL error: Variable '$password' is not defined. (line 2, column 47):
signinUser(email: {email: $email, password: $password}) {
^
(line 1, column 1):
mutation {
^
at new ApolloError (ApolloError.js?d743:34)
at eval (QueryManager.js?2cbe:129)
at

Queries without template literal variables works fine.
I'm using:

• apollo-client 1.9.1
• vue-apollo-beta.21
• vue 2.3.3

This is my Vue component that is calling the mutation:
```

I'm using the Vue webpack template and this is my main.js config file:

// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// Apollo
import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
import VueApollo from 'vue-apollo'

const apolloClient = new ApolloClient({
networkInterface: createBatchingNetworkInterface({
uri: 'https://api.graph.cool/simple/v1/cj6nldc9p1icq0178n1pyow9i'
}),
connectToDevTools: true
})

Vue.use(VueApollo)

const apolloProvider = new VueApollo({
defaultClient: apolloClient
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
apolloProvider,
template: '',
components: { App }
})
```

[Akryum]

You need to declare the variables inside the graphql document:

          gql`mutation login($email:String!, $password:String!) {
            signinUser(email: { email: $email, password: $password }) {
              token
            }
          }`

[ameistad]

Thanks and sorry about that! I can't believe I missed that. It's right there in the documentation.