릴레이/몽고 웃 오류 - 정의되지 않은 속성을 읽을 수 없음

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'입력이 조회되고 있음을 유의하십시오.

가

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

다음 오류 app.js에서 라인 (24)에서 발생 {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) 

() 렌더링 할 CONSOLE.LOG 추가

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 
} 

는 SEARCHTERM 입력을 나타낸다 업데이트 2 :

그래서 확인해보십시오. 내 {ObjectID}에 문제가 있습니다. 나는 사용자로부터 데이타베이스를 가져 왔고 거기에는 '_id'가 있지만 객체에는 'id'속성이 없다. 나는 globalIdFetcher (에서 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" } 

하지만 그들은 모두에있는 것과 동일하고 다른이는 출력 db. 콘솔 출력은 다음과 같습니다.

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

해결 방법 nodeInterface를 통해 Quote 유형을 가져 와서 nodeInterface를 통해 최상위 레벨 객체 만 실행하고 개별 itemType에 정의 된대로 GraphIDID 또는 fromGlobalId에서 objectId의 id를 생성하도록합니다.

Answer 2

제공된 정보로 문제를 해결하는 것은 매우 어렵습니다. 당신이 지도 요청으로 릴레이 귀하의 경우 빈 문자열 searchTerm의 초기 값에 대한 결과를 가져옵니다 때문에, 여기 내 제안 :

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

입니다. 이 경우에는 서버 측 (입력 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".

시작 디버깅 무엇 viewer GraphQL 객체 유형에 따라 quotes 필드에 대한 서버 측 돌아갑니다. 스키마에 db.collection('quotes').find(findParams).toArray()의 결과는 무엇입니까? 또한 console.log(JSON.stringify(this.props, null, 4))을 App 클래스의 render() 기능에 넣으십시오. 당신이 보는 것을 확인하십시오. Chrome DevTools 네트워크 탭에서 HTTP 요청 및 응답을 검사 할 수도 있습니다. 필터링 : graphql.