Having fragments in a query causes fetchMore to not update the component

[robertvansteen]

Okay so I'm running in a weird issue. I am using the fetchMore method to implement a simple pagination and that works fine. But then I started moving bits of the query in to fragments and it broke. After investigating this I found that the query itself is executed fine, with the right fragments and parameters. The server also has no problems to return the data just like expected. And with the devtools I can also confirm that the data is being added to the store. The weird thing is that it just doesn't seem to update my component. Neither the render method nor the componentWillReceiveProps is called.

This is my fetchMore method on my (React) component.

  fetchMore = () => {
    const { data } = this.props;

    if (!data.feed.pagination.next_page) return false;

    return data.fetchMore({
      variables: { page: data.feed.pagination.next_page },
      updateQuery: (prev, { fetchMoreResult }) => ({
        feed: {
          items: [...prev.feed.items, ...fetchMoreResult.data.feed.items],
          pagination: fetchMoreResult.data.feed.pagination
        }
      })
    });
  };

And this is the query & options.

const data = graphql(
  gql`
  query feed($page: Int, $type: String, $search: String) {
    feed(count: 8, page: $page, type: $type, search: $search) {
      pagination {
        total
        next_page
      }
      items {
        id,
        feedable {
          ... on Story {
            ...StoryDetail
          }
          ... on Video {
            ...VideoDetail
          }
          ... on Gallery {
            ...GalleryDetail
          }
        }
      }
    }
  }
  ${storyFragments}
  ${videoFragments}
  ${galleryFragments}
`,
  {
    options: props => ({
      variables: { search: props.query, type: props.filter }
    })
  }
);

[robertvansteen]

By the way I don't know exactly what causes this problem, so not sure if this belongs here or in react-apollo.

I also noticed that when calling refetch the same issue occurs, updating component works fine without fragments, breaks with fragments.

[robertvansteen]

Ok so I've looked in to this a bit more and it turns out that the issue is somehow caused by the union type. If I set up my API to only return stories and I remove the ... on Video and ... on Gallery it works fine.

When upgrading to RC2, calling refetch twice causes it to update the component but it's behind one query then. (So if I start with 8 results, pressing refetch twice causes it to update to have 16, but there are 24 in the store then).

[robertvansteen]

Small correction: it only works if all the types have the same property, so if I only fetch the ID's on stories, videos and galleries it works fine. But when I add body to ... on Story for example (which is not on videos) the updateQuery is executed after my component is updated.

This is illustrated by logging the props in the render method & logging 'updateQuery' in the updateQuery method.

When all properties are the same for all types

When they differ

[robertvansteen]

This seems to be related to #1363, but I'm not sure. If so, please feel free to close this. :)

[calebmer]

I think it may be related to #1363. When does the error not occur in your query?

Also, fun fact. You could simplify your query like this by removing the inline fragments:

query feed($page: Int, $type: String, $search: String) {
  feed(count: 8, page: $page, type: $type, search: $search) {
    pagination {
      total
      next_page
    }
    items {
      id,
      feedable {
        ...StoryDetail
        ...VideoDetail
        ...GalleryDetail
      }
    }
  }
}

I assume that your StoryDetail, VideoDetail, and GalleryDetail fragments are on Story, on Video, and on Gallery respectively. This works because you already have the on x on your fragment definition!

[robertvansteen]

@calebmer there's never really an error, just a wrong order of executing things like I illustrated with the console.log. But when all the entities have the same fragments in the query (for example if I only fetch the ID's) it works fine, the issue occurs when I fetch something that is not all entities (like a video URL that is only on the video entity).

And thanks for the tip about removing the extra on x! 💡

[robertvansteen]

Fixing #1523 fixes this too. 👍