Server rehydration cause first client query fail

[fikriauliya]

My app has main Redux store which Apollo attached to, with store rehydration and server side rendering.

When the page is first loaded (Server side rendering), apollo/queries/0 has the following initial value (which seems valid):

The query is as follow ($page = 1):

apollo.query({
  variables: translatedQueries,
  query: gql`
    query Search($page:Int) {
      search(page: $page)
      {
        products {
          id
          name
        }
      }
    }
` })
.then(response => {console.log(response.data.search); response.data.search}

Problem

When the same query is run again on client but with different $page variable (i.e. move to 2nd page), apollo.query returns prematurely after APOLLO_QUERY_INIT but before APOLLO_QUERY_STOP and APOLLO_QUERY_RESULT. And the result printed from console.log above is wrong: the same as the one on the first page.

Moreover I think it's weird thatAPOLLO_QUERY_INIT modify apollo/queries/0/variables/page from 1 to 2 (shouldn't it just append new queries: apollo/queries/1 instead of updating the existing one?).

More insight

Without refreshing the page, the same query is run again with even different $page variable (i.e. move to 3rd page). Now it prints correct result. Subsequent query also works correctly

[stubailo]

Thanks for reporting. The solution is to only include the data field on the Apollo store when doing hydration. We should make that happen automatically when using react-apollo, and document it better.

Can you try the fix of deleting every field except data on the server before hydrating?

[fikriauliya]

Thank you for the suggestion. That's exactly what I did yesterday, patchy solution though but it solves the problem.
The drawback of that approach: refetch happen when navigating back to the first page (which had been fetched by server pre-rendering).

I don't really understand the whole code, but I guess the solution is to change the following in QueryManager.ts? => private idCounter = <id from store>

UPDATE: navigating back to first page uses the local cache. Previously it wasn't the case on me because I delete state.apollo, not just delete state.apollo.queries

For those experiencing the same problem, my solution is:

  delete state.apollo.queries
  return `
    <script>
      window.__INITIAL_STATE__ = ${serialize(state)};
    </script>
  `;