模塊構建失敗：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