Ошибка реле/​​Mongodb - Невозможно прочитать свойство неопределенного

Question

У меня есть этот тест relay-starter-kit проект с формой автозаполнения, которая отображает кавычки в браузере. Когда я использую форму поиска, я получаю сообщение об ошибке в браузере: «app.js: 8284 Uncaught TypeError: Невозможно прочитать« ребра »свойств неопределенного». Я не могу понять, почему он заполняет поля поиска в первый раз, но не набирает форму поиска. Следует отметить, что если вы жестко скопируете переменную searchTerm, она отобразит результаты поиска. Другими словами, он может читать края, когда он жестко закодирован. Любое руководство по этому вопросу было бы здорово. Благодарю.

Схема here Это тот компонент, который действительный запрос graphql для поискового запроса не будет отображаться.

import React from 'react'; 
    import Relay from 'react-relay'; 
    import { debounce } from 'lodash'; 
    import SearchForm from '../search-form'; 
    import Quote from '../quote'; 

    class App extends React.Component { 
     constructor(props) { 
     super(props) 
     this.search = debounce(this.search.bind(this), 300) 
     } 
     search(searchTerm) { 
     this.props.relay.setVariables({ searchTerm }); 
     } 

     render() { 
     return (
      <div className="quotes-library"> 
      <SearchForm searchAction={this.search} /> 
      <div className="quotes-list"> 
       {this.props.viewer.quotes.edges.map(edge => 
       <Quote key={edge.node.id} quote={edge.node} /> 
      )} 
      </div> 
      </div> 
     ) 
     } 
    } 

    export default Relay.createContainer(App, { 
     initialVariables: { 
     searchTerm: '', 
     }, 
     fragments: { 
     viewer:() => Relay.QL` 
      fragment on User { 
       quotes(first:100, searchTerm: $searchTerm) { 
        edges { 
         node { 
          id 
          ${Quote.getFragment('quote')} 
         } 
        } 
       } 
      } 
     `, 
     }, 
    }); 

Обновление: это запрос, как показано на вкладке сети Chrome DevTools. Обратите внимание, что запрос «p» в форму поиска запрашивается.

query App_ViewerRelayQL($id_0:ID!) { 
    node(id:$id_0) { 
    ...F2 
    } 
} 
fragment F0 on Quote { 
    id, 
    likesCount 
} 
fragment F1 on Quote { 
    text, 
    author, 
    id, 
    ...F0 
} 
fragment F2 on User { 
    _quotes3UfnML:quotes(first:100,searchTerm:"pri") { 
    edges { 
     node { 
     id, 
     ...F1 
     }, 
     cursor 
    }, 
    pageInfo { 
     hasNextPage, 
     hasPreviousPage 
    } 
    }, 
    id 
} 

Добавление console.log для визуализации() показывает вход SEARCHTERM:

app.js:17 
    { 
    "viewer": { 
     "__dataID__": "VXNlcjox", 
     "__status__": 4 
    }, 
    "relay": { 
     "pendingVariables": null, 
     "route": { 
      "name": "AppHomeRoute", 
      "params": {}, 
      "queries": {} 
     }, 
     "variables": { 
      "searchTerm": "pri" 
     } 
    } 
} 

Следующая ошибка возникает в строке 24 в app.js, который {this.props.library.quotes.edges.map(edge => <Quote key={edge.node.id} quote={edge.node} /> )}:

app.js:8285 Uncaught TypeError: Cannot read property 'edges' of undefined 
    at App.render (app.js:8285) 
    at app.js:43197 
    at measureLifeCyclePerf (app.js:42476) 
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (app.js:43196) 
    at ReactCompositeComponentWrapper._renderValidatedComponent (app.js:43223) 
    at ReactCompositeComponentWrapper._updateRenderedComponent (app.js:43147) 
    at ReactCompositeComponentWrapper._performComponentUpdate (app.js:43125) 
    at ReactCompositeComponentWrapper.updateComponent (app.js:43046) 
    at ReactCompositeComponentWrapper.receiveComponent (app.js:42948) 
    at Object.receiveComponent (app.js:35341) 

ОБНОВЛЕНИЕ 2:

Итак, проверьте это. Я делаю что-то не так с моим {ObjectID}. Я вытащил пользователя и сделал цитату из db, и на объекте есть свойство «_id», но не «id». Это выход:

> db.users.find({}) 
{ "_id" : ObjectId("586253169465191cb812066c"), "name" : "me", "id" : ObjectId("586253169465191cb812066c"), "errors" : [ ] } 
> db.quotes.find({}) 
{ "_id" : ObjectId("586693333ff93f3581c0ca05"), "text" : "Hi Prisc", "author" : "H. Jackson Brown", "likesCount" : 24 } 
{ "_id" : ObjectId("586693333ff93f3581c0ca06"), "text" : "If opportunity doesn't knock, build a door", "author" : "Milton Berle", "likesCount" : 2 } 
{ "_id" : ObjectId("586693333ff93f3581c0ca07"), "text" : "Try to be a rainbow in...", "author" : "Maya Angelou" } 

Если я вхожу идентификатор из globalIdFetcher(), вошедший идентификатор для Джексон Браун Цитаты объекта показать два идентификаторы, как и ожидался, но они оба одинаковы и отличаются от того, в дб. Выход на консоли:

{ 
    "viewer": { 
     "__dataID__": "VXNlcjo=", 
     "quotes": { 
      "__dataID__": "client:6068631311_first(100),searchTerm()", 
      "edges": [ 
       { 
        "__dataID__": "client:client:6068631311:UXVvdGU6NTg2NjkzMzMzZmY5M2YzNTgxYzBjYTA1", 
        "node": { 
         "__dataID__": "UXVvdGU6NTg2NjkzMzMzZmY5M2YzNTgxYzBjYTA1", 
         "id": "UXVvdGU6NTg2NjkzMzMzZmY5M2YzNTgxYzBjYTA1", 
         "__fragments__": { 
          "1::client": [ 
           { 
            "showLikes": false 
           } 
          ] 
         } 
        } 
       }, 

Есть идеи по исправлению этого синтаксиса?

Answer 1

Решение должно было вывести тип Quote из nodeInterface, чтобы только запустить объект верхнего уровня через nodeInterface, позволить ретрансляции генерировать идентификатор для объектаId из GraphQLID или fromGlobalId, как определено в отдельном ItemType.

Answer 2

Очень сложно решить проблему с предоставленной информацией. Как вы просили инструктивного, вот мои предложения :)

I cant understand why its populating the search fields the first time but not on typing in the search form.

Поскольку реле получает результат для начального значения searchTerm, что пустая строка в вашем случае. Вы должны иметь дело с этим случаем на стороне сервера (путем проверки ввода searchTerm) и клиентской стороны (путем проверки, если текущее значение searchTerm пуст, например).

При вводе формы поиска search() не вызывается и searchTerm не обновляется. Проверьте SearchForm компонент.

When I use the search form, I get an error in the browser saying "app.js:8284 Uncaught TypeError: Cannot read property 'edges' of undefined".

Начать отладку то, что на стороне сервера возвращается на quotes поле под viewer GraphQL типа объекта. Каков результат db.collection('quotes').find(findParams).toArray() в вашей схеме? Кроме того, введите console.log(JSON.stringify(this.props, null, 4)) в render() функции App класс. Проверьте, что вы видите. Вы также можете проверить HTTP-запрос и ответ на вкладке «Сеть Chrome DevTools». Фильтр по graphql.