Relay/Mongodb 错误 - 无法读取未定义的属性

Question

我有这个测试 relay-starter-kit 项目，它有一个自动完成的搜索表单，可以将引号呈现给浏览器。当我使用搜索表单时，我在浏览器中收到一条错误消息 "app.js:8284 Uncaught TypeError: Cannot read property 'edges' of undefined"。我不明白为什么它第一次填充搜索字段而不是在搜索表单中键入。值得注意的是，如果您对 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 添加到 render() 显示 searchTerm 输入：

 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)

更新 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" }

如果我从 globalIdFetcher() 中记录 ID，Jackson Brown Quote 对象的记录 ID 按预期显示两个 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
                                }
                            ]
                        }
                    }
                },

关于修复此语法的任何想法？

Answer 1

根据问题提供的信息很难解决问题。正如您所要求的指导，这是我的建议:)

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

因为 Relay 获取初始值 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".

开始调试服务器端 returns 用于 viewer GraphQL 对象类型下的 quotes 字段。您的架构中 db.collection('quotes').find(findParams).toArray() 的输出是什么？另外，在Appclass的render()函数中放一个console.log(JSON.stringify(this.props, null, 4))。检查你所看到的。您还可以在 Chrome DevTools 网络选项卡上检查 HTTP 请求和响应。按 graphql.

过滤

Answer 2

解决方案是从 nodeInterface 中取出 Quote 类型，这样只有运行顶级对象通过 nodeInterface，让中继从 GraphQLID 或 fromGlobalId 生成 objectId 的 id，如在单个 itemType 中定义的.

Relay/Mongodb 错误 - 无法读取未定义的属性

Relay/Mongodb Error - Cannot Read Property of Undefined

mongodb

objectid

graphql

relayjs

react-starter-kit

Relay/Mongodb 错误 - 无法读取未定义的 属性

Relay/Mongodb Error - Cannot Read Property of Undefined

mongodb

objectid

graphql

relayjs

react-starter-kit

Relay/Mongodb 错误 - 无法读取未定义的属性