Relay / Mongodb Error-не удается прочитать свойство Undefined

У меня есть этот проект test relay-starter-kit с формой поиска автозаполнения, которая отображает цитаты в браузере. Когда я использую форму поиска, я получаю ошибку в браузере, говоря » app.js: 8284 Uncought TypeError: не удается прочитать свойство ‘Edge’ of undefined». Я не могу понять, почему его заполнение полей поиска в первый раз, но не при вводе в поисковой форме. Заметьте, если вы жестко кодируете переменную searchTerm, она отобразит результаты поиска. Другими словами, он может читать края, когда его жесткий код. Любое руководство по этому вопросу было бы здорово. Спасибо.

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

    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 network. Примечание. ввод’ 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
}

Добавление консоли.log to render() показывает ввод searchTerm:

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

Следующая ошибка возникает в строке 24 в приложении.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 }. Я вытащил пользователя и цитату из БД, и есть’ _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" }

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

{
    "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
                                }
                            ]
                        }
                    }
                },

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

2 ответа

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

    Я не могу понять, почему его заполнение полей поиска в первый раз, но не при вводе в поисковой форме.

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

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

    Когда я использую форму поиска, я получаю ошибку в браузере, говоря » app.js: 8284 Uncought TypeError: не удается прочитать свойство ‘Edge’ of undefined».

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

  2. Решение состояло в том, чтобы взять тип кавычки из nodeInterface, поэтому только запуск объекта верхнего уровня через nodeInterface, пусть relay генерирует идентификатор для objectId из GraphQLID или из globalid, как определено в отдельном itemType.