不变违规：期待一个已解析的 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

Smart queries 是使用 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-apollo

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

我只需要用 require 替换那个导入，它又很高兴。

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

不变违规：期待一个已解析的 GraphQL 文档

Invariant Violation: Expecting a parsed GraphQL document

graphql

nuxt.js

apollo

vue-apollo