Lỗi phản ứng chuyển tiếp 'Đối tượng không tìm thấy phương pháp'

Question

Tôi đã làm việc với reactjs một chút công bằng và nghĩ rằng tôi sẽ bắt đầu chơi xung quanh với graphql và relay. Tôi đã đánh một lỗi mà tôi không thể có được để dưới cùng, vì vậy tôi tự hỏi nếu có ai trên đây có thể đã gặp phải như vậy. Bất kỳ con trỏ hoặc ý tưởng nào đều được hoan nghênh.

Các lỗi tôi nhận được là

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

Vì vậy, tôi có một máy chủ GraphQL chạy và tất cả mọi thứ hoạt động tốt tôi có thể truy vấn cơ sở dữ liệu backend (Tôi đang sử dụng MongoDB) và truy vấn sau đây tạo ra kết quả chính xác thông qua ui 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" 
     } 
     ] 
    } 
    } 
} 

Vì vậy, tôi nghĩ rằng nó an toàn để giả định máy chủ graphql là tốt và vấn đề phải được với thực hiện của tôi về rơle hoặc babelRelayPlugin.js

Sau đây là tệp main.js với phương thức kết xuất được đơn giản hóa.

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; 

Sau đây là App.js nộp

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') 
       ); 

Đối với đầy đủ ở đây là schema.js Tôi đang sử dụng.

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; 

được chuyển đổi sang JSON trên bởi máy chủ đưa ra ở đây

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); 
    } 
})(); 

Và babelRelayPlugin.js dưới

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

Và 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: Vì vậy, tôi đã có một vở kịch nhỏ xung quanh và các vấn đề nằm trong main.js RelayQL tuyên bố

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

Tôi nhận xét ra mã trong app.js và thay thế nó bằng đoạn mã sau như một kiểm tra để xem nếu cơ bản một truy vấn tiếp sức cơ bản làm việc và nó đã làm bằng cách quay đầu ra đúng vào giao diện điều khiển

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

vì vậy, như tôi đã đề cập ở trên vấn đề này phải tôi nghi ngờ với sự tuyên bố trong main.js, bây giờ câu hỏi là tại sao?

Đối với tổng đầy đủ Tôi đã bao gồm các lỗi stack trace đầy đủ dưới đây

-- 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

Trong HomeRoute của bạn:

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

Bạn đã cố gắng chỉ:

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