中继片段变量

Posted 2023-03-08

【中文标题】中继片段变量

【英文标题】：Relay fragment variables

【发布时间】：2016-10-18 09:25:52

【问题描述】：

链接 Github 问题： https://github.com/facebook/relay/issues/1218

我们遇到了 Relay 的奇怪行为。我会尽力解释。

所以我们有一个“主”中继容器，它为相应的商店获取数据，并且还包含来自 Ticket 容器的片段。 票务容器渲染出具有过滤和排序的自定义表格。所以你可以看到在 StoreFrom 组件 StoreTicketList 容器是 import 所有需要的道具都像 Store 片段一样传递。

当您尝试过滤 StoreList Ticket 时会出现问题，我的意思是设置过滤器或排序中继变量。 你会得到这个错误：

警告：RelayContainer：组件TicketList 使用的变量与用于获取片段Store 的变量不同。该片段是使用变量"first":5,"after":null,"last":null,"before":null,"sort":null,"filter":null 获取的，但使用变量"first":5,"after":null,"last":null,"before":null,"sort":null,"filter":"authorAccount":"email":"__e":"[e-mail]" 呈现。这可以表明以下两种可能性之一： - 父级在查询中设置了正确的变量 - TicketList.getFragment('Store', ...) - 但在渲染组件时没有传递相同的变量。请务必通过将它们作为道具传递来告诉组件要使用哪些变量：<TicketList ... first=... after=... last=... before=... sort=... filter=... />。 - 您故意将虚假数据传递给此组件，在这种情况下忽略此警告。

但是这些过滤器/排序变量在 StoreTicketList 上，它们并没有从父容器传递到子容器，就像在这种情况下，将存储容器传递到 StoreListTicket 容器。

export class StoreForm extends React.Component 

  constructor(props) 
    super(props);

    const  Viewer:  store   = props;

    this.state = 
      number: store && store.number !== null ? store.number : '',
    ;
  

  handleInsert = (model) => 
    console.log('Form mutation model : ', model);
  ;

  render() 
    const  Viewer, relay:  variables:  update    = this.props;
    return (
      <div>
        <Form>
          <FormTitle title='Store Info' />
          <FormBody>
            <TextField
              required
              fullWidth
              name='number'
              value=this.state.number
              floatingLabelText='Number'
            />
            <StoreTicketList Store=this.props.Viewer.store />
          </FormBody>
        </Form>
      </div>
    );
  

StoreForm 容器（主容器）：

export default Relay.createContainer(StoreForm, 
  initialVariables: 
    id: null,
    update: false
  ,
  prepareVariables( id = null ) 
    return  id, update: (id !== null) ;
  ,
    fragments: 
        Viewer: (variables) => Relay.QL`
      fragment on Viewer 
        store(id: $id) @include(if: $update) 
          id,
          number
          $StoreTIcketList.getFragment('Store')
        
      
    `
    
);

票箱：

export const StoreTicketList = Relay.createContainer(TicketList, 
  initialVariables: 
    first: 5,
    after: null,
    last: null,
    before: null,
    sort: null,
    filter: null
  ,
    fragments: 
        Store: () => Relay.QL`
      fragment on Store 
        ticketConnection(first: $first, after: $after, last: $last, before: $before, sort: $sort, filter: $filter) 
          count,
          pageInfo 
            hasNextPage,
            hasPreviousPage,
            startCursor,
            endCursor
          ,
          edges
            node
              created,
              subject
            
          
        
      
    `
    
);

我们构建了自己的连接表 HOC 组件，为每个容器呈现表。在这个组件中，还有使用this.props.relay.setVariables() 的排序和过滤功能。 因此 StoreListTicket 呈现为 ConnectionTable 并传递中继 prop 对象，如果用户单击表列标题，组件将生成排序对象数组。

function connectionTableHOC(ComposedComponent) 

  class EnhanceTable extends React.Component 

    constructor(props) 
     super(props);
    

    sortHandler = (sortArray) => 
     const  relay, relay:  variables   = this.props;

     relay.setVariables(
       first: variables.first || variables.last,
       after: null,
       last: null,
       before: null,
       sort: sortArray
     );
   ;

   filterHandler = (filterObj) => 
     const  relay, relay:  variables   = this.props;

     relay.setVariables(
      first: variables.first || variables.last,
      after: null,
      last: null,
      before: null,
      filter: filterObj
    );
  ;

  render() 
    return <ComposedComponent ...this.props />;
  

【问题讨论】：

听起来您在某处调用setVariables，但从示例代码中并不清楚发生这种情况的位置。能否也显示调用setVariables 的代码？这将清楚地表明变量在哪里发生变化，以及为什么父组件和子组件在它们的值上存在分歧。

我已经用您要求的代码更新了帖子。

【参考方案1】：

事实证明你需要做两件事：

首先，如 Joe Savona 所述，将 props 传递到组件中。我正在使用 react-relay-router，所以对我来说这是添加这一行的问题

<Route path="interviews">
  <IndexRoute component=InterviewsList queries=ViewerQuery />
  <Route path=":id" component=InterviewSession queries=NodeViewerQuery
    render=( props ) => props ? <InterviewSession ...props /> : <Loading />/> // <--- this line
</Route>

其次，您必须将变量的值注入到getFragment 函数调用中，如下所示：

fragments: 
    Viewer: (variables) => Relay.QL`
  fragment on Viewer 
    store(id: $id) @include(if: $update) 
      id,
      number
      $StoreTIcketList.getFragment('Store', ... variables) // <---- this thing!
    
  
`

请注意，如果您在根查询中使用 getFragment，variables 将是第二个参数：

const NodeViewerQuery = 
  node: (component, variables) => Relay.QL`query  // <---- extra "component" argument
    node(id: $id) 
      $component.getFragment('node', ...variables)
    
  `,

（此答案来自https://github.com/facebook/relay/issues/1218）

【讨论】：

我已经添加了你提出的那些改变，我有同样的事情/问题......你可以看看我上一篇文章的回购......我不明白为什么将变量从父母传递给孩子容器应该可以工作，因为它们使用不同的初始变量集来渲染容器。存储容器只有id，但票证容器有filter, first, last, after and before。所以这些都与票箱相关联。如果您第一次更新了过滤器变量，则最初票容器将使用filter: null 呈现，中继仅在您第二次更新过滤器变量时才会抱怨。

【参考方案2】：

看起来父组件（EnhanceTable）正在为其子组件（StoreTicketList）设置变量。这意味着当子渲染时，它会尝试使用默认变量进行渲染，而父渲染则获取了一组不同的变量（排序/过滤）。解决方案是让EnhanceTable 告诉渲染组件它正在使用什么排序/过滤器：

function connectionTableHOC(ComposedComponent) 

  class EnhanceTable extends React.Component 
    ...

    render() 
      return (
        <ComposedComponent 
          ...this.props 
          filterVarName=filterValue
          sortVarName=sortValue
        />
      );
    
  

【讨论】：

感谢您的回复，将尝试解决方案并报告，但我意识到，中继将显示此警告，并将使用旧的 this.props.relay.variables.filter 变量和它将使用正确的“新” this.props.relay.variables.filter 重新渲染相同的组件树

我试图从 Parent Enhance 组件传递过滤器变量，但我仍然遇到同样的问题，我绑定到从许多其他地方传递过滤器道具，但仍然没有...

嗯。从您的代码示例中仍然不太清楚您是如何调用connectionTableHOC 的。能否粘贴代码以显示 StoreForm 如何呈现 StoreTicketList？

我试图隔离问题，并在 GraphQL 端创建了模型的小示例，在前端创建了容器/组件。这是 repo 链接：github.com/mario-jerkovic/Relay-FragmentVariables 如果您取消注释 /js/routes/AppHomeRoute.js 和 /js/app.js 中的代码，relay 不会抱怨不同的变量，工作和不工作代码之间的唯一区别是 react-router-relay。