Aphrodite / GraphQL / SSR - cannot automatically buffer without a document
- Dominant language
- JavaScript
- Stars
- 5.3k
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
I have implemented a Graphql Server Side Rendered (razzle) react app. We get an intermittent error
`cannot automatically buffer without a document` when loading the app.
It seems to be an issue when apollow gets the data from the tree and tries to compile the styles at that point.
A suggested method was to call the following:
```
StyleSheetTestUtils.suppressStyleInjection();
await getDataFromTree(WrappedApp);
StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
```
But running this gives the intermittent error. Have tried other various technique but have run out of options. Server get request shown below.
```
server.get("/*", async (req, res, next) => {
try {
const client = new ApolloClient({
ssrMode: true,
link: createHttpLink({
uri: process.env.RAZZLE_GQL_HOST,
fetch: fetch
}),
cache: new InMemoryCache()
});
const context = {};
const WrappedApp = (
);
await getDataFromTree(WrappedApp);
let metaHeader = Helmet.renderStatic();
const { html, css } = StyleSheetServer.renderStatic(() =>
renderToStaticMarkup(WrappedApp)
);
if (context.url) {
return res.redirect(context.url);
} else {
return res.status(200).send(
`
${css.content}
${
assets.client.css
? ``
: ""
}
${
process.env.NODE_ENV === "production"
? ``
: ``
}
${metaHeader.title.toString()}
window.__APHRODITE_STATE__=${JSON.stringify(
css.renderedClassNames
)}
window.__APOLLO_STATE__=${JSON.stringify(
client.cache.extract()
)};
`
);
}
} catch (err) {
return next(err);
}
});
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the server.get("/*", ...) SSR entry point shown in the report, especially the calls to getDataFromTree and StyleSheetServer.renderStatic. Reproduce the intermittent “cannot automatically buffer without a document” error while loading the GraphQL-rendered app, then determine which rendering sequence prevents it and verify that the server response still includes the generated HTML and CSS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, javascript, react
- Domain
- full-stack
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100