为什么apollo muation在vuex中返回“期望一个已解析的GraphQL文档”？

Question

我正在尝试从vuex动作中执行一个阿波罗变异。但它总是返回以下错误：

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 

下面是我导入GraphQL文件的方式：

import addReservationGql from "@/gql/mutation/addReservation.gql";

下面是GeaphQL突变文件：

mutation addReservation($reservation:ResrevationInput){
  addReservation(reservation:$reservation){
    code
    success
    message
    reservation{
      createdAt
      numberOfPeople
      desiredDate
      desiredTime
      reservationStatus
    }
  }
}

下面是我在vuex操作中的突变调用：

异步状态({submitReservation，commit }) {

    const userId = this.$cookies.get("user-id");
    const reservation = {
        numberOfPeople: state.numberOfPeople,
        desiredDate: state.reservationDate,
        desiredTime: state.reservationTime,
        reservedBy: userId
    };

    try {
        let client = this.app.apolloProvider.defaultClient;
        const response = await client.mutate({
            mutation: addReservationGql,
            variables: { reservation }
        });
        // do something with response


    } catch (err) {
      console.log('error',err.message);
    }
}

Answer 1

默认情况下，webpack没有配置gql或graphql文件。您需要显式添加配置。

安装所需的软件包。

npm i graphql-tag --save

那就配置一下webpack吧。

module: {
  rules: [
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    },
  ],
},