react-apollo fetchMore with notifyOnNetworkStatusChange does not update apollo cache

fetchMore with notifyOnNetworkStatusChange does not update apollo cache

Open danlunde opened this issue 4 years ago • 10 comments

Intended outcome: when calling fetchMore with new variables, then getting the correct result from the server and calling updateQuery with the combined dataset, the apollo cache should update with the combined dataset

Actual outcome:

const paginationParamsForFeed = ({ pagination = {} }) => ({
  startIndex: pagination.endIndex ? pagination.endIndex + 1 : 0,
})
let paginationParams = paginationParamsForFeed({})

<Query query={query} notifyOnNetworkStatusChange={true} variables={queryVariables}>
      {({ data, fetchMore, networkStatus }) => {
        const feed = (data && data.channel && data.channel.feed) || {}
        const list = (feed && [...new Set(feed.contentItems)].filter(item => item)) || []
        const onLoadMore = () => {
          const variableUpdates = paginationParamsForFeed({ pagination: feed.pagination })
          if (isEqual(paginationParams, variableUpdates)) return
          paginationParams = variableUpdates
          return fetchMore({
            variables: variableUpdates,
            updateQuery: (prev, { fetchMoreResult }) => {
              if (!fetchMoreResult) return prev
              return {
                ...prev,
                channel: {
                  ...prev.channel,
                  feed: {
                    ...prev.channel.feed,
                    contentItems: [...prev.channel.feed.contentItems, ...fetchMoreResult.channel.feed.contentItems],
                    pagination: {
                      ...prev.channel.feed.pagination,
                      ...fetchMoreResult.channel.feed.pagination,
                    },
                  },
                },
              }
            },
          })
        }

while updateQuery was called with the combined dataset, the {data} value didn't change to reflect the combined result and upon inspection of the apollo cache it also did not update. when notifyOnNetworkStatusChange=false this problem disappeared. reverting to react-apollo 3.1.1 also resolved the issue.

How to reproduce the issue: Reproducing has been difficult as we use this pattern of Query / onLoadMore / fetchMore / updateQuery in several places and it only seems to be causing an issues in a limited number of places. I haven't figured out if there's an outside factor helping to trigger the problem. This recent commit https://github.com/apollographql/react-apollo/commit/551e7545ab6ca99b5b6acf1d00d6b236e299e1df looks to have removed a condition which may have previously helped us out in this scenario.

Version react-apollo 3.1.3

  System:
    OS: macOS Mojave 10.14.5
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.19.1 - ~/Projects/ign/kraken/node_modules/.bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 67.0
    Safari: 12.1.1
  npmPackages:
    apollo: 2.21.0 => 2.21.0
    apollo-cache-inmemory: 1.6.3 => 1.6.3
    apollo-client: 2.6.4 => 2.6.4
    apollo-link: 1.2.13 => 1.2.13
    apollo-link-context: 1.0.19 => 1.0.19
    apollo-link-error: 1.1.12 => 1.1.12
    apollo-link-http: 1.5.16 => 1.5.16
    apollo-link-persisted-queries: 0.2.2 => 0.2.2
    apollo-storybook-react: 0.2.1 => 0.2.1
    react-apollo: 3.1.3 => 3.1.3
    react-apollo-hooks: 0.4.5 => 0.4.5