在QueryRenderer中傳遞中繼現代變量

Question

我正在使用現代繼電器。 以下是使我出錯的錯誤，即未定義$ limit。 如何在QueryRenderer中定義限制？ 我的想法是該限制是在Main.js中定義的，但是看起來我需要以某種方式在QueryRenderer中引用它。 我的app.js文件中有一個QueryRenderer，它調用另一個組件Main.js上的片段。 app.js看起來像這樣，Main.js如下：

```js

import '../style/style.css'
import React from 'react'
import ReactDOM from 'react-dom'
import { QueryRenderer, graphql } from 'react-relay'
import environment from './createRelayEnvironment'
import Main from './components/Main'

// change rootContainer to QueryRenderer
ReactDOM.render(
  <QueryRenderer
    environment={environment}
    query={graphql`
      query appQuery {
        store {
          ...Main_store
          }
      }
    `}
    // variables={{limit: 100, query: ''}}
    render={({ error, props}) => {
      if (props) {
        return <Main store={props.store} />
      } else {
        return <div>Loading</div>
      }
    }}
  />,
  document.getElementById('react')
)

```

... Main_store片段在那里被調用來自這個組件Main.js

```js

import React from 'react'
import {
  createFragmentContainer,
  createRefetchContainer,
  graphql
} from 'react-relay'
import { debounce } from 'lodash'

import Business from './Business'
import CreateBusinessMutation from '../mutations/CreateBusinessMutation'

class Main extends React.Component {
  constructor (props) {
    super(props)
// TODO props.relay.* APIs do not exist on compat containers
// TODO needs manual handling
    this._loadMore = debounce(this._loadMore, 300)
    this.props.relay.Variables = { limit: 100, query: '' }
  }

  search = (e) => {
// TODO needs manual handling
    this._loadMore({ query: e.target.value })
  };

  setLimit = (e) => {
// TODO needs manual handling
    this._loadMore({ limit: Number(e.target.value) })
  };

  handleSubmit = (e) => {
    e.preventDefault()
    let onSuccess = () => {
      $('#modal').closeModal()
    }

    let onFailure = (transaction) => {
      const error = transaction.getError() || new Error('Mutation failed.')
      console.error(error)
    }

    let name = this.refs.newName.value = ''
    let url = this.refs.newUrl.value = ''

    CreateBusinessMutation.commit(
      this.props.relay.environment,
      name,
      url,
      this.props.store
    ),
    {onFailure, onSuccess}
  }

  componentDidMount () {
    $('.modal-trigger').leanModal()
  }

  render () {
    let content = this.props.store.businessConnection.edges.map(edge => {
      return <Business key={edge.node.id} business={edge.node} />
    })
    return (
      <div>
        <div className="input-field">
          <input id="search" type="text" onChange={this.search} />
          <label htmlFor="search">Search All Businesses</label>
        </div>

        <div className="row">
          <a className="waves-effect waves-light btn modal-trigger right light-blue white-text" href="#modal">Add New Business</a>
        </div>

        <ul>
          {content}
        </ul>

        <div className="row">
          <div className="col m3 hide-on-small-only">
            <div className="input-field">
              <select id="showing" className="browser-default"
// TODO props.relay.* APIs do not exist on compat containers
                onChange={this.setLimit} defaultValue={this.props.relay.variables.limit}>
                <option value="100">Show 100</option>
                <option value="200">Show 200</option>
              </select>
            </div>
          </div>
        </div>

        <div id="modal" className="modal modal-fixed-footer">
          <form onSubmit={this.handleSubmit}>
            <div className="modal-content">
              <h5>Add New Business</h5>
              <div className="input-field">
                <input type="text" id="newName" ref="newName" required className="validate" />
                <label htmlFor="newName">Name</label>
              </div>
              <div className="input-field">
                <input type="url" id="newUrl" ref="newUrl" required className="validate" />
                <label htmlFor="newUrl">Url</label>
              </div>
            </div>
            <div className="modal-footer">
              <button type="submit" className="waves-effect waves-green btn-flat green darken-3 white-text">
                <strong>Add</strong>
              </button>
              <a href="#!" className="modal-action modal-close waves-effect waves-red btn-flat">Cancel</a>
            </div>
          </form>
        </div>
      </div>
    )
  }
  _loadMore () {
    // Increments the number of stories being rendered by 10.
    const refetchVariables = fragmentVariables => ({
      query: fragmentVariables.query,
      limit: fragmentVariables.limit
    })
    this.props.relay.refetch(refetchVariables, null);
  }
}

Main = createRefetchContainer(Main, {
  /* TODO manually deal with:
  initialVariables: {
    limit: 100,
    query: ''
  }
  */
  store: graphql`
    fragment Main_store on Store {
      id,
      businessConnection(first: $limit, query: $query) {
        edges {
          node {
            id,
            ...Business_business
          }
        }
      }
    }
  `
},
  graphql`
    query MainRefetchQuery($limit: Int, $query: String) {
        store {
          ...Main_store
        }
      }
  `,
)

export default Main

```

這是查詢中“ Chrome DevTools網絡”選項卡中的錯誤。

{
    "errors": [
        {
            "message": "Variable \"$limit\" is not defined by operation \"appQuery\".",
            "locations": [
                {
                    "line": 10,
                    "column": 29
                },
                {
                    "line": 1,
                    "column": 1
                }
            ]
        },
        {
            "message": "Variable \"$query\" is not defined by operation \"appQuery\".",
            "locations": [
                {
                    "line": 10,
                    "column": 44
                },
                {
                    "line": 1,
                    "column": 1
                }
            ]
        },
        {
            "message": "Variable \"$showLikes\" is not defined by operation \"appQuery\".",
            "locations": [
                {
                    "line": 24,
                    "column": 27
                },
                {
                    "line": 1,
                    "column": 1
                }
            ]
        }
    ]
}

任何想法都將不勝感激。（這主要是使用“ 中繼轉換手冊”生成的）謝謝。

更新-添加架構以防出現答案：

```

類型Business實現節點{＃對象ID的ID：ID！ 名稱：字符串url：字符串狀態：字符串likesCount：整數createdAt：字符串}

# A connection to a list of items.
type BusinessConnection {
  # Information to aid in pagination.
  pageInfo: PageInfo!

  # A list of edges.
  edges: [BusinessEdge]
}

# An edge in a connection.
type BusinessEdge {
  # The item at the end of the edge
  node: Business

  # A cursor for use in pagination
  cursor: String!
}

input CreateBusinessInput {
  name: String!
  url: String!
  clientMutationId: String
}

type CreateBusinessPayload {
  businessEdge: BusinessEdge
  store: Store
  clientMutationId: String
}

type Mutation {
  createBusiness(input: CreateBusinessInput!): CreateBusinessPayload
  thumbsUp(input: ThumbsUpInput!): ThumbsUpPayload
}

# An object with an ID
interface Node {
  # The id of the object.
  id: ID!
}

# Information about pagination in a connection.
type PageInfo {
  # When paginating forwards, are there more items?
  hasNextPage: Boolean!

  # When paginating backwards, are there more items?
  hasPreviousPage: Boolean!

  # When paginating backwards, the cursor to continue.
  startCursor: String

  # When paginating forwards, the cursor to continue.
  endCursor: String
}

type Query {
  # Fetches an object given its ID
  node(
    # The ID of an object
    id: ID!
  ): Node
  store: Store
}

type Store implements Node {
  # The ID of an object
  id: ID!
  businessConnection(after: String, first: Int, before: String, last: Int, query: String): BusinessConnection
}

input ThumbsUpInput {
  businessId: String
  clientMutationId: String
}

type ThumbsUpPayload {
  business: Business
  clientMutationId: String
}

```

Answer 1

QueryRenderer可以使用variables prop。 嘗試這個：

<QueryRenderer
  // ...
  variables={{
    limit: 10,
  }}
  // ...
/>

現在，您可以在QueryRenderer查詢的任何片段子級中引用$limit 。

如果您需要更改$limit和refetch的值，請使用createRefetchContainer並調用refetch方法。

GitHub上的注釋解決了該問題，並將其合並到Relay Modern文檔中。

此處提供示例