不变违规：期望解析的 GraphQL 文档

Posted 2023-03-08

【中文标题】不变违规：期望解析的 GraphQL 文档

【英文标题】：Invariant Violation: Expecting a parsed GraphQL document

【发布时间】：2020-10-12 16:49:45

【问题描述】：

尽管突变被包装在 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>

【参考方案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
      )
    
  

【讨论】：

此代码导致错误：Invariant Violation: Must contain a query definition.

我的问题中的突变只是一个例子，我确实想在用户被重定向到某个页面时运行它，在我的情况下，用户将被发送到 website.com/token?code=CODE 然后我会使用 code 获取我将使用 apollo 存储的 JWT 令牌。我尝试使用这种方式，但我似乎无法使用createTask() 在export default 中调用该方法。有没有办法在export default 中调用方法？

听起来你想使用像mounted 这样的生命周期钩子，然后从那里调用this.$apollo.mutate。也就是说，由于您使用的是 s-s-r，因此您可能会考虑在页面渲染之前在服务器端执行此操作。

我还是 Web 开发新手并使用 nuxt，我将尝试了解如何做到这一点，谢谢。

【参考方案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'),
......