React-snap: does this work with react-apollo?

[EAT-CODE-KITE-REPEAT]

does this work with react-apollo?
sorry if this is a stupid question.

[stereobooster]

There is a real browser behind the scene. If this thing works in a browser it will work in react-snap. The only question is how you gonna rehydrate the generated code.

[jidan70]

Hi @stereobooster, but is there a way to increase the time react-snap crawls your page? Because i'm using react-apollo but react-snap renders the page before all my request with react-apollo is done.

[stereobooster]

Do you have example application that I can test?

There is a waitFor option the same as puppeteer. But obviously this is a hack and there should be a better way to do this, like https://github.com/geelen/react-snapshot/pull/30

[jidan70]

Ok thanks, i will create a small example. So is this better solution to be sure that everything we need has been rendered in the react app?

[stereobooster]

There is no better solution so far

[stereobooster]

Heh it is actually possible to rehydrate Apollo store, so you can do something like this. (Not an exact code)

// Grab the state from a global variable injected into the server-generated HTML
const preloadedState = window.__APOLLO_STORE__

// Allow the passed state to be garbage-collected
delete window.__APOLLO_STORE__

const client = new ApolloClient({
  initialState: preloadedState,
});

// Tell react-snap how to save state
window.snapSaveState = () => ({
  "__APOLLO_STORE__": client.store.getState()
});

[jidan70]

Hi @stereobooster thank you very much, i'll look at this

[stereobooster]

Will close this for now. Feel free to reopen

[zomars]

@jidan70 would you kindly share your working example?

[zomars]

I figured it out, I'll share it here for reference:

// index.js
import React from 'react';
import { hydrate, render } from 'react-dom';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';
import { loadComponents, getState } from 'loadable-components';
import App, { query } from './App';
import './app.css';

// Grab the state from a global variable injected into the server-generated HTML
const preloadedState = window.__APOLLO_STORE__;

// Allow the passed state to be garbage-collected
delete window.__APOLLO_STORE__;

const client = new ApolloClient({
  initialState: preloadedState,
});

// Tell react-snap how to save state
window.snapSaveState = () => ({
  __APOLLO_STORE__: client.readQuery({
    query, // you can pass any query you want to prerender here
  }),
});

const query = gql`
  query ReadTodo {
    todo(id: 5) {
      id
      text
      completed
    }
  }
`;

const rootElement = document.getElementById('root');

const AppWithRouter = (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

loadComponents()
  .then(() => hydrate(AppWithRouter, rootElement))
  .catch(() => render(AppWithRouter, rootElement));

[vishnup95]

@zomars Where did you add this to?

[zomars]

@vishnup95 I've updated my previous comment for more clarity. But, IDK if this still working TBH. I've moved into other projects.