我一直在使用reactjs，并认为我应该开始使用graphql和relay。我遇到了一个无法弄清楚的错误，所以我想知道这里是否有人遇到过同样的情况。欢迎任何指示或想法。
我收到的错误是
Error: GraphQL validation/transform error ``Object has no method 'find'`` in file `/Users/chris/Documents/App/site/js/main.js`.
所以我有一个 GraphQL 服务器正在运行，一切正常，我可以查询后端数据库(我使用的是 mongodb)，并且以下查询通过 graphql ui 生成正确的结果
{
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 的实现上
以下是经过简化的 render 方法的 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']
}
}
]
}
}
更新: 所以我玩了一下，问题出在 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 中的 real 语句，现在的问题是为什么？
为了完整起见，我在下面包含了完整的错误堆栈跟踪
-- 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)
最佳答案
在您的 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
}`
}
关于reactjs - react 继电器错误 'Object has no method find'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35971738/