Apollo fetchMehr aktualisierte Requisiten, die die Komponente nicht neu rendern

Question

Ich habe eine Reihe von "Posts", die von einer graphql-Abfrage kommen, und ich versuche in Paginierung mit Offset + Limit zu arbeiten, wie in apollo docs beschrieben. Momentan wird durch Drücken von "loadMore" die Abfrage aktualisiert und das Ergebnis in fetchMoreResult ist korrekt. Darüber hinaus wird die verkettete newResults korrekt angezeigt, wenn protokolliert. Vielleicht mache ich eine falsche Annahme, aber die Art, wie ich die Dokumente verstanden habe, war, dass das neue Ergebnis posts automatisch in meine TestComponent übergeben und neu gerendert würde. Ist das falsch?

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) ich nicht erklären, dass meine Anfrage GetPosts Union-Typen enthalten, die wie es scheint vielleicht das Problem sein könnte, weil, wenn ich sie entfernen, das Update wie erwartet funktioniert. Ich habe ein Problem mit Paket in den Hoffnungen für mehr Klarheit geöffnet: https://github.com/apollographql/react-apollo/issues/602

Answer 1

Für das Wiedergeben der TestComponent Sie haben den Zustand der Komponente geändert.

Sie können im Grunde tun

this.setState({ 

posts: [old values + new values], 

}) 

Und dann in Render-Funktion können Sie dies durch this.state.posts