React Relay Error "Obiekt nie znalazł metody"

Question

Pracowałem z responsjami dość dobrze i myślałem, że zacznę grać z grafql i przekaźnikiem. Uderzyłem błąd, że nie mogę dojść do sedna, więc zastanawiałem się, czy ktokolwiek tutaj mógł spotkać to samo. Wszelkie wskazówki i pomysły będą mile widziane.

Błąd Dostaję jest

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

Mam więc serwer działa GraphQL i wszystko działa dobrze mogę kwerendy bazy danych backend (używam MongoDB) oraz następujące zapytanie produkuje poprawnych wyników przez 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" 
     } 
     ] 
    } 
    } 
} 

Więc myślę, że bezpiecznie założyć serwer graphql jest w porządku i problem musi być z mojego wykonania przekaźnika lub babelRelayPlugin.js

Poniżej znajduje się plik main.js z uproszczoną metodą renderowania.

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; 

Poniżej znajduje się App.js złożyć

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

Dla kompletności Oto schema.js używam.

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; 

który przekształca się JSON przez serwer pokazano tutaj

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

A babelRelayPlugin.js jest poniżej

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

I 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: więc miałem trochę poeksperymentować, a problem tkwi w main.js oświadczenie RelayQL

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

I wykomentowane kodu w app.js i zastąpić go z następującego kodu w postaci sprawdź, czy podstawowy podstawowy zapytania przekaźnik pracował i robił to przez zwrócenie poprawne dane wyjściowe do konsoli

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

tak jak wspomniałem powyżej kwestii musi być podejrzewam, ze naprawdę oświadczenia w main.js, teraz pytanie brzmi: dlaczego?

Dla całkowitej kompletności mam włączone cały ślad błąd stosu poniżej

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

w twojej HomeRoute:

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

próbowałeś tylko:

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