After server render the page, use initial state on client side, actions of further query does not change state

This is a SSR setup, all the html string and store state has been retrieved and sent to browser client, and redux store is initialized correctly. But the query generated by operation in browser does not change the store state at all, although the query is sent to server and get response, even the APPLLO_QUERY_INIT and APOLLO_QUERY_RESULT action is logged by redex dev tool. And no error produced.

The same code runs through non-SSR can work correctly.

It seems that apollo reducer does not handle the actions or failed to process the action but return previous state, so state is not changed.

There is one finding I am not sure whether it is the cause : In the store state received from server in SSR mode, the apollo.queries object has one query which id is 2, but if run through local, the id is 1. After server rendering, the first action in browser is ‘@@INIT’, and second APOLLO_QUERY_INIT and third APOLLO_QUERY_RESULT_CLIENT and the queryId in second and third action is 1

[shendepu]

It is simple pagination query. server return first page of data, and in browser, go to next page. It runs completely fine if app is run locally.

Here is some redux dev tool action and state snapshots:

This should be generated by component loaded in browser from initial state by apollo-client

And it is strange to me that apollo.queries has the query which id is 2. but it is 1 if run from local.

Below is generated by go to next page on browser

We can see the action actually has data

but the state does not change at all.

The component setup is

const PositionsIndexContainerWithData = graphql(POSITION_LIST_QUERY, {
  options (props) {
    return {
      variables: {
        pageIndex: 0
      }
    }
  },
  props: ({ ownProps, data }) => {
    const { loading, mantle, fetchMore } = data
    console.log('PositionsIndexContainerWithData -- props: ')
    console.log(mantle)
    return {
      ...ownProps,
      loading,
      data,
      emplPositions: mantle && mantle.emplPositions && mantle.emplPositions.edges,
      pageInfo: mantle && mantle.emplPositions && mantle.emplPositions.pageInfo,

      loadMoreEntries (pageIndex) {
        return fetchMore({
          variables: { pageIndex },
          updateQuery: (previousResult, { fetchMoreResult }) => {
            return Object.assign({}, previousResult, {
              mantle: fetchMoreResult.data && fetchMoreResult.data.mantle
            })
          }
        })
      }
    }
  }
})(PositionsIndexContainer)

[shendepu]

I hunt it down the problem. It is my issue.

I have below code to makeRootReducer, the missingReducers part is to avoid redux complain if initial state has keys that combineReducers do not have.

export const makeRootReducer = (apolloClient, asyncReducers, initialState) => {
  let missingReducers = { }
  if (initialState !== undefined && typeof initialState === 'object') {
    for (let key in initialState) {
      if (!asyncReducers.hasOwnProperty(key)) {
        missingReducers[key] = () => initialState[key]
      }
    }
  }
  return combineReducers({
    location: locationReducer,
    form: formReducer,
    apollo: apolloClient.reducer(),
    auth: authReducer,
    ...asyncReducers,
    ...missingReducers
  })
}

It works fine when running locally because there is no initial state at all, so missingReducers calculation is simply ignored.

The fix is simple that just move ...missingReducers to the top, otherwise, the apollo reducer is override incorrectly.

return combineReducers({
    ...missingReducers, // important to be first!!! If initial state has key of sync reducer,
                        // it will be in missingReducers, put it at first order, so they will
                        // be override by below
    location: locationReducer,
    form: formReducer,
    apollo: apolloClient.reducer(),
    auth: authReducer,
    ...asyncReducers
  })

This can be closed.