Подтвердить что ты не робот

React Relay Error 'Объект не имеет метода поиска'

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

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

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']
                    }
            }
        ]
    }
}

UPDATE: Таким образом, я немного поиграл, и проблема кроется в главном выражении RelayQL. Js

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)
4b9b3361

Ответ 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
        }`
    }