中继片段变量

Question

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

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

所以我们有一个 "main" 中继容器，它为相应的商店获取数据，并且还包括来自 Ticket 容器的片段。票证容器呈现出具有过滤和排序功能的自定义 table。所以你可以看到在 StoreFrom 组件 StoreTicketList 容器中导入了所有必需的道具，就像 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":"wrongEmail@email.com"}}}} 呈现。这可以指示两种可能性之一： - parent 在查询中设置了正确的变量 - TicketList.getFragment('Store', {...}) - 但在渲染组件时没有传递相同的变量。务必通过将变量作为 props 传递来告诉组件要使用哪些变量：<TicketList ... first={...} after={...} last={...} before={...} sort={...} filter={...} />。 - 您故意将虚假数据传递给此组件，在这种情况下请忽略此警告。

但是那些 filter/sort 变量在 StoreTicketList 上，它们没有从 parent 传递到 child 容器，就像在本例中将 Store 容器传递到 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
            }
          }
        }
      }
    `
    }
});

我们构建了自己的 Connection Table HOC 组件，为每个容器呈现 table。在这个组件中，还有使用 this.props.relay.setVariables() 的排序和过滤功能。因此，StoreListTicket 呈现为 ConnectionTable 并向下传递中继道具 object，如果用户单击 table 列 header，组件将生成一个数组排序 objects.

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} />;
  }
}

Answer 1

看起来父组件 (EnhanceTable) 正在为其子组件 (StoreTicketList) 设置变量。这意味着当子渲染时它尝试使用默认变量渲染，而父已经获取了一组不同的变量（sorted/filtered）。解决方案是 EnhanceTable 告诉渲染组件 sort/filter 它正在使用什么：

function connectionTableHOC(ComposedComponent) {

  class EnhanceTable extends React.Component {
    ...

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

Answer 2

原来你需要做两件事：

首先，将道具传递到组件中，如 Joe Savona 所述。我正在使用 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）

中继片段变量

Relay fragment variables

javascript

relayjs