Fetch data from React tree using an existing store

[gajus]

Originally posted in: #153 (comment)

I am struggling with server-side rendering when using an existing redux store.

Here is my route handler:

const handleRoute = (res, routes, renderProps) => {
  const client = new ApolloClient({
    ssrMode: true,
    networkInterface: createNetworkInterface('http://127.0.0.1:8003/')
  });

  const store = createStore(undefined, client);

  const app = <ApolloProvider client={client} store={store} immutable={true}>
    <RouterContext {...renderProps} />
  </ApolloProvider>;

  const test = {client};

  getDataFromTree(app, test)
    .then((context) => {
      console.log('test.client.store.getState().apollo', test.client.store.getState().apollo);
      console.log("context.store.getState().get('apollo')", context.store.getState().get('apollo'));
      console.log("store.getState().get('apollo')", store.getState().get('apollo'));
    });
};

Here is the output:

test.client.store.getState().apollo { queries:
   { '0':
      { queryString: 'query ($blogId: ID!) {\n  blog(id: $blogId) {\n    posts {\n      id\n      body\n      createdAt\n      name\n    }\n  }\n}\n',
        query: [Object],
        minimizedQueryString: 'query ($blogId: ID!) {\n  blog(id: $blogId) {\n    posts {\n      id\n      body\n      createdAt\n      name\n    }\n  }\n}\n',
        minimizedQuery: [Object],
        variables: [Object],
        loading: false,
        networkError: null,
        graphQLErrors: null,
        forceFetch: false,
        returnPartialData: false,
        lastRequestId: 1,
        fragmentMap: {} },
     '2':
      { queryString: 'query ($blogId: ID!) {\n  blog(id: $blogId) {\n    posts {\n      id\n      body\n      createdAt\n      name\n    }\n  }\n}\n',
        query: [Object],
        minimizedQueryString: 'query ($blogId: ID!) {\n  blog(id: $blogId) {\n    posts {\n      id\n      body\n      createdAt\n      name\n    }\n  }\n}\n',
        minimizedQuery: [Object],
        variables: [Object],
        loading: false,
        networkError: null,
        graphQLErrors: null,
        forceFetch: false,
        returnPartialData: false,
        lastRequestId: 3,
        fragmentMap: {} } },
  mutations: {},
  data:
   { '$ROOT_QUERY.blog({"id":"10"}).posts.0':
      { id: '3',
        body: 'a',
        createdAt: 'Wed Aug 31 2016 12:20:09 GMT+0100 (BST)',
        name: 'a' },
     '$ROOT_QUERY.blog({"id":"10"}).posts.1':
      { id: '4',
        body: 'b',
        createdAt: 'Wed Aug 31 2016 12:20:13 GMT+0100 (BST)',
        name: 'b' },
     ROOT_QUERY: { 'blog({"id":"10"})': [Object] },
     '$ROOT_QUERY.blog({"id":"10"})': { posts: [Object] } },
  optimistic: [] }

context.store.getState().get('apollo') { queries: {}, mutations: {}, data: {}, optimistic: [] }

store.getState().get('apollo') { queries: {}, mutations: {}, data: {}, optimistic: [] }

test.client.store.getState().apollo is the expected output. But this state is not registered with either context returned from getDataFromTree or the store passed to the ApolloProvider.

What am I missing?

[nicolo-paganin]

Same problem, it seems that the existing store passed as prop it is not used, however the Apollo internal store is used.
So you have resolved?

[gajus]

I have ended up using context.store.getState().get('apollo'). This is a workaround, though.

[jbaxleyiii]

@gajus this is really a lack of documentation on my part. Including context.store is done to make it easy for projects which use a custom redux store. The correct state to pull from is context.client.store. I need to make this clearer

[tmeasday]

Have you tried using client.getInitialState()? This might be easier