Comments (12)
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()
});
from react-snap.
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.
from react-snap.
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.
from react-snap.
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 geelen/react-snapshot#30
from react-snap.
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?
from react-snap.
There is no better solution so far
from react-snap.
Hi @stereobooster thank you very much, i'll look at this
from react-snap.
Will close this for now. Feel free to reopen
from react-snap.
@jidan70 would you kindly share your working example?
from react-snap.
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));
from react-snap.
@zomars Where did you add this to?
from react-snap.
@vishnup95 I've updated my previous comment for more clarity. But, IDK if this still working TBH. I've moved into other projects.
from react-snap.
Related Issues (20)
- Is this package working? HOT 4
- Use multiple index.html with different apps HOT 1
- pagerror and incomplet crawled page with firestore HOT 4
- Problem with access to sitemap.xml
- Error in postbuild when using react-snap
- pageerror at /: SyntaxError: Unexpected token '.' HOT 8
- It is not rendering my css file on my 404 page HOT 1
- options.waitFor freezes crawling/rendering
- YouTube Video Embed Causing Error: DOMEXception: A network error occured. HOT 1
- Home page always being returned HOT 7
- Getting Same Page source for every page HOT 3
- Continue on error HOT 1
- Disable Crawling External JS such as Adsense and Analytics
- Support Vite.JS HOT 4
- Who uses it HOT 4
- There is a phenomenon in which the build does not end in the GitHub Actions (Linux Latest) environment. HOT 9
- React 18 not working ! HOT 10
- Not able to deploy on AWS Amplify HOT 3
- react-snap vulnerability
- SyntaxError: Unexpected token '?' HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-snap.