リレーは、最後の変数ではなく、setVariablesトランジション中に初期変数を使用します。

Question

ファイルIDの束がlocalStorageからロードされるページがあり、コンポーネントが新しいプロップをマウント/受信すると、setVariablesが呼び出されます。これが機能し、新しい変数が設定されている間、最初の変数の結果がトランジション中に使用されます。これは、奇数のちらつきの原因となります。

なぜ、リレーでは、移行中に何か違うのですか？私が期待するのは、this.props.viewer.files.hitsは前の呼び出しと同じになりますが、setVariablesは初期の変数を使用した結果ではなく、そのことをやっているということになります。

const enhance = compose(
    lifecycle({ 
    componentDidMount() { 
     const { files, relay } = this.props 
     if (files.length) { 
     relay.setVariables(getCartFilterVariables(files)) 
     } 
    }, 
    }), 
    shouldUpdate((props, nextProps) => { 
    if (props.files.length !== nextProps.files.length && nextProps.files.length) { 
     props.relay.setVariables(getCartFilterVariables(nextProps.files)) 
    } 

    return true 
    }) 
) 

export { CartPage } 

export default Relay.createContainer(
    connect(state => state.cart)(enhance(CartPage)), { 
    initialVariables: { 
     first: 20, 
     offset: 0, 
     filters: {}, 
     getFiles: false, 
     sort: '', 
    }, 
    fragments: { 
     viewer:() => Relay.QL` 
     fragment on Root { 
      summary { 
      aggregations(filters: $filters) { 
       project__project_id { 
       buckets { 
        case_count 
        doc_count 
        file_size 
        key 
       } 
       } 
       fs { value } 
      } 
      } 
      files { 
      hits(first: $first, offset: $offset, filters: $filters, sort: $sort) { 
       ${FileTable.getFragment('hits')} 
      } 
      } 
     } 
     `, 
    }, 
    } 
) 

Answer 1

ああ、私は最終的にこれを考え出しました。 prepareParamsは値を変更していました

export const prepareViewerParams = (params, { location: { query } }) => ({ 
    offset: parseIntParam(query.offset, 0), 
    first: parseIntParam(query.first, 20), 
    filters: parseJsonParam(query.filters, null), <-- setting filters variable 
    sort: query.sort || '', 
}) 


const CartRoute = h(Route, { 
    path: '/cart', 
    component: CartPage, 
    prepareParams: prepareViewerParams, <--updating variable 
    queries: viewerQuery, 
})