反应中继错误'对象没有方法找到'
Posted
技术标签:
【中文标题】反应中继错误\'对象没有方法找到\'【英文标题】：React Relay Error 'Object has no method find'反应中继错误'对象没有方法找到' 【发布时间】：2016-06-28 13:24:32 【问题描述】：我一直在使用 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
以下是简化渲染方法的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 中的真正声明，现在问题是为什么？
为了完整起见，我在下面包含了完整的错误堆栈跟踪
-- 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)
【问题讨论】：
【参考方案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
`
【讨论】：
简化 HomeRoute 的好主意，（诚然我没有尝试过）但不幸的是我仍然遇到同样的问题，我认为语法是正确的，我认为问题可能与连接设置有关本身作为运行'webpack -wd'会产生错误 错误似乎指向商店 -> 字段 -> 项目 ->resolve:() => db.collection("Item").find().toArray() 的 GraphQL 架构。也许不是使用 .find()，而是尝试返回一个固定的项目数组，看看问题是否消失。
不幸的是，没有同样的问题。 GraphQL 服务器工作令人费解，生成的 JSON 看起来正确，我可能需要在重新安装一些模块后再次重新实现中继端。 - 为建议干杯
我看到了你刚刚在console.log(Relay.QL`query store store items title`); 处所做的更新，它奏效了！但是，执行此查询类似于您的 HomeRoute 执行它，而不是您的 Main Relay 片段代码执行它，这就是您要比较的。尝试使用您在 console.log 中使用的相同的 Relay.QL 更新 HomeRoute。
或者，您可以尝试将现有的 HomeRoute 查询填充到 console.log 中：console.log(Relay.QL`query MainQuery store $Component.getFragment('store') `)。这行得通吗？以上是关于反应中继错误'对象没有方法找到'的主要内容，如果未能解决你的问题，请参考以下文章
类型“RelayObservable<unknown>”上不存在属性“then”。当我尝试在反应中使用中继获取数据时。我不知道为啥会出现这个错误