React Relay Error «Объект не найден метод»

Question

Я работал с реакцией честно и думал, что начну играть с графиком и реле. Я попал в сообщение об ошибке, и я не могу понять, может ли кто-нибудь здесь встретить то же самое. Любые указатели или идеи будут приветствоваться.

Ошибки я получаю

Error: GraphQL validation/transform error ``Object has no method 'find'`` in file `/Users/chris/Documents/App/site/js/main.js`. 

Так что у меня работает сервер GraphQL и все работает отлично, я могу запросить базу данных бэкэнда (я использую MongoDB) и следующий запрос выдает правильные результаты через graphql щий

{ 
    store{ 
    items{ 
     _id 
     title 
     sub 
    } 
    } 
} 

produces the following output which is correct 

{ 
    "data": { 
    "store": { 
     "items": [ 
     { 
      "_id": "56e2c71d150040c491c73b26", 
      "title": "Test Item One", 
      "sub": "sub title here" 
     } 
     ] 
    } 
    } 
} 

Так что я думаю, что его с уверенностью предположить, что сервер graphql прекрасно и проблема должна быть с моей реализацией реле или babelRelayPlugin.js

Ниже приведен файл main.js с упрощенным способом рендеринга.

import React from 'react'; 
import Relay from 'react-relay'; 


class Main extends React.Component { 

    render(){ 
     return (
      <div> 
       <p>Test</p> 
      </div> 
     ); 
    } 
} 

Main = Relay.createContainer(Main, { 
    fragments:{ 
     store:() => Relay.QL` 
      fragment on Store { 
       items { 
        title, 
       } 
       } 
      ` 
    } 
}); 

export default Main; 

Ниже приводится App.js файл

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Relay from 'react-relay'; 
import Main from './main' 

//React.render(<Main />, document.getElementById('react-main-mount')); 

class HomeRoute extends Relay.Route { 
    static routeName = 'Home'; 
    static queries = { 
     store:(Component) => Relay.QL` 
     query MainQuery { 
      store { ${Component.getFragment('store')}} 
     }` 
    } 
}; 

ReactDOM.render(<Relay.RootContainer 
        Component={Main} 
        route={new HomeRoute()} 
       />, 
       document.getElementById('react-main-mount') 
       ); 

Для полноты здесь является schema.js я использую.

import { GraphQLSchema, 
     GraphQLObjectType, 
     GraphQLList, 
     GraphQLInt, 
     GraphQLString 
     } from 'graphql'; 

// Schema allows us to use node feature to link the schema to the database 
let Schema = (db) => { 
let store = {}; 

let storeType = new GraphQLObjectType({ 
    name:'Store', 
    fields:() => ({ 
     items: { 
      type: new GraphQLList(itemType), 
      resolve:() => db.collection("Item").find({}).toArray() 
     } 
    }) 
}); 

let itemType = new GraphQLObjectType({ 
    name: 'Item', 
    fields:() =>({ 
     _id:{type: GraphQLString}, 
     title: {type: GraphQLString}, 
     sub:{type:GraphQLString}, 
     type:{type:GraphQLString}, 
     comments:{type:GraphQLInt} 
    }) 
}); 

let schema = new GraphQLSchema({ 
    query: new GraphQLObjectType({ 
     name:'Query', 
     fields:() => ({ 
      store: { 
       type: storeType, 
       resolve:() => store 
      } 

     }) 
    }), 
}); 
    return schema; 
}; 
export default Schema; 

, который преобразуется в формат JSON на сервере показан здесь

let app = express(); 
app.use(express.static('site')); // public folder 

console.log("Starting Server"); 
//mongo url is the server 
(async() => { 
    try{ 
    let db = await MongoClient.connect("mongodb://localhost:27017/App"); 
    let schema = Schema(db); 

    app.use('/graphql', GraphQLHTTP({ 
     schema, 
     graphiql:true 
    })); 

    app.listen(3000,() => console.log('listening on port 3000')); 

    // Generate Schema 
    let json = await graphql(schema, introspectionQuery); 
    fs.writeFile('./database/schema.json', JSON.stringify(json,null,2), err => { 
     if(err) throw err; 
     console.log("JSON schema created"); 
    }); 
    }catch(e){ 
     console.log(e); 
    } 
})(); 

И babelRelayPlugin.js ниже

var getBabelRelayPlugin = require('babel-relay-plugin'); 
var schemaData = require('./database/schema.json').data; 
module.exports = getBabelRelayPlugin(schemaData); 

И Webpack.config

module.exports = { 
    entry:'./site/js/app.js', 
    output:{ 
     path: __dirname + "/site", 
     filename: "bundle.js" 
    }, 
    module:{ 
     loaders:[ 
      {test:/\.js$/, exclude:/node_modules/, loader: 'babel-loader', 
      query: {presets: ['react', 'es2015', 'stage-0'], 
        plugins: ['./babelRelayPlugin'] 
        } 
      } 
     ] 
    } 
} 

UPDATE: Так что я был немного побаловаться, и проблема заключается в main.js RelayQL заявление

Main = Relay.createContainer(Main, { 
     fragments:{ 
      store:() => Relay.QL` 
       fragment on Store { 
        items { 
         title, 
        } 
        } 
       ` 
     } 
    }); 

Я закомментирована код в app.js и заменить его следующим кодом в виде тест, чтобы увидеть, если основной базовый релейный запрос работал и делал, возвращая правильный вывод на консоль

ReactDOM.render(<Main />, document.getElementById('react-main-mount')); 
console.log(Relay.QL`query store { store{ items {title}}}`); 

так как я уже упоминал выше, вопрос должен быть, я подозреваю, с действительно утверждением в main.js, теперь вопрос почему?

Для общей полноты я включил полный стек ошибок трассировки ниже

-- Relay Transform Error -- main -- 

File: /Users/chris/Documents/App/site/js/main.js 
Error: TypeError: Object has no method 'find' 
    at new RelayQLFragment (/Users/chris/Documents/App/node_modules/babel-relay-plugin/lib/RelayQLAST.js:143:49) 
    at RelayQLTransformer.processDocumentText (/Users/chris/Documents/App/node_modules/babel-relay-plugin/lib/RelayQLTransformer.js:156:16) 
    at RelayQLTransformer.transform (/Users/chris/Documents/App/node_modules/babel-relay-plugin/lib/RelayQLTransformer.js:67:29) 
    at PluginPass.TaggedTemplateExpression (/Users/chris/Documents/App/node_modules/babel-relay-plugin/lib/getBabelRelayPlugin.js:124:36) 
    at newFn (/Users/chris/Documents/App/node_modules/babel-traverse/lib/visitors.js:262:19) 
    at NodePath._call (/Users/chris/Documents/App/node_modules/babel-traverse/lib/path/context.js:63:18) 
    at NodePath.call (/Users/chris/Documents/App/node_modules/babel-traverse/lib/path/context.js:47:17) 
    at NodePath.visit (/Users/chris/Documents/App/node_modules/babel-traverse/lib/path/context.js:93:12) 
    at TraversalContext.visitQueue (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:146:16) 
    at TraversalContext.visitSingle (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:115:19) 
    at TraversalContext.visit (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:178:19) 
    at Function.traverse.node (/Users/chris/Documents/App/node_modules/babel-traverse/lib/index.js:135:17) 
    at NodePath.visit (/Users/chris/Documents/App/node_modules/babel-traverse/lib/path/context.js:103:22) 
    at TraversalContext.visitQueue (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:146:16) 
    at TraversalContext.visitMultiple (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:110:17) 
    at TraversalContext.visit (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:176:19) 
    at Function.traverse.node (/Users/chris/Documents/App/node_modules/babel-traverse/lib/index.js:135:17) 
    at NodePath.visit (/Users/chris/Documents/App/node_modules/babel-traverse/lib/path/context.js:103:22) 
    at TraversalContext.visitQueue (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:146:16) 
    at TraversalContext.visitSingle (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:115:19) 
    at TraversalContext.visit (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:178:19) 
    at Function.traverse.node (/Users/chris/Documents/App/node_modules/babel-traverse/lib/index.js:135:17) 
    at NodePath.visit (/Users/chris/Documents/App/node_modules/babel-traverse/lib/path/context.js:103:22) 
    at TraversalContext.visitQueue (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:146:16) 
    at TraversalContext.visitSingle (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:115:19) 
    at TraversalContext.visit (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:178:19) 
    at Function.traverse.node (/Users/chris/Documents/App/node_modules/babel-traverse/lib/index.js:135:17) 
    at NodePath.visit (/Users/chris/Documents/App/node_modules/babel-traverse/lib/path/context.js:103:22) 
    at TraversalContext.visitQueue (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:146:16) 
    at TraversalContext.visitMultiple (/Users/chris/Documents/App/node_modules/babel-traverse/lib/context.js:110:17) 

Answer 1

В вашем HomeRoute:

class HomeRoute extends Relay.Route { 
    static routeName = 'Home'; 
    static queries = { 
     store:(Component) => Relay.QL` 
     query MainQuery { 
      store { ${Component.getFragment('store')}} 
     }` 
    } 
}; 

вы пробовали просто:

static queries = { 
     store:() => Relay.QL` 
     query MainQuery { 
      store 
     }` 
    }