2

我有以下代码：

const HomeWithApollo = withApollo(compose(
  graphql(HOME_QUERY, {
    props({
      data: { loading, page, fetchMore }
    }) {
      return {
        loading,
        page,
        fetchLocations: () => {
          return fetchMore({
            query: ALL_LOCATIONS_QUERY,
            updateQuery: (prev, {fetchMoreResult}) => {
              if (!fetchMoreResult.data) { return prev; }
              return {
                data: [...prev, ...fetchMoreResult.data]
              };
            }
          })
        }
      };
    }
  })
)(Home));

在迁移到 Apollo 之前，我将 ALL_LOCATIONS_QUERY 作为同构获取客户端（基本上是 AJAX 请求）加载。但我正在寻找阿波罗的方式，我不确定我是否有它。我有几个问题。

  • 使用graphql(QUERY_NAME, { options })，因为我完全分开加载 Home 数据和 Locations 数据，它们是否应该放置在高阶组件中的单独的多个graphql函数中？withApollo(compose([...here])
  • 目前为了从fetchMore函数中获取数据，我正在执行以下操作，但有些事情告诉我它应该在状态内完成，所以 Apollo 知道它可以进行缓存。对此有什么想法吗？我是否朝着正确的方向前进？
async componentDidMount(){
  const { data } = await this.props.fetchLocations();
  this.setState({ locations: data.allLocations });
}

非常感谢您！

4

0 回答 0