Khan / Khan/aphrodite

Aphrodite / GraphQL / SSR - cannot automatically buffer without a document

Open
#326 5 comments 2 reactions 0 assignees View on GitHub
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()}


${html}



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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.