GraphQLError: синтаксическая ошибка: неожиданное имя «import»

Question

Я хотел использовать файл .grapgql для моих запросов, но я получил

ОШИБКА в ./src/myfilepath/queries.graphql Ошибка сборки модуля (из (webpack) -graphql-loader / lib / loader. js): GraphQLError: Синтаксическая ошибка: неожиданное имя «import»

Если я верну его обратно в файл. js, он будет работать нормально.

Я попытался шаги здесь https://www.npmjs.com/package/webpack-graphql-loader

npm install --save-dev webpack-graphql-loader 

npm install --save-dev graphql 

И

Добавьте webpack-graphql-loader в вашу конфигурацию webpack:

module.exports = {
  // ...
  module: {
    rules: [ // or "loaders" for webpack 1.x
      { test: /\.graphql?$/, loader: 'webpack-graphql-loader' }
    ]
  }
}

Но это все еще происходит.

Это содержимое одного из файлов

import gql from 'graphql-tag'

export const CONTACT_MUTATION = gql`
 mutation CreateSubmissionMutation($clientMutationId: String!, $firstName: String!, $lastName: String!, $email: String!, $message: String!){
    createSubmission(input: {clientMutationId: $clientMutationId, firstName: $firstName, lastName: $lastName, email: $email, message: $message}) {
      success
      data
    }
  }
`

Спасибо

Answer 1

Вы не можете иметь синтаксис JavaScript внутри файла, который должен быть просто GraphQL. Измените содержимое файла на ваш запрос:

mutation CreateSubmissionMutation($clientMutationId: String!, $firstName: String!, $lastName: String!, $email: String!, $message: String!){
  createSubmission(input: {clientMutationId: $clientMutationId, firstName: $firstName, lastName: $lastName, email: $email, message: $message}) {
    success
    data
  }
}

Загрузчик проанализирует содержимое файла и вернет DocumentNode так же, как graphql-tag - строку.