FetchMore result not passed to component if using union types

Issue from: https://github.com/apollographql/react-apollo/issues/602 that @rpylipow reported.

I wasn’t quite sure if this belongs here or apollo-client as it somewhat relates to apollographql/apollo-client#1523, however my fetchMoreResult returns the expected results. The issue is that the new result isn’t passed into my component if I’m using Union types.

Intended outcome:
I’m attempting to use fetchMore with limit/offset. My query contains union types. I’d expect that after I concat fetchMoreResult with my previous result it would be passed into my component.

Actual outcome:
The new result isn’t passed into the component. I have an author prop which indicates the author of the post. It can be an individual user or a company (each entity has unique properties). If I remove the author prop from my GetPosts query, everything works as expected with the newResult being passed into my component. This leads me to believe that the union type is the culprit.

How to reproduce the issue:

import React from 'react';
import { View, Text } from 'react-native';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const GetPosts = gql`query GetPosts($limit: Int, $offset: Int) {
  posts(limit: $limit, offset: $offset) {
    _id
    message
    createdAt
    scheduledAt
    authorType 
    author {
      ... on User {
        _id
        avatarUrl
        profile {
          firstName
          lastName
        }
      }
      ... on Company {
        _id
        name
        logo80
      }
    }
  }
}
`;

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]
            });
            // This logs exactly what I expect it to log, but it isn't re-rendered into the component.
            console.log(newResult);

            return newResult;
          },
        })
      }
    };
  }
})(TestComponent);

Version

• apollo-client@^1.0.1
• react-apollo@^1.0.0
• graphql-tag@^2.0.0

[lucasfeliciano]

@helfer Indeed using the fragment matcher not only fix this issue also fix other issues related to caching.

[yury-dymov]

same problem for me

Here is reproduction: https://github.com/yury-dymov/react-apollo-error-template I figured out that for 0.9.0 everything works fine: https://github.com/yury-dymov/react-apollo-error-template/tree/0.9.0