SSR with-apollo and query variable from cache issue. #NeedHelp

[NiestrojMateusz]

Hi I have some issue when trying to use @apollo/client: latest with next:latest, useQuery hooks and apollo cache.
So step by step:
I use with-apollo HOC (from Next examples) in _app.js file.
I initialize state and pass it to ApolloCache when creating an Apollo Client

export default function createApolloClient(initialState, ctx) {
  const cache = new InMemoryCache();
  cache.writeData({
    data: {
      config: {
        first: 10,
        __typename: 'CONFIG',
      },
    },
  });
  // The `ctx` (NextPageContext) will only be present on the server.
  // use it to extract auth headers (ctx.req) or similar.
  return new ApolloClient({
    ssrMode: Boolean(ctx),
    link: new HttpLink({
      uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
      fetch,
    }),
    cache,
    typeDefs,
    resolvers: {},
  });
}

In original project state is generated based on request headers, here I used some reproduction example;

In _app.js Component is wrapped by ConfigProvider which query the data from apollo cache in this way:

export const CONFIG_QUERY = gql`
  query config {
    config @client {
      first
    }
  }
`;

export const ConfigProvider = ({ children }) => {
  const { data, loading } = useQuery(CONFIG_QUERY);

  console.log('loading', loading);
  const config = data ? data.config : {};
  return (
    <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
  );
};

Right after ConfigProvider ConfigConusmer pass the config to PostsProvider which use that config in another useQuery

export const PostsProvider = ({ children, config }) => {
  const { data } = useQuery(ALL_POSTS_QUERY, {
    variables: { ...allPostsQueryVars, first: config.first }
  });

  const allPosts = data ? data.allPosts : [];
  return (
    <PostsContext.Provider value={allPosts}>{children}</PostsContext.Provider>
  );
};

The issue is when Next execute getDataFromTree() even when config is already in cache useQuery in ConfigProvider always first return loading: true and data: undefined, that makes that PostProvider have corrupted variable and getDataFromTree throws an error. In the result all PostProvider query is called on client-side instead of server-side.

Can someone explain that behavior for me? Why first traverse return undefined even when data is already in apollo cache? Is there a way to make it work?

here is a codesanbox example https://codesandbox.io/s/trusting-sinoussi-qw4qi