Script to setup experimental Apollo with streaming and ssr

package.json

{
  "name": "setup-cell-streaming-apollo",
  "version": "0.0.1",
  "bin": "./setupCellStreamingApollo.js"
}

Setup Apollo Streaming.md

Run this on the root of your Redwood project, like this:

npx https://gist.github.com/dac09/99cf500bbd5dc740a10c8cabf7372018

setupCellStreamingApollo.js

#!/usr/bin/env node
const fs = require('fs')
const path = require('path')
const process = require('process')

const rootDir = process.cwd()

addExperimentalApolloPatch()

addResolutionsToPackageJson({
  '@apollo/[email protected]':
    'patch:@apollo/experimental-nextjs-app-support@npm%3A0.4.1#./.yarn/patches/@apollo-experimental-nextjs-app-support-npm-0.4.1-de585a5c53.patch',
})

function addResolutionsToPackageJson(resolutions) {
  const packageJsonPath = './package.json'

  // Read the package.json file
  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))

  // Add the resolutions to the package.json file
  packageJson.resolutions = resolutions

  // Write the updated package.json file
  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
}

function addExperimentalApolloPatch() {
  const filePath = path.join(
    rootDir,
    '.yarn',
    'patches',
    '@apollo-experimental-nextjs-app-support-npm-0.4.1-de585a5c53.patch'
  )
  const dirPath = path.dirname(filePath)

  const patchContent = `diff --git a/dist/ssr/RehydrationContext.js b/dist/ssr/RehydrationContext.js
index 28367f189dafc08a93a84e5008cc37ce919785b1..ad722c161550b4c0ca644c04166b4a7e0703a2d8 100644
--- a/dist/ssr/RehydrationContext.js
+++ b/dist/ssr/RehydrationContext.js
@@ -7,7 +7,7 @@ exports.useRehydrationContext = exports.RehydrationContextProvider = void 0;
 const client_1 = require("@apollo/client");
 const react_1 = __importDefault(require("react"));
 const NextSSRInMemoryCache_1 = require("./NextSSRInMemoryCache");
-const navigation_1 = require("next/navigation");
+const navigation_1 = require("@redwoodjs/web");
 const dataTransport_1 = require("./dataTransport");
 const ts_invariant_1 = __importDefault(require("ts-invariant"));
 const NextSSRApolloClient_1 = require("./NextSSRApolloClient");
@@ -40,7 +40,7 @@ const RehydrationContextProvider = ({ children, }) => {
 exports.RehydrationContextProvider = RehydrationContextProvider;
 function useRehydrationContext() {
     const rehydrationContext = react_1.default.useContext(ApolloRehydrationContext);
-    const insertHtml = react_1.default.useContext(navigation_1.ServerInsertedHTMLContext);
+    const insertHtml = react_1.default.useContext(navigation_1.ServerHtmlContext);
     // help transpilers to omit this code in bundling
     if (typeof window !== "undefined")
         return;
@@ -54,6 +54,7 @@ function useRehydrationContext() {
 }
 exports.useRehydrationContext = useRehydrationContext;
 function buildApolloRehydrationContext() {
+    console.log('xxxxx buildApolloRehydrationContext')
     const rehydrationContext = {
         currentlyInjected: false,
         transportValueData: {},
`

  // Create directory if it doesn't exist
  if (!fs.existsSync(dirPath)) {
    fs.mkdirSync(dirPath, { recursive: true })
  }

  // Create file if it doesn't exist and insert patch content
  fs.writeFileSync(filePath, patchContent, {
    encoding: 'utf8',
  })
}

console.log()
console.log('~~~~ 🎉 ~~~~')
console.log()
console.log('Done! Run `yarn install`, and you should be good to go!')
console.log()
console.log('~~~~ 🎉 ~~~~')