Merge pull request #2623 from OpenNeuroOrg/utf-8-hydrate-fix

fix(ssr): Prevent Apollo state from corrupting UTF-8 objects
OpenNeuroOrg · Jun 30, 2022 · df251c4 · df251c4
2 parents bc6b359 + 9f0d9c4
commit df251c4
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/openneuro-app/src/index.html b/packages/openneuro-app/src/index.html
@@ -21,7 +21,7 @@
 <body>
     <div id="main">${react}</div>
     <script src="/client.jsx" type="module"></script>
-    <script>window.__APOLLO_STATE__=atob("${apolloState}");</script>
+    <script>window.__APOLLO_STATE__=decodeURIComponent(atob("${apolloState}"));</script>
 </body>
 
 </html>
diff --git a/packages/openneuro-app/src/server.jsx b/packages/openneuro-app/src/server.jsx
@@ -57,9 +57,9 @@ export async function render(url, cookies) {
   const head = `${helmet.title.toString()}${helmet.meta.toString()}${helmet.style.toString()}`
 
   // Prevent <script> tags from strings
-  const apolloState = Buffer.from(JSON.stringify(client.extract())).toString(
-    'base64',
-  )
+  const apolloState = Buffer.from(
+    encodeURIComponent(JSON.stringify(client.extract())),
+  ).toString('base64')
 
   return { react, apolloState, head, css: redesignStyles }
 }