模块构建失败：GraphQLError

Question

我无法理解的错误，我添加graphq-tag解析中的WebPack配置文件中.graphql如下图所示

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

，以下是我.graphql文件

import {gql} from 'react-apollo'; 

const query = gql` 
    query { 
    userCurrent{ 
     profile { 
     name 
    } 
    appRoles, 
    username, 
    authEmail { 
     address 
    } 
    orgs { 
     userOrgRoles 
     orgId 
     name 
     orgRoles 
    } 
    currentOrg { 
     orgId 
     userOrgRoles 
     name 
     orgRoles 
    } 
    } 
}`; 

export default query; 

错误

ERROR in **./src/modules/goin_users/client/graphql_queries/user_graphql_queries.graphql 
[2] Module build failed: GraphQLError** 
[2]  at syntaxError (/home/sairam/Downloads/goin/goin/node_modules/graphql-tag/bundledParser.js:1349:16) 
[2]  at unexpected (/home/sairam/Downloads/goin/goin/node_modules/graphql-tag/bundledParser.js:1043:34) 
[2]  at parseDefinition (/home/sairam/Downloads/goin/goin/node_modules/graphql-tag/bundledParser.js:206:10) 
[2]  at parseDocument (/home/sairam/Downloads/goin/goin/node_modules/graphql-tag/bundledParser.js:160:23) 
[2]  at parse (/home/sairam/Downloads/goin/goin/node_modules/graphql-tag/bundledParser.js:97:11) 
[2]  at parseDocument (/home/sairam/Downloads/goin/goin/node_modules/graphql-tag/index.js:125:16) 
[2]  at gql (/home/sairam/Downloads/goin/goin/node_modules/graphql-tag/index.js:158:10) 
[2]  at Object.module.exports (/home/sairam/Downloads/goin/goin/node_modules/graphql-tag/loader.js:27:18) 

Answer 1

你.graphql文件应该只包含简单的查询，而不是javascript代码：

query { 
    userCurrent{ 
     profile { 
     name 
    } 
    appRoles, 
    username, 
    authEmail { 
     address 
    } 
    orgs { 
     userOrgRoles 
     orgId 
     name 
     orgRoles 
    } 
    currentOrg { 
     orgId 
     userOrgRoles 
     name 
     orgRoles 
    } 
} 

然后，只需导入：

import query from './query.graphql'; 

console.log(query); 
// { 
// "kind": "Document", 
// ... 

graphql-tag装载机将处理其余部分。

有单独的文件中只是简单的查询可以让你获得和自动建议查询突出的优势，直接在代码编辑器中使用：

• 插件VSCode
• 插件Atom