menu

Apollo

A community of developers, designers and others who love Apollo and GraphQL. 🚀

Channels
# All channels
view-forward
# General
view-forward
# Apollo Angular
view-forward
# Announcements
view-forward
# Apollo Android
view-forward
# Apollo Client
view-forward
# Apollo iOS
view-forward
# Apollo Link
view-forward
# Apollo Link Rest
view-forward
# Local State
view-forward
# Apollo Studio
view-forward
# Apollo Server
view-forward
# Apollo Tooling
view-forward
# Contributing
view-forward
# Docs
view-forward
# Events
view-forward
# GraphQL Tools
view-forward
# Jobs
view-forward
# Random
view-forward
# React Apollo
view-forward
# Showcase
view-forward
# Subscriptions
view-forward
# Testing
view-forward
# Vue Apollo
view-forward
Team

SSR with Material-UI ReactRouterConfig Loadable-Components

May 24, 2019 at 11:28am

SSR with Material-UI ReactRouterConfig Loadable-Components

May 24, 2019 at 11:28am
Hi guys! I'm trying moving from Redux to Apollo store and facing with new challenges that Apollo brings us :) The first problem was the need for two-step rendering App component (due to MaterialUI's generate class names problem). Once solved this problem, facing with next: empty client.extract() and renderToString(App) on server side. On client side app works ok, but on server side {renderRoutes(routes)} component output empty. I'm use graphql HOC model and factory pattern: getDataFromTree(App).then(() => { const content = ReactDOM.renderToString(App); const initialState = client.extract(); const html = <Html content={content} state={initialState} />; res.send(<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}); }); Has anyone had a similar experience ?

November 28, 2019 at 7:47am
Excuse me, have you solved the problem?
  • reply
  • like

May 22, 2020 at 11:36am
Did you manage to fix this problem?
  • reply
  • like

June 18, 2020 at 3:55pm
In case you haven't fixed this yet. To use SSR for both material UI and apollo at the same time, this is how I've solved it:
import {getMarkupFromTree} from '@apollo/react-ssr';
// Your express code
...
...
const sheets = new ServerStyleSheets();
getMarkupFromTree({
tree: sheets.collect(<App />),
renderFunction: renderToString
}).then(markup => {
const css = sheets.toString()
const state = client.extract();
// rest of your rendering code
})
  • reply
  • like