所以,首先是一些背景知识.我是一名原生的iOS/Android开发人员,现在正在开始我的第一个React Native项目.它带来了Javascript的所有好处和痛苦,但到目前为止我非常喜欢它:-)我还决定第一次尝试使用GraphQL.

作为一般的React环境的新手,我也没有任何关于Relay的先验知识,但是在我的创业社区的朋友和我的web-dev同事的推荐下选择了它.我也被警告过一个有点陡峭的学习曲线,但无论如何我决定继续 - 我已经在与JS和一个新的移动平台的0.xx版本进行一场艰苦的战斗,所以到底是什么,对吧？:-)我设法正确地设置了我的项目并用一个整体通过我的GQL服务器QueryRenderer,这是一个很大的安慰:-)

所以,关于问题

我很难搞清楚容器/组件的关系,以及一般的容器组成.阅读关于作文的文档有所帮助,但我仍然怀疑作文的作用QueryRenderer

• QueryRenderer据说文档是每个中继树的根容器.这是否意味着QueryRenderer我们的应用程序中应该有一个root用户？或者在每个导航路径的根目录(即我们的应用程序中的选项卡)？或者仅针对每个容器组件(与表示/哑/纯组件相反,React明智)？请注意,我不是在寻找意见,而是寻求最佳实践:-)
• 一个FragmentContainer(或任何其他容器)可以在没有QueryRenderer"父"组件的情况下工作吗？
• 如何QueryRenderer链接到子容器？它是否获取子容器所需的所有数据的总和,然后从缓存中读取子容器,或者？如果是这样,我误解了Relay的优点 - 我们认为每个组件都可以独立于其他所有组件检索数据,并且每个组件都不了解其他组件(包括父/子组件)的数据要求).我认为这个假设也让我感到困惑QueryRenderer,并且需要一个"Root"容器.
• 如果QueryRenderer是中继树的"父"/"根"中继容器,那么它如何根据它的请求呈现视图组件呢？为什么它必须有一个请求？何时以及我们应该使用QueryRenderer什么？

任何帮助深表感谢 :-)

我有这样的路线

<Route path="/search" component={Search}>

基本Search组件看起来像这样

class Search extends React.Component {
  constructor (props) {
    super(props)
    this.state = {query: ''}
  }
  handleSubmit (event) {
    event.preventDefault()
    this.setState({query: this.refs.queryInput.value})
  }
  renderSearchResult() {
    if (this.state.query === '')
      return <EmptySearchResult />
    else
      return <SearchResult query={this.state.query}/>
  }
  render() {
    return (
      <div className="searchContainer">
        <div className="row">
          <div className="search">
            <form onSubmit={event => this.handleSubmit(event)}>
              <input className="searchInput" placeholder="robocop" ref="queryInput" />
            </form>
          </div>
        </div>
        <div className="row">
          {this.renderSearchResult()}
        </div>
      </div>
    )
  }
}

SearchResult 中继容器看起来像这样

class SearchResult extends React.Component {
  render() …

我正在尝试在打字稿文件中创建更简化的输出，*.d.ts这些输出包含在我的模块代码的捆绑版本中。这些文件是通过涉及 typescript 编译器、babel 和 rollup 的链生成的。我也使用relay和graphql，但我认为这不会对问题产生太大影响。

举个例子，在.tsx源代码中，我有这样的内容：

import { graphql } from 'babel-plugin-relay/macro'

// produces some generated code 
graphql`fragment task_model on Task { id message createdAt deadline modifiers { hard medium easy } }`

// There is a generated type for this fragment, but it is a little ugly
import { task_model } from './__generated__/task.graphql'

// We can "correct" the type information and export it with a nicer name
export type Task = Readonly<Omit<task_model & { …

我正在尝试将lodash的debouncing添加到搜索函数中,从输入onChange事件调用.下面的代码生成一个类型错误'function is function',我理解,因为lodash期待一个函数.这样做的正确方法是什么,可以全部内联完成吗？到目前为止,我几乎尝试了所有的例子都无济于事.

search(e){
 let str = e.target.value;
 debounce(this.props.relay.setVariables({ query: str }), 500);
},

我试图了解更复杂的graphql apis,它实现了Relay Cursor Connections Specification

如果你看一下我在github graphql api explorer上运行的查询

{
  repository(owner: "getsmarter", name: "moodle-api") {
    id
    issues(first:2 ) {
      edges {
        node {
          id
          body
        }
      }
      nodes {
        body
      }
      pageInfo {
        endCursor
        hasNextPage
        hasPreviousPage
        startCursor
      }
      totalCount
    } 
  }
}

注意它有字段边和节点.

为什么github在api中有一个称为节点的附加字段？为什么他们不使用edge字段,因为你可以从边缘获得相同的数据？这只是为了方便吗？

我想构建一个Web应用程序,前端使用Javascript,后端使用C#,我想确定GraphQL的值.

• 对于我的C#后端,我使用名为GraphQL for .NET的GraphQL实现.
• 对于我的前端,我想使用Relay,因为它与ReactJS配合得很好.

现在,对于我的后端,我实现了一个示例模式,如下例所示:

public class StarWarsSchema : Schema
{
    public StarWarsSchema()
    {
        Query = new StarWarsQuery();
    }
}

在我的前端,我现在需要以某种方式告诉Relay这个架构.至少这是我在阅读教程时所理解的,因为出于某种原因需要转换GraphQL查询.这是一个例子,我想加载所有机器人:

class Content extends React.Component<ContentProps, { }> {
    ...
}

export default Relay.createContainer(Content, {
    fragments: {
        viewer: () => Relay.QL`
            fragment on User {
                query HeroNameQuery {
                    droids {
                        id
                        name
                    }
                }
            }
        `,
    }
});

在Relay的一个例子中,我看到babel-relay-plugin用于转换.它获取一个模式文件(JSON).该入门继电器的指南显示,如何建立这样的架构graphql-JS和graphql继电器JS.

现在我的问题:

1. 我真的需要在前端和后端创建模式吗？
2. 教学Relay我的模式有什么意义,因为后端已经使用模式来返回格式良好的数据？
3. 在这种情况下使用Relay有什么好处？当我通过常规REST端点以及GraphQL查询作为参数访问后端时,我会失去什么？

问题

我在我们的GraphQL服务器上将django-graphene与Relay一起使用。该实现在类中强加了全局ID要求，该要求覆盖并隐藏Django的ID字段。graphene.relay.Node

{
    allBatches(id:"QmF0Y2hOb2RlOjE=") {
    edges {
      node {
        id
        pk
      }
    }
  }
}

{
  "data": {
    "allBatches": {
      "edges": [
        {
          "node": {
            "id": "QmF0Y2hOb2RlOjE=",
            "pk": 1
          }
        }
      ]
    }
  }
}

{
    allBatches(id:1) {
    edges {
      node {
        id
        pk
      }
    }
  }
}

class PKMixin(object): …