不变冲突:期待解析的GraphQL文档

Question

尽管gql标记中包含了突变，但我还是得到了以下错误：

Invariant Violation: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql

这个问题只是由下面的变异代码引起的，我有一个可以工作的查询。

代码：

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    createTask: {
      mutation: gql`
        mutation Task(
          $taskName: String!
          $taskDesc: String!
        ) {
          setSession(
            taskName: $taskName
            taskDesc: $taskDesc
          ) {
            id
            taskName
          }
        }
      `,
      variables() {
        return {
          taskName: this.res.data.task_name,
          taskDesc: this.res.data.task_description,
        }
      },
    },
  },
  data() {
    return {
      createTask: '',
    }
  },
}
<script>

Answer 1

智能查询使用apollo对象声明，并在组件挂载时运行。如果您有希望以这种方式运行的查询，那么您的代码将如下所示：

export default {
  apollo: {
    someQuery: gql`...`,
  }
}

但是，在处理突变时，通常不希望在挂载上运行它们。相反，您想要执行突变以响应某些用户操作，比如按钮单击。所以上面的语法不适用于突变。相反，您需要直接在一个方法中调用this.$apollo.mutate：

export default {
  methods: {
    createTask() {
      this.$apollo.mutate({
        mutation: gql`...`,
        variables: {...},
        // other options
      }).then(result => {
        // do something with the result
      })
    }
  }
}

Answer 2

最近我遇到了这个问题，这是因为我正在使用vue-阿波罗的异步导入的问题。

    async account () {
      return {
        query: (await import('src/modules/accounts/graphql/accounts.list.query.gql')),
......

我只需要用一个要求来代替那个进口，它又高兴了。

    async account () {
      return {
        query: require('src/modules/accounts/graphql/accounts.list.query.gql'),
......