Refetch容器重新获取,但不更新视图

Vij*_*Ram 5 relay reactjs graphql relaymodern

我的应用程序看起来类似于下面的代码片段。

(我遗漏了很多实现细节,希望下面的代码足以解决我的问题)。

SampleApp.js

const SampleAppQuery = graphql`
  list SampleAppQuery {
    ...ItemComponent_item
  }
`

function SampleApp() {
  return (
    <QueryRenderer
      environment={environment}
      query={SampleAppQuery}
      render={(error, props) => {
        if (props) {
          return <AppRefetchContainer list={props} />
        }
      }}
    />
  )
}
Run Code Online (Sandbox Code Playgroud)

AppRefetchContainer.js

class AppRefetchContainer extends Component {
  render() {
    <div>
      <HeaderComponent refetchList={this._refetchList} />
      {list.map(item => <ItemComponent item={item} />)}
    </div>
  }

  _refetchList(params) {
    this.props.relay.refetch(params)
  }
}

export default createRefetchContainer(
  AppRefetchContainer,
  graphql`
    fragment AppRefetchContainer_list on Item {
      ...ItemComponent_item
    }
  `,
  graphql`
    query AppRefetchContainerQuery($sortBy: String!)
    list SampleAppQuery(sortBy: $sortBy) {
      ...ItemComponent_item
    }
  `
)
Run Code Online (Sandbox Code Playgroud)

初始应用程序负载就可以了。单击标题之一应触发重新提取,以便可以按传递的参数对列表数据进行排序。当我触发重新提取时,服务器将以正确的数据进行响应,但是,该组件不会重新呈现。

我怀疑我的问题与我在此处定义片段的方式有关。我在初始页面加载时遇到的控制台错误是:

RelayModernSelector: Expected object to contain data for fragment
`AppRefetchContainer_list`, got `{"list":[{"__fragments":
{"ItemComponent_item":{}},"__id":"[some_valid_id]","__fragmentOwner":null},{...
Run Code Online (Sandbox Code Playgroud)

问题:

  1. 我不确定如何解释该错误。这是我无法重新渲染UI的原因吗?

  2. 我知道这种方法可能并不理想,但是如何refetch从不一定是查询片段的组件中呢?

很高兴提供任何澄清或缺少的上下文:)