为什么apollo muation在vuex中会返回 "期待一个已解析的GraphQL文档"？

Question

我试图从vuex的动作中执行apollo mutation，但它总是返回这个错误："Expect a parsed GraphQL document"。但它总是返回这个错误。

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 actions中的突变调用。

async submitReservation({ state, 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',
    },
  ],
},