Apollo fetchMore更新道具不重新渲染组件-Java 学习之路

我有一个来自graphql查询的"posts"数组，我正在尝试使用apollo docs中描述的偏移限制进行分页 . 当前按"loadMore"更新查询， fetchMoreResult 中的结果是正确的 . 此外，记录时连接的 newResults 正确显示 . 也许我做了一个不正确的假设，但我理解文档的方式是新生成的 posts 会自动传递到我的 TestComponent 并重新渲染 . 这是不正确的？

import React from 'react';
import { View, Text } from 'react-native';
import { graphql } from 'react-apollo';
import { GetPosts } from 'app/graphql';

class TestComponent extends React.Component {
  render() {
    // I would expect this to log the new props after press "loadMore"
    console.log(this.props)
    return (
      <View style={{marginTop: 40}}>
        <Text onPress={this.props.loadMore}>Push me</Text>
      </View>
    )
  }
}

export default graphql(GetPosts, {
  options: () => ({
    variables: {
      offset: 0,
      limit: 1
    }
  }),
  props: ({ ownProps, data }) => {
    return {
      ...ownProps,
      posts: data.posts,
      loadMore: () => {
        return data.fetchMore({
          variables: {
            offset: 1,
            limit: 1
          },
          updateQuery: (previousResult, { fetchMoreResult }) => {            
            if (!fetchMoreResult) {
              return previousResult;
            }
            const newResult = Object.assign({}, previousResult, {
              posts: [...previousResult.posts, ...fetchMoreResult.posts]
            });
            console.log(newResult);
            return newResult;
          },
        })
      }
    };
  }
})(TestComponent);

Edit (4/11/17) 我没有解释我的查询 GetPosts 包含似乎可能是问题的联合类型，因为如果我删除它们，则更新按预期工作 . 我已经打开了一个包的问题，希望更清晰：https://github.com/apollographql/react-apollo/issues/602

1 回答

-1
为了重新渲染 TestComponent ，您已经更改了组件的状态 .

你基本上可以做到
```
this.setState({

posts: [old values + new values],

})
```
然后在渲染功能中，您可以通过 this.state.posts 调用它
回复于 2024-04-24T09:20:26+08:00

Apollo fetchMore更新道具不重新渲染组件

1 回答

相关问题