2017-04-04 94 views
2

我有一个来自graphql查询的“帖子”数组,我试图在apollo docs中使用offset +极限进行分页工作。目前按下“loadMore”更新查询,结果为fetchMoreResult是正确的。此外,连接的newResults在登录时显示正确。也许我做了一个不正确的假设,但我理解文档的方式是,新生成的posts将自动传递到我的TestComponent并重新呈现。这是不正确的?Apollo fetch更新道具不重绘渲染组件

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); 

编辑(17年4月11日) 我无法解释我的查询GetPosts包括联合类型,这似乎像它可能是问题,因为如果我删除,更新工作正常。我已经打开包裹的问题,希望更清晰:https://github.com/apollographql/react-apollo/issues/602

+0

调用这个你可以尝试一些人已经在这里尝试过的东西可看:https://github.com/apollographql/react-apollo/issues/549 –

回答

-1

为了重新渲染TestComponent您已更改组件的状态。

你基本上可以做到

this.setState({ 

posts: [old values + new values], 

}) 

然后在渲染功能,您可以通过this.state.posts

+1

这个答案是不正确的。 –

+0

新的道具应该由'graphql'高阶组件触发重新渲染。 –